我有一個(gè)朋友，一直糾結(jié)一個(gè)問題：

arguments接受的實(shí)參是一個(gè)列表，得到的是一個(gè)像數(shù)組一樣的東西，于是他想實(shí)現(xiàn)無限參數(shù)求和，在遍歷數(shù)組求和時(shí)，使用了forEach遍歷，卻報(bào)錯(cuò)了，問這是為什么？

（真的不是我?。?/p>

代碼如下：

執(zhí)行代碼結(jié)果：

首先我們要分析一下真數(shù)組和偽數(shù)組的本質(zhì)區(qū)別；

arguments既然得到一個(gè)類似于數(shù)組的東西，使用forEach方法為什么會(huì)報(bào)錯(cuò)呢？

實(shí)際上，它并不是一個(gè)真正的數(shù)組，而是一個(gè)類數(shù)組或者叫偽數(shù)組，也就是一個(gè)類似于數(shù)組的東西，其實(shí)它也只是一個(gè)概念，咱們不能輕易被這些概念嚇著。

下面我們一起看看什么是偽數(shù)組呢？

1.我們先來看看用于接受實(shí)參的方法 arguments , 執(zhí)行代碼如下：

function fn() {  
      console.log(arguments);
}
fn(1,2,3,4,5)

執(zhí)行代碼結(jié)果：

這里可以看到，Arguments顯示的也有方括號(hào) [1,2,3,4,5...] ，但是后面多了一些其他方法；也有l(wèi)ength屬性，但沒有數(shù)組的push，pop等那些方法，像數(shù)組又不是數(shù)組。

并且從上圖標(biāo)注的 [[prototype]]可以看到 arguments偽數(shù)組 的原型指向的是Object對(duì)象。

2.大家也可以去打印看看其他比如getElementsByClassName 得到的

<div></dic>
<div></dic>
<div></dic>

<script>
    var oDivs = document.getElementsByTagName("div");
    console.log(oDiv);
</script>

執(zhí)行查看結(jié)果：

這里可以看到：HTMLCollection顯示的也有方括號(hào) [1, 2, 3, 4, 5...] ，但是后面也多了一些其他方法；也有l(wèi)ength屬性，同樣沒有數(shù)組的push，pop等那些方法，也是像數(shù)組又不是數(shù)組。

也可以看出 [[prototype]]通過標(biāo)簽名獲取頁面元素拿到的偽數(shù)組的原型指向的是HTMLCollection對(duì)象

當(dāng)然也還有一些其他的，這里就不一一列舉了，簡(jiǎn)單說，偽數(shù)組具有以下特點(diǎn)：

• 擁有l(wèi)ength屬性，可以獲取長度;
• 擁有角標(biāo)索引，可以通過length屬性遍歷獲取所有值。
• 但是不可以使用數(shù)組的內(nèi)置方法。

3.我們?cè)賮砜匆幌聰?shù)據(jù)的打印結(jié)果：

可以看到，真數(shù)組的 proto 指向的是Array數(shù)組

那么我們一起看看為什么偽數(shù)組不能使用數(shù)組的內(nèi)置方法和屬性呢？

從以上所述，我們也可以看出偽數(shù)組的原型不一樣，其實(shí)就是不同的對(duì)象，而數(shù)組的原型是Array，他們與真數(shù)組的本質(zhì)不一樣。這也是偽數(shù)組為什么不能使用數(shù)組的屬性和方法的根本原因，也就是說偽數(shù)組沒有辦法使用數(shù)組的方法。比如forEach、pop等方法，必須把他們轉(zhuǎn)化為真數(shù)組才能使用數(shù)組的各種方法。

接下來我們就說說偽數(shù)組轉(zhuǎn)真數(shù)組的方法：

1 最簡(jiǎn)單的方法：

//1.先聲明一個(gè)空數(shù)組
let newArr = [];
//然后遍歷偽數(shù)組
for (let i = 0; i < arguments.length; i++ ) {
    //將偽數(shù)組中的值通過索引逐個(gè)添加到新數(shù)組當(dāng)中。
    newArr[i] = arguments[i};
}

2 利用Array的原型對(duì)象的slice方法，配合call()方法修改slice中this指向

//slice原本是數(shù)組的截取子數(shù)組的方法，這里給數(shù)組的原型對(duì)象方法slice的指向強(qiáng)制改成arguments
let newArr = Array.prototype.slice.call(arguments);

3 利用擴(kuò)展運(yùn)算符(...)將偽數(shù)組轉(zhuǎn)化為真數(shù)組

//ES6語法 let newArr=[];
let newArr = [...arguments];

4 利用ES6的Array.from方法

let newArr = Array.from(arguments);

改變之后，我們就可以得到一個(gè)真正的數(shù)組，后面再使用forEach獲取其他方法也就不會(huì)報(bào)錯(cuò)啦。

總結(jié)：

偽數(shù)組的原型是Object ,真數(shù)組的原型是Array ;

偽數(shù)組其實(shí)是鍵值對(duì)的形式，真數(shù)組是基于索引下標(biāo)實(shí)現(xiàn)的；

偽數(shù)組可以通過以上4種方式轉(zhuǎn)化為真數(shù)組，進(jìn)而使用數(shù)組的forEach等其他方法

當(dāng)然了，如果只是普通遍歷也可以用for循環(huán)來實(shí)現(xiàn)，不需要轉(zhuǎn)真數(shù)組這么麻煩，在實(shí)際開發(fā)中大家也要酌情使用哦！

到此這篇關(guān)于javascript中偽數(shù)組和真數(shù)組的文章就介紹到這了,更多相關(guān)js偽數(shù)組和真數(shù)組內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論