這篇文章給大家分享的是有關(guān)ES6中for循環(huán)和Map、Set怎么用的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過來看看吧。

成都創(chuàng)新互聯(lián)專注于澄邁網(wǎng)站建設(shè)服務(wù)及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗(yàn)。 熱誠為您提供澄邁營銷型網(wǎng)站建設(shè)，澄邁網(wǎng)站制作、澄邁網(wǎng)頁設(shè)計(jì)、澄邁網(wǎng)站官網(wǎng)定制、小程序制作服務(wù)，打造澄邁網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供澄邁網(wǎng)站排名全網(wǎng)營銷落地服務(wù)。

具體如下：

現(xiàn)在大家先想一想，如果要你遍歷一個(gè)數(shù)組的元素，你會選擇如何去做呢？一般都會想起for循環(huán)：

for (var index = 0; index < myArray.length; index++) {
 console.log(myArray[index]);
}

可惜我得告訴你，這個(gè)方法是二十年的人才應(yīng)該使用的方法，在ES5中已經(jīng)提出了更為簡便的forEach方法，代碼如下：

myArray.forEach(function (value) {
 console.log(value);
});

雖然forEach方法簡短一點(diǎn)，但是它也有它的缺點(diǎn)，就是不能夠break來中途退出循環(huán)，也不能通過return來退出循環(huán)。

那么不是還有for-in方法嗎：

for (var index in myArray) { 
 console.log(myArray[index]);
}

可是for-in方法實(shí)際上是為存儲key的鍵值對型對象準(zhǔn)備的，而不是為數(shù)組準(zhǔn)備的，它的下標(biāo)為字符串“1”，“2”……相信大家都知道“1”+“2”會怎么樣吧？

for-of循環(huán)

ES6為了不影響以前的代碼，為了滿足很多人已經(jīng)養(yǎng)成的習(xí)慣，只能推出一種新的循環(huán)語法for-of：

for (var value of myArray) {
 console.log(value);
}

對比for-in和for-of：

var a = ["a","b","c","d","e"];
for (var idx in a) {
  console.log( idx ); 
  }// 0 1 2 3 4 
for (var val of a) {
  console.log( val ); 
  }// "a" "b" "c" "d" "e"

for-of不僅僅可以用于數(shù)組，還可以用在dom對象上，同樣作用于Map和Set對象。

下面介紹一下Map和Set對象

Map,Set

JavaScript的默認(rèn)對象表示方式是{}，但是JavaScript的對象有個(gè)小問題，就是鍵必須是字符串。但實(shí)際上Number或者其他數(shù)據(jù)類型作為鍵也是非常合理的。

為了解決這個(gè)問題，最新的ES6規(guī)范引入了新的數(shù)據(jù)類型Map。

Map是具有極快查找速度的鍵值對結(jié)構(gòu)。

我們看看Map的使用示例：

var m = new Map([['Michael', 95], ['Bob', 75], ['Tracy', 85]]);
m.get('Michael'); // 95
var m = new Map(); // 空Map
m.set('Adam', 67); // 添加新的key-value
m.set('Bob', 59);
m.has('Adam'); // 是否存在key 'Adam': true
m.get('Adam'); // 67
m.delete('Adam'); // 刪除key 'Adam'
m.get('Adam'); // undefined

上面的has方法比indexOf速度快。

Set和Map類似，也是存在key的列表，只不過Set中的元素不能夠重復(fù)。

var s1 = new Set(); // 空Set
var s2 = new Set([1, 2, 3]); // 含1, 2, 3
var s = new Set([1, 2, 3, 3, '3']);
s; // Set {1, 2, 3, "3"}

可以看到，再次添加的重復(fù)數(shù)據(jù)會被過濾掉。

那么這兩種對象的運(yùn)用場景有哪些呢？

Map可以用來存儲鍵值對，比如姓名和年齡，而Set可以用來存儲不能重復(fù)的目標(biāo)，比如學(xué)號列表。

for-of用于對象

好啦，介紹完了兩種類型的新對象，讓我們看看for-of如何作用于Set對象上的：

var uniqueWords = new Set(words);
for (var word of uniqueWords) {
 console.log(word);
}

遍歷Map對象則不同，因?yàn)镸ap是以鍵值對存儲的，所以我們需要分開兩個(gè)單獨(dú)的變量來遍歷：

for (var [key, value] of phoneBookMap) {
 console.log(key + "'s phone number is: " + value);
}

但是需要注意一點(diǎn)。for-of并不是用來遍歷普通的對象的屬性的，如果我們一定要這么做，可以使用for-in或者如下方法：

for (var key of Object.keys(someObject)) {
 console.log(key + ": " + someObject[key]);
}

感謝各位的閱讀！關(guān)于“ES6中for循環(huán)和Map、Set怎么用”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識，如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！

本文題目：ES6中for循環(huán)和Map、Set怎么用
本文地址：http://www.chinadenli.net/article40/iiideo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供定制網(wǎng)站、軟件開發(fā)、品牌網(wǎng)站設(shè)計(jì)、手機(jī)網(wǎng)站建設(shè)、網(wǎng)站內(nèi)鏈、網(wǎng)站收錄

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)