Array

slice

slice()就是對應String的substring()版本，它截取Array的部分元素，然後返回一個新的Array：

var arr = ['A', 'B', 'C', 'D', 'E', 'F', 'G'];
arr.slice(0, 3); // 從索引0開始，到索引3結束，但不包括索引3: ['A', 'B', 'C']
arr.slice(3); // 從索引3開始到結束: ['D', 'E', 'F', 'G']
 

Note:slice()的起止參數包括開始索引，不包括結束索引。

如果不給slice()傳遞任何參數，它就會從頭到尾截取所有元素。利用這一點，我們可以很容易地復制一個Array：

var arr = ['A', 'B', 'C', 'D', 'E', 'F', 'G'];
var aCopy = arr.slice();
aCopy; // ['A', 'B', 'C', 'D', 'E', 'F', 'G']
aCopy === arr; // false
 

push和pop

push()向Array的末尾添加若幹元素，pop()則把Array的最後一個元素刪除掉：

var arr = [1, 2];
arr.push('A', 'B'); // 返回Array新的長度: 4
arr; // [1, 2, 'A', 'B']
arr.pop(); // pop()返回'B'
arr; // [1, 2, 'A']
arr.pop(); arr.pop(); arr.pop(); // 連續pop 3次
arr; // []
arr.pop(); // 空數組繼續pop不會報錯，而是返回undefined
arr; // []
 

unshift和shift

如果要往Array的頭部添加若幹元素，使用unshift()方法，shift()方法則把Array的第一個元素刪掉：

var arr = [1, 2];
arr.unshift('A', 'B'); // 返回Array新的長度: 4
arr; // ['A', 'B', 1, 2]
arr.shift(); // 'A'
arr; // ['B', 1, 2]
arr.shift(); arr.shift(); arr.shift(); // 連續shift 3次
arr; // []
arr.shift(); // 空數組繼續shift不會報錯，而是返回undefined
arr; // []

sort

sort()可以對當前Array進行排序，它會直接修改當前Array的元素位置，直接調用時，按照默認順序排序：

var arr = ['B', 'C', 'A'];
arr.sort();
arr; // ['A', 'B', 'C']

能否按照我們自己指定的順序排序呢？完全可以.

如果是數字，我們可以直接比較，但如果是字符串或者兩個對象呢？直接比較數學上的大小是沒有意義的，因此，比較的過程必須通過函數抽象出來。通常規定，對於兩個元素x和y，如果認為x < y，則返回-1，如果認為x == y，則返回0，如果認為x > y，則返回1，這樣，排序算法就不用關心具體的比較過程，而是根據比較結果直接排序。

JavaScript的Array的sort()方法就是用於排序的，但是排序結果可能讓你大吃一驚：

// 看上去正常的結果:
["Google", "Apple", "Microsoft"].sort(); // ["Apple", "Google", "Microsoft"];

// apple排在了最後:
["Google", "apple", "Microsoft"].sort(); // ["Google", "Microsoft", "apple"]

// 無法理解的結果:
[10, 20, 1, 2].sort(); // [1, 10, 2, 20]

第二個排序把apple排在了最後，是因為字符串根據ASCII碼進行排序，而小寫字母a的ASCII碼在大寫字母之後。

第三個排序結果是什麽鬼？簡單的數字排序都能錯？

這是因為Array的sort()方法默認把所有元素先轉換為String再排序，結果‘10‘排在了‘2‘的前面，因為字符‘1‘比字符‘2‘的ASCII碼小。

如果不知道sort()方法的默認排序規則，直接對數字排序，絕對栽進坑裏！

幸運的是，sort()方法也是一個高階函數，它還可以接收一個比較函數來實現自定義的排序。

要按數字大小排序，我們可以這麽寫：

var arr = [10, 20, 1, 2];
arr.sort(function (x, y) {
    if (x < y) {
        return -1;
    }
    if (x > y) {
        return 1;
    }
    return 0;
}); // [1, 2, 10, 20]

如果要倒序排序，我們可以把大的數放前面：

var arr = [10, 20, 1, 2];
arr.sort(function (x, y) {
    if (x < y) {
        return 1;
    }
    if (x > y) {
        return -1;
    }
    return 0;
}); // [20, 10, 2, 1]

默認情況下，對字符串排序，是按照ASCII的大小比較的，現在，我們提出排序應該忽略大小寫，按照字母序排序。要實現這個算法，不必對現有代碼大加改動，只要我們能定義出忽略大小寫的比較算法就可以：

var arr = ['Google', 'apple', 'Microsoft'];
arr.sort(function (s1, s2) {
    x1 = s1.toUpperCase();
    x2 = s2.toUpperCase();
    if (x1 < x2) {
        return -1;
    }
    if (x1 > x2) {
        return 1;
    }
    return 0;
}); // ['apple', 'Google', 'Microsoft']

忽略大小寫來比較兩個字符串，實際上就是先把字符串都變成大寫（或者都變成小寫），再比較。

