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

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

（真的不是我！）

代碼如下：

執(zhí)行代碼結果：

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

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

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

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

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屬性，但沒有數(shù)組的push，pop等那些方法，像數(shù)組又不是數(shù)組。

并且從上圖標注的 [[prototype]]可以看到 arguments偽數(shù)組 的原型指向的是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屬性，同樣沒有數(shù)組的push，pop等那些方法，也是像數(shù)組又不是數(shù)組。

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

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

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

3.我們再來看一下數(shù)據(jù)的打印結果：

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

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

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

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

1 最簡單的方法：

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

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

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

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

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

4 利用ES6的Array.from方法

let newArr = Array.from(arguments);

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

總結：

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

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

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

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

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

最新評論