全国旗舰校区

不同学习城市 同样授课品质

北京

深圳

上海

广州

郑州

大连

武汉

成都

西安

杭州

青岛

重庆

长沙

哈尔滨

南京

太原

沈阳

合肥

贵阳

济南

下一个校区
就在你家门口
+
当前位置:首页  >  技术干货

Javascript中的内置对象—数组

发布时间:2022-06-01 16:21:00
发布人:wjy

大家好,有关js中的数组,很多小伙伴可能都会有疑问,尤其是面试的过程中有大量有关于原生数组的题,以及数组中的方法,及方法的返回值、是否会修改原数组等等。

想要彻底解决这些问题,就要系统的解析数组的方法,那么我们今天就来深度解析一下这个问题哈。

## **什么是数组?**

> 数组:存储一组或一系列相关数据的窗口,相当于多个变量的组合。(小区)

- 当有多个数据进行存储和处理时使用数组,如果存储5个、50个数据呢?
- 数组是在内存中连续开辟的空间,相比变量,对于存储或读取数据的性能更高、更快。

> 数组下标:能够标识唯一一个数组空间的索引号。(相当于房间的门牌号)
> 下标从0开始,最大下标:数组的长度- 1
> 数组的元素:存储在数组中具有唯一索引号中的数据,叫元素。

Javascript中的内置对象—数组

## **如何声明数组?**

1. 字面量方式:[]
2. 构造函数方式:new Array()

```text
var arr = []; //声明一个空数组
var list = new Array(); //声明一个空数组
```

## **两种声明方式的区别?**

1. 字面量方式,无论存储什么数据,都表示数组元素。
2. 构造函数中有且仅有一个正整数时,表示数组长度。
3. 构造函数中有一个负整数或小数时,直接报错
4. 构造函数中有一个或多个其它类型数据时,表示数组元素。

```text
var arr = [5]; // 表示数组中有一个元素是5,长度是1
var arr = new Array(5); //表示这个数组的长度为5,可以存放5个元素。默认元素为undefined,undefined,undefined,undefined,undefined
var arr = new Array(-5); //长度不能为负数,程序报错
var arr = new Array(5.3); //长度不能为小数,程序报错
var arr = new Array('3'); //表示数组中有一个元素是'3',长度是1
var arr = new Array(1,2,3,4,5);//表示数组中有5个元素,分别是1 2 3 4 5 ,长度是5
```

## **如何访问数组?**

> 数组名[下标]

```text
var arr = [1,2,3,4,5]; //声明一个数组,存放了5个元素
arr[5] = 6; //为数组新增了一个元素6,下标为5
console.log(arr[0]); //访问数组中0下标对应的元素是1
```

## **数组的属性**

> length : 表示数组的长度(即数组中有多少个内存空间)

```text
var arr = [1,2,3,4];
console.log(arr.length); // 4 表示数组的长度
```

## **数组的方法(增、删、改、截、拼、复、排、转)**

**增:**

> unshift(元素,元素,元素,……)

- 作用:在数组的首部添加新元素。
- 返回值:新增后数组的长度
- 是否影响原数组:是

```text
var arr = [5,6,7,8,9]; //声明一个数组
console.log(arr.unshift(true,[1,2,3],false)); //unshift方法的返回值,8 表示新增后这个数组的长度是8
console.log(arr); // 输出原数组 [true,[1,2,3],false,5,6,7,8,9]
```

> push(元素,元素,元素,……)

- 作用:在数组的尾部添加新元素。
- 返回值:新增后数组的长度
- 是否影响原数组:是

```text
var arr = [5,6,7,8,9];
console.log(arr.push(true,[1,2,3],false)); //push方法的返回值,8 表示新增后这个数组的长度是8
console.log(arr); // 输出原数组 [5, 6, 7, 8, 9, true, [1,2,3], false]
```

**删:**

> shift()

- 作用:删除数组首部的一个元素( 一次只能删除一个)
- 返回值:被删除的元素
- 是否影响原数组:是

```text
var arr = [5,6,7,8,9];
console.log(arr.shift()); //shift方法的返回值,5 表示在数组中删除的元素5
console.log(arr); // 输出原数组 [6, 7, 8, 9]
//删除全部元素
var arr = [5,6,0,8,9];
while(arr.length){
    arr.shift();
}
console.log(arr);
```

> pop()

- 作用:删除数组尾部的一个元素( 一次只能删除一个)
- 返回值:被删除的元素
- 是否影响原数组:是

```text
var arr = [5,6,7,8,9];
console.log(arr.pop()); //9 pop方法的返回值,9 表示在数组中删除的元素9
console.log(arr); // 输出原数组 [5, 6, 7, 8]
```

**改:**

> splice(start,del_length,元素,元素,……)

- start : 从哪个下标位置开始
- del_length : 删除几个元素
- 元素 :新增的元素
- 作用:在数组的任意位置可以增、删、改的操作。
- 返回值:被删除的元素数组
- 是否影响原数组:是

