JavaScript 數(shù)組

數(shù)組是一種使用整數(shù)作為鍵 (integer-key-ed) 屬性和長度 (length) 屬性之間關(guān)聯(lián)的常規(guī)對象。此外，數(shù)組對象還繼承了 Array.prototype 的一些操作數(shù)組的便捷方法?！狹DN

數(shù)組可以存放多個值。數(shù)組的數(shù)不是指數(shù)字，而是指數(shù)據(jù)，數(shù)組可以存放任意數(shù)據(jù)類型的值。

從理論上講，在內(nèi)存允許的情況下，數(shù)組的長度是無限的。

1. 創(chuàng)建數(shù)組

數(shù)組由中括號 [] 包裹，每一項之間用逗號 , 分隔。

[第一項, 第二項, 第三項, ... , 第n項]

創(chuàng)建數(shù)組最常見的方式是使用字面量。

var hobby = ['java', 'c', 'c++', 'python', 'javascript', 1, 2, 3, true, false];

console.log(hobby);

通過直接描述一個數(shù)組的方式就可以創(chuàng)建一個數(shù)組。

2. 數(shù)組長度

數(shù)組的長度可以通過 length 屬性獲取。

var arr = [1, 2, 3, 4, 5];

console.log(arr.length); // 5

3. 訪問數(shù)組成員

數(shù)組的每一項可以稱之為成員。

數(shù)組成員可以通過下標(biāo)訪問，下標(biāo)也可以稱為索引。

下標(biāo)可以理解成數(shù)組成員的編號，編號從 0 開始，到數(shù)組長度 -1 。

var arr = ['第一項', '第二項', '第三項'];

var item1 = arr[0]; // 從0開始編號 第一項的下標(biāo)是0
var item2 = arr[1];
var item3 = arr[2];

console.log(item1); // 輸出：第一項
console.log(item2); // 輸出：第二項
console.log(item3); // 輸出：第三項

通過數(shù)組[下標(biāo)] 的方式即可訪問到成員。

4. 遍歷數(shù)組

數(shù)組遍歷主要有兩種方式：

• for 循環(huán)
• forEach 方法

4.1 for 循環(huán)

使用 for 循環(huán)，從數(shù)組下標(biāo) 0 循環(huán)到最后一位，過程中通過下標(biāo)訪問成員。

var arr = ['第一項', '第二項', '第三項', '第四項', '第五項'];

var i, len;
for (i = 0, len = arr.length - 1; i <= len; i++) {
  console.log(arr[i]);
}

4.2 forEach 方法

forEach 是數(shù)組原型上的方法，所有數(shù)組都具有此方法。

forEach 接收一個函數(shù)作為參數(shù)，在遍歷每一項的時候，這個函數(shù)會被調(diào)用，同時將當(dāng)前遍歷到的項、當(dāng)前項的下標(biāo)（索引)、遍歷的數(shù)組作為函數(shù)參數(shù)傳遞過來。

var arr = ['第一項', '第二項', '第三項', '第四項', '第五項'];

arr.forEach(function(item, index, arr) {
  console.log('第' + (index + 1) + '項的值是：' + item);
});

第二個參數(shù)的值也是從 0 開始的。

通常第三個參數(shù)用到的比較少，沒有用到可以沒必要接收這個參數(shù)。

5. 修改數(shù)組成員的值

成員的值可以通過數(shù)組[下標(biāo)] = 值的方式進行修改。

var arr = ['一', '三', '三', '四'];

console.log(arr[1]); // 輸出："三"

arr[1] = '二';

console.log(arr[1]); // 輸出："二"

6. 增減數(shù)組項

數(shù)組提供了很多方式來對成員進行增減操作，也可以依靠其他特性來增加減少數(shù)組成員。

6.1 增加

6.1.1 直接給指定位置賦值

通過下標(biāo)，直接訪問到一個不存在的成員，然后進行賦值，就可以為數(shù)組增加一項。

var arr = ['jquery', 'react'];

arr[1] = 'vue';
arr[2] = 'angular';

console.log(arr[2]); // 輸出："angular"
console.log(arr.length); // 輸出：3

6.1.2 push 方法

push 方法接收任意個參數(shù)，這些參數(shù)會依次添加到數(shù)組的末尾，添加完后返回數(shù)組新的長度。

var arr = [1];

var length = arr.push(2, 3);

console.log(arr); // 輸出：[1, 2, 3]
console.log(length); // 輸出：3

通常不會用到這個返回的長度，可以不需要接收返回值。

6.1.3 unshift 方法

unshift 接收任意個參數(shù)，這些參數(shù)會被添加到數(shù)組頭部，添加完后返回數(shù)組新的長度。

var arr = [3];

var length = arr.unshift(1, 2);

console.log(arr); // 輸出：[1, 2, 3]
console.log(length); // 輸出：3

6.2 刪除

6.2.1 pop 方法

pop 方法會刪除數(shù)組最后一項，并將刪除項作為返回值。

var arr = ['c++', 'java', 'javascript'];

var lastOne = arr.pop();

