ES6教程之for循環(huán)和Map,Set用法分析
本文實例講述了ES6教程之for循環(huán)和Map,Set用法。分享給大家供大家參考，具體如下：
現(xiàn)在大家先想一想，如果要你遍歷一個數(shù)組的元素，你會選擇如何去做呢？一般都會想起for循環(huán)：
for (var index = 0; index < myArray.length; index++) {
console.log(myArray[index]);
}
可惜我得告訴你，這個方法是二十年的人才應該使用的方法，在ES5中已經(jīng)提出了更為簡便的forEach方法，代碼如下：
myArray.forEach(function (value) {
console.log(value);
});
雖然forEach方法簡短一點，但是它也有它的缺點，就是不能夠break來中途退出循環(huán)，也不能通過return來退出循環(huán)。
那么不是還有for-in方法嗎：
for (var index in myArray) {
console.log(myArray[index]);
}
可是for-in方法實際上是為存儲key的鍵值對型對象準備的，而不是為數(shù)組準備的，它的下標為字符串“1”，“2”……相信大家都知道“1”+“2”會怎么樣吧？
for-of循環(huán)
ES6為了不影響以前的代碼，為了滿足很多人已經(jīng)養(yǎng)成的習慣，只能推出一種新的循環(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的默認對象表示方式是{}，但是JavaScript的對象有個小問題，就是鍵必須是字符串。但實際上Number或者其他數(shù)據(jù)類型作為鍵也是非常合理的。
為了解決這個問題，最新的ES6規(guī)范引入了新的數(shù)據(jù)類型Map。
Map是具有極快查找速度的鍵值對結構。
我們看看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中的元素不能夠重復。
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"}
可以看到，再次添加的重復數(shù)據(jù)會被過濾掉。
那么這兩種對象的運用場景有哪些呢？
Map可以用來存儲鍵值對，比如姓名和年齡，而Set可以用來存儲不能重復的目標，比如學號列表。
for-of用于對象
好啦，介紹完了兩種類型的新對象，讓我們看看for-of如何作用于Set對象上的：
var uniqueWords = new Set(words);
for (var word of uniqueWords) {
console.log(word);
}
遍歷Map對象則不同，因為Map是以鍵值對存儲的，所以我們需要分開兩個單獨的變量來遍歷：
for (var [key, value] of phoneBookMap) {
console.log(key + "'s phone number is: " + value);
}
但是需要注意一點。for-of并不是用來遍歷普通的對象的屬性的，如果我們一定要這么做，可以使用for-in或者如下方法：
for (var key of Object.keys(someObject)) {
console.log(key + ": " + someObject[key]);
}
希望本文所述對大家ECMAScript程序設計有所幫助。
相關文章
這篇文章主要介紹了JS的拖拽屬性draggable詳解,本文通過示例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-04-04
JavaScript中substring()函數(shù)方法是返回位于String對象中指定位置的子字符串2013-04-04
uniapp?使用?tree.js?解決模型加載不出來的問題及解決方法
本文介紹了在uniapp中使用tree.js時遇到的模型加載不出來的問題,并最終發(fā)現(xiàn)是由于縮放問題導致的,通過調(diào)用`getFitScaleValue()`方法解決了這個問題,感興趣的朋友一起看看吧2025-02-02
js 獲取網(wǎng)絡圖片的高度和寬度的實現(xiàn)方法(變通了下)
簡單地說就是把圖片放入一個自動伸縮的DIV中，然后獲取DIV的寬和高！這個不錯的變通，大家可以參考下。2009-10-10
本篇文章主要是對Ajax提交與傳統(tǒng)表單提交的區(qū)別進行了詳細的介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-02-02
使用JavaScript實現(xiàn)node.js中的path.join方法
Node.JS中的 path.join 非常方便，能直接按相對或絕對合并路徑，有時侯前端也需要這種方法，如何實現(xiàn)呢？感興趣的朋友跟隨腳本之家小編一起看看吧2018-08-08
這篇文章主要介紹了微信小程序 簡易計算器實現(xiàn)代碼實例,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2019-09-09
今天小編就為大家分享一篇解決Layui 表單提交數(shù)據(jù)為空的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
深入理解JS中的微任務和宏任務的執(zhí)行順序及應用場景
JavaScript中的任務分為宏任務和微任務，它們的執(zhí)行順序會影響代碼的執(zhí)行結果。了解它們的機制可以幫助我們更好地理解事件循環(huán)和異步編程，避免出現(xiàn)一些意想不到的錯誤2023-05-05
這篇文章主要介紹了前端使用cookie的兩種方式,分別是通過瀏覽器自動管理和通過JavaScript顯式操作,文章詳細講解了如何設置、讀取和刪除Cookie,并強調(diào)了安全性問題,需要的朋友可以參考下2025-02-02