```text
var arr = [5,6,7,8,9];
//只有一个参数时,表示从指定的下标开始删除到数组末尾
console.log(arr.splice(1)); // [6, 7, 8, 9] 返回值
console.log(arr); // [5] 原数组

var arr1 = [5,6,7,8,9];
//两个参数时,表示从指定的下标位置开始删除指定长度的元素
console.log(arr1.splice(1,2)); // [6, 7]
console.log(arr1); // [5, 8, 9]

var arr2 = [5,6,7,8,9];
//在删除的位置新增元素。从下标1开始删除2个元素,并在下标1的位置新增true,false两个元素
console.log(arr2.splice(1,2,true,false)); // [6, 7]
console.log(arr2); // [5, true, false, 8, 9]

var arr3 = [5,6,7,8,9];
//在下标1的位置,删除0个元素,并在下标1的位置新增两个元素true,false
console.log(arr3.splice(1,0,true,false)); // []
console.log(arr3); // [5, true, false, 6, 7, 8, 9]
```

**截:**

> slice(start,end)

- start : 从哪个下标位置开始
- end : 到哪个下标位置结束(不包含结束位置)
- 作用:截取数组中指定范围的元素
- 返回值:被截取到的元素数组
- 是否影响原数组:否

```text
var arr = [5,6,7,8,9];
// 从原数组中的下标1位置开始截取到数组末尾,并返回截取到的新数组
console.log(arr.slice(1)); // [6, 7, 8, 9] 返回值
console.log(arr); // [5,6,7,8,9] 原数组

var arr1 = [5,6,7,8,9];
//从原数组中的下标1位置开始截取到3下标之前(不包含3下标)
console.log(arr1.slice(1,3)); // [6, 7] 返回值
console.log(arr1); // [5,6,7,8,9] 原数组

var arr2 = [5,6,7,8,9];
//从原数组中的下标3位置开始截取到1下标之前(因为只能向右截取,所有未能截取到元素)
console.log(arr2.slice(3,1)); // [] 返回值
console.log(arr2); // [5,6,7,8,9] 原数组

var arr3 = [5,6,7,8,9];
//从原数组中的下标-3(最后一个元素下标为-1,-3下标对应的元素为7)位置开始截取到-1下标之前(不包含-1下标)
console.log(arr3.slice(-3,-1)); // [7, 8] 返回值
console.log(arr3); // [5,6,7,8,9] 原数组
```

**拼:**

> concat(元素,元素,……)

- 作用:在指定的数组后面拼接新的元素(如果新元素是数组,则去掉最外层的[]将里面元素拼接)
- 返回值:拼接后的新数组
- 是否影响原数组:否

```text
var arr = [5,6,7,8,9];
//拼接的元素如果是多维数组,则取最外层数组中的元素原样拼接到指定数组的后面
console.log(arr.concat(1,[true,[1,2]],3)); // [5, 6, 7, 8, 9, 1, true, [1,2], 3] 返回值
console.log(arr); // [5,6,7,8,9] 原数组
```

**复:**

```text
function copyArray(arr){
    return arr.slice(0);
}
function cloneArray(arr){
    return arr.concat();
}
```

**排:**

> reverse()

- 作用:将数组中的元素逆序存放
- 返回值:返回逆序后的数组
- 是否影响原数组:是

```text
var arr = [3,2,10,4,5];
console.log(arr.reverse()); // [5, 4, 10, 2, 3] 返回值
console.log(arr); // [5, 4, 10, 2, 3] 原数组
```

> sort()

- 作用:将数组中的元素按照字符编码进行从小到大排序
- 返回值:返回逆序后的数组
- 是否影响原数组:是

```text
var arr = [3,2,10,4,5];
//以字符串的方式比较-排序:10 与 2 比较 1 < 2,所以10 < 2
console.log(arr.sort()); // [10, 2, 3, 4, 5] 返回值
console.log(arr); // [10, 2, 3, 4, 5] 原数组
```

> sort(function(a,b){return a-b;}) : 将数组中的元素按照数字进行从小到大排序。sort(function(a,b){return b-a;}) : 将数组中的元素按照数字进行从大到小排序。

```text
var arr = [3,2,10,4,5];
// 按数字 从小到大
console.log(arr.sort(function(a,b){return a-b;})); //[2, 3, 4, 5, 10]
// 按数字 从大到小
console.log(arr.sort(function(a,b){return b-a;})); //[10, 5, 4, 3, 2]
```

**转:**

> join('连接符')

- 作用:将数组转为以指定连接符连接成的字符串
- 返回值:返回转换后的字符串
- 是否影响原数组:否

```text
var arr = [1,2,3,4];
// 将数组转成以空字符串连接成的字符串
console.log(arr.join('')); //'1234'
```

更多关于“html5培训”的问题,欢迎咨询千锋教育在线名师。千锋已有十余年的培训经验,课程大纲更科学更专业,有针对零基础的就业班,有针对想提升技术的提升班,高品质课程助理你实现梦想。

相关文章

抖音小店怎么查看订单信息查询不到

抖音小店怎么查看订单信息查询不到

2023-10-08
抖音小店在电脑从哪里进去登录的账号

抖音小店在电脑从哪里进去登录的账号

2023-10-08
抖音小店怎么开话费充值

抖音小店怎么开话费充值

2023-10-08
抖音小店怎么推广自己的产品视频教程呢

抖音小店怎么推广自己的产品视频教程呢

2023-10-08

最新文章

上海物联网培训一般费用多少

上海物联网培训一般费用多少

2023-09-12
北京物联网培训费用大概多少

北京物联网培训费用大概多少

2023-09-12
北京物联网培训需要费用高不高

北京物联网培训需要费用高不高

2023-09-12
上海效果好的物联网培训费用高吗

上海效果好的物联网培训费用高吗

2023-09-12
在线咨询 免费试学 教程领取