console.log(lastOne); // 輸出："javascript"

如果數(shù)組是空的，調(diào)用 pop 會返回 undefined 。

6.2.2 shift 方法

shift 方法會刪除數(shù)組的第一項，并將刪除項作為返回值。

var arr = ['996', '007'];

const first = arr.shift();

console.log(first); // 輸出："996"

與 pop 一樣，如果是數(shù)組為空的情況下，會返回 undefined 。

6.3 在數(shù)組中間刪除或添加值

splice 方法可以在任意位置添加或刪除值。

這個方法接受任意個參數(shù)，前兩個為從哪里開始（從 0 開始計數(shù)），刪除幾個，從第三個開始則是要添加的項。

arr.splice(從第幾個開始, 要刪除幾個, 要添加的項目1, 要添加的項目2, ..., 要添加的項目n);

如果不需要刪除，只需要往數(shù)組中間插入值，只需要傳遞 0 給第二個參數(shù)即可。

// 在第二項之后插入3, 4, 5
var arr = [1, 2, 6];

arr.splice(2, 0, 3, 4, 5);

因為第一個參數(shù)是從 0 開始計數(shù)，所以在第二項之后，就是要插入在第三項的位置，所以傳遞 2 ，不需要刪除項目，所以第二個參數(shù)傳遞 0 ，之后就是要插入的項。

注意：往數(shù)組中間插入數(shù)據(jù)的情況相對較少，數(shù)組做這種操作是比較低效的，小量的操作對性能的影響可以忽略不計，但有超大量非首尾的增減操作，應(yīng)考慮使用鏈表。

刪除項只需要指定從第幾項開始刪除，要刪除幾項即可。

// 去除 '996'、'加班'
var arr = ['早睡早起', '朝九晚五', '996', '加班'];

arr.splice(2, 2);

'996’和’加班’是連續(xù)的，所以一個 splice 就可以刪除掉這 2 項，2 個參數(shù)的意思就是從第 2 項開始，刪除 2 項。

7. 清空數(shù)組

將數(shù)組所有成員全部刪除就達到了清空的效果。

var arr = [1, 2, 3, 4];

arr.splice(0, arr.length);

當(dāng)然也可以使用 pop 一個個刪除，但是通常都不會用這種方式。

清空數(shù)組最常用的方式是重新給變量賦值。

var arr = ['red', 'green', 'blur'];

arr = [];

console.log(arr); // 輸出空數(shù)組：[]

通過給變量賦值一個新的空數(shù)組，達到清空數(shù)組的目的，但是這樣會改變引用，新賦值的數(shù)組和之前的數(shù)組并不是同一個。

另一種方式可以讓保持對當(dāng)前數(shù)組的引用。

var arr = ['yellow', 'black'];

arr.length = 0;

通過給數(shù)組的 length 屬性重新賦值，也可以達到清空數(shù)組的效果。

這種方式相對靈活，假如需求是保留三項、五項，只需要給 length 賦值對應(yīng)的值即可。

8. 使用 Array 創(chuàng)建數(shù)組

內(nèi)建對象 Array 也可以用來創(chuàng)建數(shù)組。

var arr = new Array();

如果什么參數(shù)都不傳遞，則返回一個空數(shù)組。

傳參則有 2 種情況：

• 如果只傳一個參數(shù)，并且這個參數(shù)的類型為數(shù)字，則會創(chuàng)建長度為這個數(shù)字的數(shù)組；
• 傳入其他類型的一個或者多個參數(shù)，則會將這些參數(shù)組合成數(shù)組。

var arr = new Array(10);

console.log(arr); // 輸出：[empty × 10]
console.log(arr.length); // 輸出：10

在控制臺可以觀察到這個數(shù)組長度為 10，但均為 empty 。

如果嘗試著訪問其中某一項，得到的值是 undefined 。

var arr1 = new Array('item1');

var arr2 = new Array(1, 2, 'item3');

console.log(arr1); // 輸出：["item1"]
console.log(arr2); // 輸出：[1, 2, "item3"]

這樣創(chuàng)建的數(shù)組，成員與傳參一致。

9. 數(shù)組中的 undefined 與 empty

在數(shù)組中 undefined 與 empty 是有區(qū)別的。

使數(shù)組項變成 empty 通常有兩種方式。

• 使用 Array 對象同時提供了長度創(chuàng)建出來的數(shù)組
• 使用 delete 關(guān)鍵字刪除的數(shù)組項

var arr1 = new Array(10);

arr1[0] = 1;

var arr2 = [1, 2, 3, 4, 5];

delete arr2[3];

console.log(arr1);
console.log(arr2);

雖然 empty 的項在訪問的時候返回的是 undefined ，但其本身只做簡單占位，\ 是遍歷不到的。

var arr = [1, undefined, 3, 4, 5];

delete arr[3];

arr.forEach(function(item, index) {
  console.log(index, item);
});

var i = 0;
for (i in arr) {
  console.log(i, arr[i]);
}

上面兩種遍歷的方式都是遍歷不到 empty 項的，而 undefined 是可以遍歷到的，這是最主要的區(qū)別。

