[學習筆記] ES6的數組遍歷方式 for, forEach，for...in, for...of

rozbo 發布于2019-08-21 16:43 / 1131人閱讀

摘要：有如果要遍歷一個數組，我們有多個方式可以進行。循環循環的問題在于遍歷的時候獲得的是指針，要獲取元素需要的方式取到。另外迭代的是對象所有的屬性或函數都會被迭代。選用可以根據自己的實際需求。

javascript ES6有如果要遍歷一個數組，我們有多個方式可以進行。
下面我們來分析一下各自的利弊。

for循環

const langs = ["java", "php", "c++", "python"]

    for (let i = 0; i < langs.length; i++) {
        console.log(langs[i])
    }

for循環的問題在于遍歷的時候獲得的是指針，要獲取元素需要 langs[i]的方式取到。

forEach

    langs.forEach(function (lang, index, arr) {
        console.log(lang)
        console.log(index)
        console.log(arr)
    }, this);

    lang.forEach((lang, index) => {
        console.log(lang)
        console.log(index)
    })

forEach循環我們可以直接取到元素，同時也可以取到index值。
但是forEach也有一些局限，比如我們不能在循環內break或者continue.

for...in 循環

for-in is for inspecting object properties. It works on any object, and it always loops over the names of the object"s enumerable properties.

const langs = ["java", "php", "c++", "python"]
langs.description = "This is a language set"
langs.func = ()=>(2)
    
for (var key in langs) {
  console.log(langs[key])
}

for...in 迭代獲取到的也是key而不是數值。另外for...in迭代的是對象所有的屬性或函數都會被迭代。
選用for...in可以根據自己的實際需求。

for...of

for-of is for looping over data. It only works on iterable objects; that is, objects with a suitable [iterator] method.

const langs = ["java", "php", "c++", "python"]

 for (let lang of langs) {
        console.log(lang)
    }

for...of支持break continue

如何在for...of循環中獲取到index值呢？

    for (let [index, lang] of langs.entries()) {
        console.log(`${index} - ${lang}`)
    }

for...of還有其他的用處

for...of用于arguments

for...of用于字符串遍歷

for...of用于DOM節點的遍歷

文章為學習筆記，內容參考codecasts的視頻課程https://www.codecasts.com/ser...

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/88632.html

《深入理解ES6》筆記——Set集合與Map集合（7）

摘要：常被用來檢查對象中是否存在某個鍵名，集合常被用來獲取已存的信息。返回一個布爾值，表示該值在中存在與否。集合存放對象的弱引用，當該對象的其他強引用被清除時，集合中的弱引用也會自動被垃圾回收機制回收，追蹤成組的對象是該集合最好的使用方式。 Map和Set都叫做集合，但是他們也有所不同。Set常被用來檢查對象中是否存在某個鍵名，Map集合常被用來獲取已存的信息。 Set Set是有序列表，含...

Charlie_Jade 2019-08-21 16:03 評論0 收藏0
學習筆記一基礎語法

摘要：需要注意的是字符串有三個截取方法和和方法用于操作尾部元素，和方法用于操作頭部元素。語法它用于刪除并添加元素，也可以只刪除不添加。對象操作符可以判斷對象是否含有某個屬性，但是無法判斷這個屬性是它自己的，還是繼承來的。 1.關于ECMAScript ECMA-262經歷了多個版本的更新迭代，需要了解一下五個版本： ES5：2009年12月 ES5.1：2011年6月 ES6/ECM...

Songlcy 2019-08-22 15:59 評論0 收藏0
《廖雪峰JavaScript-快速入門》筆記

摘要：文章內容來源廖雪峰快速入門賦值注釋數據類型不區分整數和浮點數，統一用表示。條件判斷使用來進行條件判斷。最新的規范引入了新的數據類型，是一組鍵值對的結構，具有極快的查找速度。一個數組實際上也是一個對象，它的每個元素的索引被視為一個屬性。文章內容來源：廖雪峰JavaScript-快速入門賦值 var x = 1; 注釋 // comment /* comment */ 數據類型 Num...

caozhijian 2019-08-23 16:54 評論0 收藏0
JavaScript：遍歷

摘要：中可以實現遍歷的數據類型主要是對象，其中包括普通對象與數組。遍歷器是一種接口，為各種不同的數據結構提供統一的訪問機制。實例五遍歷器對象實例五是的遍歷過程，通過手動調用其對象的方法實現信息獲取。為每個數組元素執行函數。前言 ??將依據自身痛點學習，計劃對原生JavaScript寫一個系統，本文為第一篇，感興趣的同學可以關注個人公眾號：ZeroToOneMe，或者github博客，將持續...

ThinkSNS 2019-08-23 17:51 評論0 收藏0