大家好，有關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培訓”的問題，歡迎咨詢千鋒教育在線名師。千鋒已有十余年的培訓經驗，課程大綱更科學更專業，有針對零基礎的就業班，有針對想提升技術的提升班，高品質課程助理你實現夢想。