10. 使用數(shù)組

數(shù)組非常常用，大量的 HTML 字符串在做拼接的時候，就會使用到數(shù)組。

除了用于簡單的存儲數(shù)據(jù)，數(shù)組也可以被用來解決問題。

10.1 判斷括號是否匹配

判斷一個數(shù)學(xué)式子的括號匹配是否合法，如 (1 + 2) * (3 + 4)) ，這個式子就是不合法的。

校驗括號合法不單單要看左括號和右括號的數(shù)量是否相等，還要看括號的順序， ))(( 這樣的括號順序一定是錯誤的。

利用 JavaScript 數(shù)組的特性，可以很容易的實現(xiàn)。

// 空數(shù)組
var stack = [];

// 一個式子
var equation = '(1 + (2 - 3) * 4) / (1 - 3)';

var i, len;
for (i = 0, len = equation.length; i < len; i++) {
  if (equation[i] === '(') { // 如果碰到左括號
    // 往數(shù)組里放個1
    stack.push(1);
  } else if (equation[i] === ')') { // 如果碰到右括號
    if (!stack.length) { // 判斷數(shù)組長度，如果是0，則肯定是出錯的，數(shù)組長度0的時候說明沒有左括號，沒有左括號是不可能出現(xiàn)右括號的
      // 隨便放一個1
      stack.push(1);
      break;
    }
    // 如果數(shù)組不是空的 就從數(shù)組末尾拿一個走。
    stack.pop();
  }
}

// 判斷數(shù)組長度
if (!stack.length) { // 如果數(shù)組已經(jīng)空了，說明括號都一一對應(yīng)，式子里的括號沒問題。
  console.log('括號合法');
} else {
  console.log('括號不合法');
}

使用數(shù)組實現(xiàn)的具體思路就是，碰到左括號就往數(shù)組里放一個成員，碰到一個右括號就拿掉一個成員。

這樣如果最后有剩下，說明括號沒有一一成對。

(1+2*(3+4))*1 如這樣一個式子：

初始化操作：
  定義數(shù)組 arr為空

從式子第一個字符開始循環(huán)
  第一次循環(huán)：
    數(shù)組的值為 []
    得到字符"("
    判斷是左括號，往數(shù)組里放一個1，表示碰到了左括號

  第二次循環(huán)
    數(shù)組的值為 [1]
    得到字符"+"
    既不是左括號，又不是右括號，進行下一輪循環(huán)，不做操作

  第三次循環(huán)
  第四次循環(huán)
  第五次循環(huán)
    與第二次循環(huán)基本一致

  第六次循環(huán)
    數(shù)組的值為 [1]
    得到字符"("
    是左括號 往數(shù)組里再放一個1，表示碰到了左括號

  第七次循環(huán)
    數(shù)組值為 [1, 1]
    得到字符"3"
    不是左括號，也不是右括號，進行下一輪循環(huán)

  第八次循環(huán)
  第九次循環(huán)
    與第七次一致

  第十次循環(huán)
    數(shù)組的值為 [1, 1]
    得到字符")"
    是右括號，從數(shù)組末尾拿掉一項

  第十一次循環(huán)
    數(shù)組的值為 [1]
    得到字符")"
    是右括號，從數(shù)組末尾拿掉一項

  第十二次循環(huán)
  第十三次循環(huán)
    數(shù)組值為 []
    都不是括號，不做操作
循環(huán)結(jié)束

判斷數(shù)組值，如果是空的，說明括號匹配完了，顯然 (1+2*(3+4))*1 是合法的

當(dāng)然這種判斷有局限性，假如碰到 ((1+)2)-3 這種非括號造成不合法的式子，就判斷不出來了。

其實這里用到了棧這種數(shù)據(jù)結(jié)構(gòu)，這個問題在棧的應(yīng)用上很經(jīng)典，是算法入門常見面試題之一。

11. 類數(shù)組

類數(shù)組并不是數(shù)組，而是長得像數(shù)組的對象。

var fakeArray = {
  0: '第一項',
  1: '第二項',
  3: '第三項',
  length: 3,
};

console.log(fakeArray[0]); // 輸出："第一項"
console.log(fakeArray.length); // 輸出：3

上述例子中的 fakeArray 就是一個類數(shù)組，屬性是以類型數(shù)組的下標(biāo)的形式存在，同時也具有 length 屬性。

這種類數(shù)組對象，也被稱為 array-like對象 ，部分文獻也稱為偽數(shù)組。

類數(shù)組對象可以轉(zhuǎn)化為數(shù)組，許多方法在設(shè)計時也會考慮支持類數(shù)組。

12. 小結(jié)

JavaScript 中的數(shù)組非常靈活，可以存放任意類型、任意長度 (內(nèi)存足夠的情況下) 的數(shù)據(jù)，其下標(biāo)從 0 開始，最大到數(shù)組長度減去 1 ，并提供了一系列方法，來完成增、刪、改、查操作。

數(shù)組項的 empty 和 undefined 的區(qū)別，是面試中常問的問題。