從上述例子可以看出，高階函數的抽象能力是非常強大的，而且，核心代碼可以保持得非常簡潔。

Note:sort()方法會直接對Array進行修改，它返回的結果仍是當前Array：

var a1 = ['B', 'A', 'C'];
var a2 = a1.sort();
a1; // ['A', 'B', 'C']
a2; // ['A', 'B', 'C']
a1 === a2; // true, a1和a2是同一對象

reverse

reverse()把整個Array的元素給掉個個，也就是反轉：

var arr = ['one', 'two', 'three'];
arr.reverse(); 
arr; // ['three', 'two', 'one']

splice

splice()方法是修改Array的“萬能方法”，它可以從指定的索引開始刪除若幹元素，然後再從該位置添加若幹元素：

var arr = ['Microsoft', 'Apple', 'Yahoo', 'AOL', 'Excite', 'Oracle'];
// 從索引2開始刪除3個元素,然後再添加兩個元素:
arr.splice(2, 3, 'Google', 'Facebook'); // 返回刪除的元素 ['Yahoo', 'AOL', 'Excite']
arr; // ['Microsoft', 'Apple', 'Google', 'Facebook', 'Oracle']
// 只刪除,不添加:
arr.splice(2, 2); // ['Google', 'Facebook']
arr; // ['Microsoft', 'Apple', 'Oracle']
// 只添加,不刪除:
arr.splice(2, 0, 'Google', 'Facebook'); // 返回[],因為沒有刪除任何元素
arr; // ['Microsoft', 'Apple', 'Google', 'Facebook', 'Oracle']

concat

concat()方法把當前的Array和另一個Array連接起來，並返回一個新的Array：

var arr = ['A', 'B', 'C'];
var added = arr.concat([1, 2, 3]);
added; // ['A', 'B', 'C', 1, 2, 3]
arr; // ['A', 'B', 'C']

請註意，concat()方法並沒有修改當前Array，而是返回了一個新的Array。

實際上，concat()方法可以接收任意個元素和Array，並且自動把Array拆開，然後全部添加到新的Array裏：

var arr = ['A', 'B', 'C'];
arr.concat(1, 2, [3, 4]); // ['A', 'B', 'C', 1, 2, 3, 4]

join

join()方法是一個非常實用的方法，它把當前Array的每個元素都用指定的字符串連接起來，然後返回連接後的字符串：

var arr = [‘A‘, ‘B‘, ‘C‘, 1, 2, 3];
arr.join(‘-‘); // ‘A-B-C-1-2-3‘
如果Array的元素不是字符串，將自動轉換為字符串後再連接。

filter

filter也是一個常用的操作，它用於把Array的某些元素過濾掉，然後返回剩下的元素。

和map()類似，Array的filter()也接收一個函數。和map()不同的是，filter()把傳入的函數依次作用於每個元素，然後根據返回值是true還是false決定保留還是丟棄該元素。

例如，在一個Array中，刪掉偶數，只保留奇數，可以這麽寫：

var arr = [1, 2, 4, 5, 6, 9, 10, 15];
var r = arr.filter(function (x) {
    return x % 2 !== 0;
});
r; // [1, 5, 9, 15]

把一個Array中的空字符串刪掉，可以這麽寫：

var arr = ['A', '', 'B', null, undefined, 'C', '  '];
var r = arr.filter(function (s) {
    return s && s.trim(); // 註意：IE9以下的版本沒有trim()方法
});
arr; // ['A', 'B', 'C']

可見用filter()這個高階函數，關鍵在於正確實現一個“篩選”函數。

filter()接收的回調函數，其實可以有多個參數。通常我們僅使用第一個參數，表示Array的某個元素。回調函數還可以接收另外兩個參數，表示元素的位置和數組本身：

var arr = ['A', 'B', 'C'];
var r = arr.filter(function (element, index, self) {
    console.log(element); // 依次打印'A', 'B', 'C'
    console.log(index); // 依次打印0, 1, 2
    console.log(self); // self就是變量arr
    return true;
});

利用filter，可以巧妙地去除Array的重復元素：

'use strict';

var
    r,
    arr = ['apple', 'strawberry', 'banana', 'pear', 'apple', 'orange', 'orange', 'strawberry'];

r = arr.filter(function (element, index, self) {
    return self.indexOf(element) === index;
});

alert(r.toString());

去除重復元素依靠的是indexOf總是返回第一個元素的位置，後續的重復元素位置與indexOf返回的位置不相等，因此被filter濾掉了。

reduce

Array的reduce()把一個函數作用在這個Array的[x1, x2, x3...]上，這個函數必須接收兩個參數，reduce()把結果繼續和序列的下一個元素做累積計算，其效果就是：

[x1, x2, x3, x4].reduce(f) = f(f(f(x1, x2), x3), x4)

比方說對一個Array求和，就可以用reduce實現：

var arr = [1, 3, 5, 7, 9];
arr.reduce(function (x, y) {
    return x + y;
}); // 25

