JavaScript中的偽數(shù)組用法及說(shuō)明

更新時(shí)間：2023年02月10日 16:35:57 作者：高先生的貓

這篇文章主要介紹了JavaScript中的偽數(shù)組用法及說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

JavaScript中的偽數(shù)組

1.什么是偽數(shù)組

JavaScript中存在有一種類數(shù)組，或者說(shuō)偽數(shù)組。經(jīng)常見(jiàn)到的偽數(shù)組有函數(shù)的arguments對(duì)象、dom.querySelectorAll等獲取的NodeList類（NodeList本身具有forEach方法）等。

偽數(shù)組并不是數(shù)組，它沒(méi)有繼承Array.prototype,但是它“看起來(lái)像數(shù)組”，它本身沒(méi)有數(shù)組的標(biāo)準(zhǔn)方法，但是它可以復(fù)用這些標(biāo)準(zhǔn)方法。

例子

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

如上例所示，arguments對(duì)象本身并沒(méi)有forEach方法，但是它可以復(fù)用數(shù)組的這些標(biāo)準(zhǔn)方法。

例子

function arrayLike() {
? ? // arguments.forEach(a => console.log(a));
? ? [].forEach.call(arguments, a => console.log(a));// 1 2 3 通過(guò)call改變this指向，調(diào)用數(shù)組的方法
? ? [...arguments].forEach(a => console.log(a));// 1 2 3 ?構(gòu)建一個(gè)真實(shí)數(shù)組，然后調(diào)用數(shù)組的方法
}
arrayLike(1, 2, 3);

2.如何創(chuàng)建一個(gè)偽數(shù)組對(duì)象

一個(gè)數(shù)組對(duì)象必然具有兩個(gè)特點(diǎn)：

具有一個(gè)范圍在 0~232-1 的整型length屬性
length屬性大于該對(duì)象的最大索引，索引是一個(gè) 0-232 -2 范圍內(nèi)的整數(shù)

所以很簡(jiǎn)單，只要實(shí)現(xiàn)這兩個(gè)特點(diǎn)，一個(gè)對(duì)象就是偽數(shù)組對(duì)象了。

例子

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

3.數(shù)組的concat方法

對(duì)于數(shù)組和偽數(shù)組，在數(shù)組的標(biāo)準(zhǔn)方法中，只有concat方法是不通用的，對(duì)于一個(gè)偽數(shù)組，concat方法會(huì)將其作為一個(gè)整體連接起來(lái)。

例子

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 ]

上例展示了數(shù)組和偽數(shù)組調(diào)用concat的不同結(jié)果，在遇到這種情況時(shí)，我們只有自己對(duì)偽數(shù)組進(jìn)行轉(zhuǎn)換，比如：

1.通過(guò)slice方法，復(fù)制偽數(shù)組

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

2.通過(guò)Symbol.isConcatSpreadable改變對(duì)偽數(shù)組對(duì)象進(jìn)行concat操作時(shí)的默認(rèn)行為

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 ]

JavaScript偽數(shù)組變真數(shù)組

首先介紹兩種非常簡(jiǎn)單直接的方法(偽數(shù)組為可迭代對(duì)象)：

[...偽數(shù)組] // ES6的語(yǔ)法糖，直接將偽數(shù)組(對(duì)象)變?yōu)檎鏀?shù)組
Array.from(偽數(shù)組) // Array中的靜態(tài)方法，直接將偽數(shù)組(對(duì)象)變?yōu)檎鏀?shù)組

下面講解偽數(shù)組和真數(shù)組的區(qū)別，還有利用數(shù)組的方法將偽數(shù)組變?yōu)檎鏀?shù)組：

偽數(shù)組與真數(shù)組的區(qū)別

偽數(shù)組是對(duì)象
偽數(shù)組原型是Object，而不是Array
所以偽數(shù)組沒(méi)有數(shù)組的方法，如push()、shift()、find()等等
偽數(shù)組的屬性名與數(shù)組的下標(biāo)相似，以0，1，2，… 等的數(shù)字表示，也擁有l(wèi)ength屬性

數(shù)組的方法對(duì)象能用的上嗎？==> 因?yàn)閿?shù)組的大部分方法是要遍歷數(shù)組，進(jìn)行處理再創(chuàng)建一個(gè)新數(shù)組放回的，而數(shù)組項(xiàng)的調(diào)用 arr[i] 這種形式對(duì)象也能用，所以偽數(shù)組這個(gè)對(duì)象能適應(yīng)部分?jǐn)?shù)組方法

偽數(shù)組是對(duì)象，那怎么利用數(shù)組的方法呢？==> 可以使用 [].數(shù)組方法.call(偽數(shù)組, 參數(shù)...) 或 [].數(shù)組方法.apply(偽數(shù)組, 參數(shù)) 來(lái)調(diào)用

所以利用偽數(shù)組與數(shù)組的相似點(diǎn)（屬性與下標(biāo)相似，擁有l(wèi)ength屬性，都可以用 [ ] 調(diào)用），可以很容易的利用數(shù)組的方法將偽數(shù)組變?yōu)檎鏀?shù)組。

// 下面我嘗試使用了數(shù)組中所以可能的方法，得出下列能將偽數(shù)組變?yōu)閿?shù)組的方法
// 函數(shù)中的 arguments 是存儲(chǔ)函數(shù)參數(shù)列表和特殊方法的對(duì)象，它是一個(gè)偽數(shù)組，我們將以它為例進(jìn)行嘗試
// 在實(shí)際應(yīng)用中，如果偽數(shù)組為可迭代對(duì)象，直接運(yùn)用前兩種最簡(jiǎn)單的方法就夠了

function fun1(v1, v2, v3) {
?? ?console.log('-----------------arguments-------------------')
?? ?console.log(arguments) // Arguments { 0: 1, 1: 2, 2: 3, … }
?? ?console.log(Array.isArray(arguments)) // false
?? ?console.log('------------------------------------')
?? ?
?? ?let x = null ?// 定義變量x，接收偽數(shù)組轉(zhuǎn)化后的結(jié)果
?? ?
?? ?// 簡(jiǎn)單方法（偽數(shù)組為可迭代對(duì)象）
?? ?x = [...arguments]
?? ?
?? ?x = Array.from(arguments)
?? ?
?? ?
?? ?// 調(diào)用數(shù)組方法
?? ?x = [].filter.call(arguments, v => true)
?? ?
?? ?x = [].map.call(arguments, v => v)
?? ?
?? ?x = [].slice.call(arguments)


?? ?// 上面各個(gè)方法調(diào)用后，成功將偽數(shù)組轉(zhuǎn)為真數(shù)組，其返回的真數(shù)組都是一樣的，如下
?? ?console.log(x) // Array(3) [ 1, 2, 3 ]
?? ?console.log(Array.isArray(x)) // true
}?

fun1(1, 2, 3)