您好,登錄后才能下訂單哦!
今天小編給大家分享一下ES6如何將偽數(shù)組轉(zhuǎn)換成數(shù)組的相關(guān)知識點,內(nèi)容詳細,邏輯清晰,相信大部分人都還太了解這方面的知識,所以分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后有所收獲,下面我們一起來了解一下吧。
在ES6中,可利用數(shù)組類型的from()方法來將偽數(shù)組轉(zhuǎn)換成數(shù)組,該方法可以將一個類數(shù)組對象或者可遍歷對象轉(zhuǎn)換成一個真正的數(shù)組,語法“Array.from(偽數(shù)組對象).forEache(item=>console.log(item))”。
本教程操作環(huán)境:windows7系統(tǒng)、ECMAScript 6版、Dell G3電腦。
ECMAScript6新特性——偽數(shù)組
什么是偽數(shù)組 :如果一個對象的所有鍵都是正整數(shù)或零,并且有l(wèi)ength屬性,那么這個對象就很像數(shù)組,稱為偽數(shù)組。
典型的偽數(shù)組:arguments對象,大多數(shù)的DOM元素集,還有字符串。
示例
let arrayLike = { "0": "a", "1": "b", "2": "c", "length": 3 }
像上面的 arrayLike 對象,有 length 屬性,key 也是有序序列。
所以可以遍歷,也可以查詢長度。但卻不能調(diào)用數(shù)組的方法。比如 push、pop 等方法。
在 ES6 之前,還有一個常見的偽數(shù)組:arguments。
arguments 看上去也很像一個數(shù)組,但它沒有數(shù)組的方法。
比如 arguments.push(1) ,這樣做一定會報錯。
ES6怎么將偽數(shù)組轉(zhuǎn)換成數(shù)組
在ES6中,可以利用Array類型的from 方法來將偽數(shù)組轉(zhuǎn)換成數(shù)組。
Array.from()方法用于將兩類對象轉(zhuǎn)換為真正的數(shù)組:
1、類似數(shù)組的對象,可以理解為“偽數(shù)組”
2、可遍歷對象(比如字符串)
<button name="button">測試1</button> <br/> <button name="button">測試2</button> <br/> <button name="button">測試3</button> <br/> <script> //聲明變量let變量,const常量 let btns=document.getElementsByName("button"); console.log("btns",btns);//得到一個偽數(shù)組 //此處出現(xiàn)異常:Uncaught TypeError:btns.forEach is not a function btns.forEach(item=>console.log(item)) </script> <script> Array.from(btns).forEache(item=>console.log(item))//將偽數(shù)組轉(zhuǎn)換為數(shù)組 </script>
Array.from 的主要作用就是把偽數(shù)組和可遍歷對象轉(zhuǎn)換成數(shù)組的。
說“主要作用”的原因是因為 Array.from 還提供了2個參數(shù)可傳。這樣可以延伸很多種小玩法。
Array.from 的第二個參數(shù)是一個函數(shù),類似 map遍歷 方法。用來遍歷的。
Array.from 的第三個參數(shù)接受一個 this 對象,用來改變 this 指向。
第三個參數(shù)的用法(不常用)
let helper = { diff: 1, add (value) { return value + this.diff; // 注意這里有個 this } }; function translate () { return Array.from(arguments, helper.add, helper); } let numbers = translate(1, 2, 3); console.log(numbers); // 2, 3, 4
擴展知識:把字符串轉(zhuǎn)成數(shù)組
let msg = 'hello'; let msgArr = Array.from(msg); console.log(msgArr); // 輸出: ["h", "e", "l", "l", "o"]
以上就是“ES6如何將偽數(shù)組轉(zhuǎn)換成數(shù)組”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家閱讀完這篇文章都有很大的收獲,小編每天都會為大家更新不同的知識,如果還想學(xué)習(xí)更多的知識,請關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。