欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

關(guān)于javascript中偽數(shù)組和真數(shù)組的一些小秘密

 更新時間:2022年08月05日 09:31:21   作者:陸榮濤  
在javascript中,偽數(shù)組又稱類數(shù)組,是一個類似數(shù)組的對象,是一種按照索引存儲數(shù)據(jù)且具有l(wèi)ength屬性的對象,下面這篇文章主要給大家介紹了關(guān)于javascript中偽數(shù)組和真數(shù)組的一些小秘密,需要的朋友可以參考下

我有一個朋友,一直糾結(jié)一個問題:

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

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

代碼如下:

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

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

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

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

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

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

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

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

這里可以看到,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í)行查看結(jié)果:

這里可以看到: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ù)組的內(nèi)置方法。

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

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

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

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

接下來我們就說說偽數(shù)組轉(zhuǎn)真數(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ù)組轉(zhuǎn)化為真數(shù)組

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

4 利用ES6的Array.from方法

let newArr = Array.from(arguments);

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

總結(jié):

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

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

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

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

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

相關(guān)文章

最新評論