Map

Map是一組鍵值對的結構，具有極快的查找速度。

舉個例子，假設要根據同學的名字查找對應的成績，如果用Array實現，需要兩個Array：

var names = ['Michael', 'Bob', 'Tracy'];
var scores = [95, 75, 85];

給定一個名字，要查找對應的成績，就先要在names中找到對應的位置，再從scores取出對應的成績，Array越長，耗時越長。

如果用Map實現，只需要一個“名字”-“成績”的對照表，直接根據名字查找成績，無論這個表有多大，查找速度都不會變慢。用JavaScript寫一個Map如下：

var m = new Map([['Michael', 95], ['Bob', 75], ['Tracy', 85]]);
m.get('Michael'); // 95

初始化Map需要一個二維數組，或者直接初始化一個空Map。Map具有以下方法：

var m = new Map(); // 空Map
m.set('Adam', 67); // 添加新的key-value
m.set('Bob', 59);
m.has('Adam'); // 是否存在key 'Adam': true

m.get('Adam'); // 67
m.delete('Adam'); // 刪除key 'Adam'

m.get('Adam'); // undefined

由於一個key只能對應一個value，所以，多次對一個key放入value，後面的值會把前面的值沖掉：

Set

Set和Map類似，也是一組key的集合，但不存儲value。由於key不能重復，所以，在Set中，沒有重復的key。

要創建一個Set，需要提供一個Array作為輸入，或者直接創建一個空Set：

var s1 = new Set(); // 空Set
var s2 = new Set([1, 2, 3]); // 含1, 2, 3

重復元素在Set中自動被過濾：

var s = new Set([1, 2, 3, 3, '3']);
s; // Set {1, 2, 3, "3"}

註意數字3和字符串‘3‘是不同的元素。

通過add(key)方法可以添加元素到Set中，可以重復添加，但不會有效果：

s.add(4)
s// {1, 2, 3, 4}
s.add(4)
s// {1, 2, 3, 4}

通過delete(key)方法可以刪除元素：

var s = new Set([1, 2, 3]);
s; // Set {1, 2, 3}
s.delete(3);
s; // Set {1, 2}

Note:Map和Set是ES6標準新增的數據類型，請根據瀏覽器的支持情況決定是否要使用。

遍歷for ... of

遍歷Array可以采用下標循環，遍歷Map和Set就無法使用下標。為了統一集合類型，ES6標準引入了新的iterable類型，Array、Map和Set都屬於iterable類型。

具有iterable類型的集合可以通過新的for ... of循環來遍歷。

用for ... of循環遍歷集合，用法如下：

var a = ['A', 'B', 'C'];
var s = new Set(['A', 'B', 'C']);
var m = new Map([[1, 'x'], [2, 'y'], [3, 'z']]);

for (var x of a) { // 遍歷Array
    alert(x);
}

for (var x of s) { // 遍歷Set
    alert(x);
}

for (var x of m) { // 遍歷Map
    alert(x[0] + '=' + x[1]);
}

for ... of和for ... in區別

for ... in循環由於歷史遺留問題，它遍歷的實際上是對象的屬性名稱。一個Array數組實際上也是一個對象，它的每個元素的索引被視為一個屬性。

當我們手動給Array對象添加了額外的屬性後，for ... in循環將帶來意想不到的意外效果：

var a = ['A', 'B', 'C'];
a.name = 'Hello';

for (var x in a) {
    alert(x); // '0', '1', '2', 'name'
}

for ... in循環將把name包括在內，但Array的length屬性卻不包括在內。

for ... of循環則完全修復了這些問題，它只循環集合本身的元素：

var a = ['A', 'B', 'C'];
a.name = 'Hello';
for (var x of a) {
    alert(x); // 'A', 'B', 'C'
}

這就是為什麽要引入新的for ... of循環。

然而，更好的方式是直接使用iterable內置的forEach方法，它接收一個函數，每次叠代就自動回調該函數。以Array為例：

var a = ['A', 'B', 'C'];
a.forEach(function (element, index, array) {
    // element: 指向當前元素的值
    // index: 指向當前索引
    // array: 指向Array對象本身
    alert(element);
});

註意，forEach()方法是ES5.1標準引入的，你需要測試瀏覽器是否支持。

Set與Array類似，但Set沒有索引，因此回調函數的前兩個參數都是元素本身：

var s = new Set(['A', 'B', 'C']);
s.forEach(function (element, sameElement, set) {
    alert(element);
});

Map的回調函數參數依次為value、key和map本身：

var m = new Map([[1, 'x'], [2, 'y'], [3, 'z']]);
m.forEach(function (value, key, map) {
    alert(value);
});

如果對某些參數不感興趣，由於JavaScript的函數調用不要求參數必須一致，因此可以忽略它們。例如，只需要獲得Array的element：

var a = ['A', 'B', 'C'];
a.forEach(function (element) {
    alert(element);
});

js Array Map and Set