Javascript中的内置对象—数组

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

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

## **什么是数组？**

> 数组：存储一组或一系列相关数据的窗口，相当于多个变量的组合。（小区）

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

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

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

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培训”的问题，欢迎咨询千锋教育在线名师。千锋已有十余年的培训经验，课程大纲更科学更专业，有针对零基础的就业班，有针对想提升技术的提升班，高品质课程助理你实现梦想。