詳談js遍歷集合(Array,Map,Set)
Array可以使用下標,Map和Set不能使用下標,ES6引入了iterable類型,Array,Map,Set都屬于iterable類型,它們可以使用for...of循環(huán)來遍歷:
var a = ['A', 'B', 'C'];
var s = new Set(['A', 'B', 'C']);
var m = new Map([[1, 'x'], [2, 'y'], [3, 'z']]);
for (var x of a) { // 遍歷Array
alert(x);
}
for (var x of s) { // 遍歷Set
alert(x);
}
for (var x of m) { // 遍歷Map
alert(x[0] + '=' + x[1]);
}
>for...of與for...in的區(qū)別:for ... in循環(huán)由于歷史遺留問題,它遍歷的實際上是對象的屬性名稱。一個Array數(shù)組實際上也是一個對象,它的每個元素的索引被視為一個屬性。
當我們手動給Array對象添加了額外的屬性后,for ... in循環(huán)將帶來意想不到的意外效果:
var a = ['A', 'B', 'C'];
a.name = 'Hello';
for (var x in a) {
alert(x); // '0', '1', '2', 'name'
}
var a = ['A', 'B', 'C'];
a.name = 'Hello';
for (var x of a) {
alert(x); // 'A', 'B', 'C'
}
>更好的方式:iterable內(nèi)置的forEach方法:
var a = ['A', 'B', 'C'];
a.forEach(function (element, index, array) {
// element: 指向當前元素的值
// index: 指向當前索引
// array: 指向Array對象本身
alert(element);//'A','B','C'
});
var s = new Set(['A', 'B', 'C']);
s.forEach(function (element, sameElement, set) {
alert("參數(shù)1="+element+",參數(shù)2="+sameElement);
});
//參數(shù)1=A,參數(shù)2=A
//參數(shù)1=B,參數(shù)2=B
//參數(shù)1=C,參數(shù)2=C
var m = new Map([[1, 'x'], [2, 'y'], [3, 'z']]);
m.forEach(function (value, key, map) {
alert("參數(shù)1="+value+",參數(shù)2="+key);
});
//參數(shù)1=x,參數(shù)2=1
//參數(shù)1=y,參數(shù)2=2
//參數(shù)1=z,參數(shù)2=3
以上這篇詳談js遍歷集合(Array,Map,Set)就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
- 一文帶你徹底搞懂JS中的Map與Set
- JavaScript中Set和Map數(shù)據(jù)結(jié)構(gòu)使用場景詳解
- 一文詳解JS中的Map、Set、WeakMap和WeakSet
- javascript中Set、Map、WeakSet、WeakMap區(qū)別
- javascript?ES6中set集合、map集合使用方法詳解與源碼實例
- JavaScript Set與Map數(shù)據(jù)結(jié)構(gòu)詳細分析
- js中Map和Set的用法及區(qū)別實例詳解
- JavaScript之Map和Set_動力節(jié)點Java學院整理
- ES6學習總結(jié)之Set和Map的使用
相關(guān)文章
JS中動態(tài)創(chuàng)建元素的三種方法總結(jié)(推薦)
下面小編就為大家?guī)硪黄狫S中動態(tài)創(chuàng)建元素的三種方法總結(jié)(推薦)。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-10-10
JavaScript中html畫布的使用與頁面存儲技術(shù)詳解
這篇文章主要介紹了JavaScript中html畫布的使用與頁面存儲技術(shù),本文給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2021-08-08
JS?new操作原理及手寫函數(shù)模擬實現(xiàn)示例
這篇文章主要為大家介紹了JS?new操作原理及手寫函數(shù)模擬實現(xiàn)示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2022-07-07
JS對img標簽進行優(yōu)化使用onerror顯示默認圖像
這篇文章主要介紹了JS對img標簽進行優(yōu)化使用onerror顯示默認圖像,需要的朋友可以參考下2014-04-04

