我有一個朋友，一直糾結一個問題：

arguments接受的實參是一個列表，得到的是一個像數組一樣的東西，于是他想實現無限參數求和，在遍歷數組求和時，使用了forEach遍歷，卻報錯了，問這是為什么？

（真的不是我！）

代碼如下：

執(zhí)行代碼結果：

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

arguments既然得到一個類似于數組的東西，使用forEach方法為什么會報錯呢？

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

下面我們一起看看什么是偽數組呢？

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

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

執(zhí)行代碼結果：

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

并且從上圖標注的 [[prototype]]可以看到 arguments偽數組 的原型指向的是Object對象。

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

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

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

執(zhí)行查看結果：

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

也可以看出 [[prototype]]通過標簽名獲取頁面元素拿到的偽數組的原型指向的是HTMLCollection對象

當然也還有一些其他的，這里就不一一列舉了，簡單說，偽數組具有以下特點：

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

3.我們再來看一下數據的打印結果：

可以看到，真數組的 proto 指向的是Array數組

那么我們一起看看為什么偽數組不能使用數組的內置方法和屬性呢？

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

接下來我們就說說偽數組轉真數組的方法：

1 最簡單的方法：

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

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

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

3 利用擴展運算符(...)將偽數組轉化為真數組

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

4 利用ES6的Array.from方法

let newArr = Array.from(arguments);

改變之后，我們就可以得到一個真正的數組，后面再使用forEach獲取其他方法也就不會報錯啦。

總結：

偽數組的原型是Object ,真數組的原型是Array ;

偽數組其實是鍵值對的形式，真數組是基于索引下標實現的；

偽數組可以通過以上4種方式轉化為真數組，進而使用數組的forEach等其他方法

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

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

最新評論