瞭解JavaScript中的僞數組

1.什麼是僞數組

JavaScript中存在有一種類數組，或者說僞數組。常常見到的僞數組有函數的arguments對象、dom.querySelectorAll等獲取的NodeList類（NodeList自己具備forEach方法）等。

僞數組並非數組，它沒有繼承Array.prototype,可是它「看起來像數組」，它自己沒有數組的標準方法，可是它能夠複用這些標準方法。

例子

function arrayLike() {
    arguments.forEach(a => console.log(a));//TypeError: arguments.forEach is not a function
}
arrayLike(1, 2, 3);

如上例所示，arguments對象自己並無forEach方法，可是它能夠複用數組的這些標準方法。

例子

function arrayLike() {
    // arguments.forEach(a => console.log(a));
    [].forEach.call(arguments, a => console.log(a));// 1 2 3 經過call改變this指向，調用數組的方法
    [...arguments].forEach(a => console.log(a));// 1 2 3  構建一個真實數組，而後調用數組的方法
}
arrayLike(1, 2, 3);

2.如何建立一個僞數組對象

一個數組對象必然具備兩個特色：

1. 具備一個範圍在 0~2³²-1 的整型length屬性
2. length屬性大於該對象的最大索引，索引是一個 0-2³² -2 範圍內的整數

因此很簡單，只要實現這兩個特色，一個對象就是僞數組對象了。

例子

const arr = {
    1: 'AAA',
    3: 'CCC',
    length: 8,
};
[].forEach.call(arr, (item, i) => console.log(item, i)); //AAA 1 CCC 3

3.數組的concat方法

對於數組和僞數組，在數組的標準方法中，只有concat方法是不通用的，對於一個僞數組，concat方法會將其做爲一個總體鏈接起來。

例子

console.log([].concat.call(arr, [7, 8]));//[ { '1': 'AAA', '3': 'CCC', length: 8 }, 7, 8 ]
console.log([1, 2].concat([7, 8]));//[ 1, 2, 7, 8 ]

上例展現了數組和僞數組調用concat的不一樣結果，在遇到這種狀況時，咱們只有本身對僞數組進行轉換，好比：

1.經過slice方法，複製僞數組

console.log([].concat.call([].slice.call(arr), [7, 8]));
//[ <1 empty item>, 'AAA', <1 empty item>, 'CCC', <4 empty items>, 7, 8 ]

2.經過Symbol.isConcatSpreadable改變對僞數組對象進行concat操做時的默認行爲

const arr = {
    1: 'AAA',
    3: 'CCC',
    length: 8,
    [Symbol.isConcatSpreadable]: true,
};
console.log([].concat.call(arr, [7, 8]));
//[ <1 empty item>, 'AAA', <1 empty item>, 'CCC', <4 empty items>, 7, 8 ]