JavaScript 數(shù)組

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

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

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

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

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

[第一項(xiàng), 第二項(xiàng), 第三項(xiàng), ... , 第n項(xiàng)]

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

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

console.log(hobby);

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

2. 數(shù)組長(zhǎng)度

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

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

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

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

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

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

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

var arr = ['第一項(xiàng)', '第二項(xiàng)', '第三項(xiàng)'];

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

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

通過數(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 = ['第一項(xiàng)', '第二項(xiàng)', '第三項(xiàng)', '第四項(xiàng)', '第五項(xiàng)'];

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

4.2 forEach 方法

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

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

var arr = ['第一項(xiàng)', '第二項(xiàng)', '第三項(xiàng)', '第四項(xiàng)', '第五項(xiàng)'];

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

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

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

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

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

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

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

arr[1] = '二';

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

6. 增減數(shù)組項(xiàng)

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

6.1 增加

6.1.1 直接給指定位置賦值

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

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 方法接收任意個(gè)參數(shù)，這些參數(shù)會(huì)依次添加到數(shù)組的末尾，添加完后返回?cái)?shù)組新的長(zhǎng)度。

var arr = [1];

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

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

通常不會(huì)用到這個(gè)返回的長(zhǎng)度，可以不需要接收返回值。

6.1.3 unshift 方法

unshift 接收任意個(gè)參數(shù)，這些參數(shù)會(huì)被添加到數(shù)組頭部，添加完后返回?cái)?shù)組新的長(zhǎng)度。

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 方法會(huì)刪除數(shù)組最后一項(xiàng)，并將刪除項(xiàng)作為返回值。

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

var lastOne = arr.pop();

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

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

6.2.2 shift 方法

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

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

const first = arr.shift();

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

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

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

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

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

arr.splice(從第幾個(gè)開始, 要?jiǎng)h除幾個(gè), 要添加的項(xiàng)目1, 要添加的項(xiàng)目2, ..., 要添加的項(xiàng)目n);

如果不需要?jiǎng)h除，只需要往數(shù)組中間插入值，只需要傳遞 0 給第二個(gè)參數(shù)即可。

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

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

因?yàn)榈谝粋€(gè)參數(shù)是從 0 開始計(jì)數(shù)，所以在第二項(xiàng)之后，就是要插入在第三項(xiàng)的位置，所以傳遞 2 ，不需要?jiǎng)h除項(xiàng)目，所以第二個(gè)參數(shù)傳遞 0 ，之后就是要插入的項(xiàng)。

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

刪除項(xiàng)只需要指定從第幾項(xiàng)開始刪除，要?jiǎng)h除幾項(xiàng)即可。

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

arr.splice(2, 2);

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

7. 清空數(shù)組

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

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

arr.splice(0, arr.length);

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

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

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

arr = [];

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

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

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

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

arr.length = 0;

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

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

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

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

var arr = new Array();

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

傳參則有 2 種情況：

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

var arr = new Array(10);

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

在控制臺(tái)可以觀察到這個(gè)數(shù)組長(zhǎng)度為 10，但均為 empty 。

如果嘗試著訪問其中某一項(xiàng)，得到的值是 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ù)組項(xiàng)變成 empty 通常有兩種方式。

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

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 的項(xiàng)在訪問的時(shí)候返回的是 undefined ，但其本身只做簡(jiǎn)單占位，\ 是遍歷不到的。

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 項(xiàng)的，而 undefined 是可以遍歷到的，這是最主要的區(qū)別。

10. 使用數(shù)組

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

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

10.1 判斷括號(hào)是否匹配

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

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

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

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

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

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

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

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

這樣如果最后有剩下，說明括號(hào)沒有一一成對(duì)。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

11. 類數(shù)組

類數(shù)組并不是數(shù)組，而是長(zhǎng)得像數(shù)組的對(duì)象。

var fakeArray = {
  0: '第一項(xiàng)',
  1: '第二項(xiàng)',
  3: '第三項(xiàng)',
  length: 3,
};

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

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

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

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

12. 小結(jié)

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

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