js Array Map and Set

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);
});