淺談js中的遍歷

X1nFLY 發布于2019-08-23 12:14 / 380人閱讀

摘要：這幾個方法會完整地遍歷數組，即使在滿足條件后，循環依舊進行。如果要同時遍歷索引和項上述都是遍歷數組的方法，這個是遍歷對象的方法，并且最好不要混用

遍歷是程序中必不可少的一環，在所有語言中都存在，因為它可以簡化人們的規律性操作，本文將一一道來。

for++

這是最基礎的for循環語句，格式如下：

    var arr = [1, 2, 3, 4, 5]
    for (var i = 0; i < arr.length; i++) {
        console.log(i)
        if (i > 2) break
    }

也有人這樣寫,據說效率更高

    for (var i = 0, len = arr.length; i < len; i++) {
        console.log(i)
        if (i > 2) break
    }

while

for循環可以同時拿到每個循環的索引和數組對應的項，如果只是滿足一定條件內的循環，可以使用while 。

    var i = 0
    while (i < 5) {
        console.log(i)
        if(i>2)break
        i++
    }

forEach, map, filter

上述方法寫起來略微麻煩，所以es5新增了幾個對數組的遍歷方法，此外還有every,some,reduce，不過不是很常用。這幾個方法會完整地遍歷數組，即使在滿足條件return后，循環依舊進行。
用法如下：

// forEach 直接遍歷
arr.forEach((item, index) => {
        console.log(item, index)
    })
    
// map 依次遍歷，對每一項進行轉換，映射成另一個數組
const arr1 = arr.map((item, index) => {
        return item * 2
    })
console.log(arr1) // [2,4,6,8,10]

// filter 依次遍歷，過濾得到滿足條件的項，組成數組
const arr2 = arr.filter((item, index) => {
        return item % 2 == 0
    })
console.log(arr2) // [2,4]

for...of

這個是es6推薦的數組遍歷方法，相比forEach，優點有2點：
1.可以使用break和continue跳出循環
2.找到滿足條件的項，跳出循環后，后面的循環不會進行，從而減少內存消耗。

for (const item of arr) {
        console.log(item)
        if (item > 2) break
    }
    
// 如果要同時遍歷索引和項
for (const [index, item] of arr.entries()) {
        if (index === 2) {
            console.log(item)
            break
        }
    }

for...in

上述都是遍歷數組的方法，這個是遍歷對象的方法，并且最好不要混用

const obj = {
        a: 1,
        b: 2,
        c: 3
    }
for (const key in obj) {
    console.log(key, obj[key])
}

GPU云服務器云服務器 js獲取遍歷中的單個 js遍歷 js 遍歷磁盤 js 遍歷數據

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

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

淺談JS中 reduce() 的用法

摘要：一語法其中，表示將要原數組表示上一次調用回調時的返回值，或者初始值表示當前正在處理的數組元素表示當前正在處理的數組元素的索引，若提供值，則索引為，否則索引為表示初始值。一、語法 arr.reduce(function(prev,cur,index,arr){...}, init); 其中，arr 表示將要原數組；prev 表示上一次調用回調時的返回值，或者初始值 init;cur 表...

gplane 2019-08-23 16:41 評論0 收藏0
淺談模板引擎之artTemplate

摘要：來給大家推薦一款模板引擎，會推薦這款模板引擎最主要還是他輕量級，代碼簡潔，好用，一個大概也才幾左右。對于前端開發者來說，有一個綁數據的模板是多么的幸福，不用我多說大家也知道，終于不用在js中一個個字符串拼接一大推元素數據啥的，可以省下我們很多時間。來給大家推薦一款模板引擎artTemplate，會推薦這款模板引擎最主要還是他輕量級，代碼簡潔，好用，一個template.js大概也才幾...

zeyu 2019-08-01 17:19 評論0 收藏0
淺談模板引擎之artTemplate

摘要：來給大家推薦一款模板引擎，會推薦這款模板引擎最主要還是他輕量級，代碼簡潔，好用，一個大概也才幾左右。對于前端開發者來說，有一個綁數據的模板是多么的幸福，不用我多說大家也知道，終于不用在js中一個個字符串拼接一大推元素數據啥的，可以省下我們很多時間。來給大家推薦一款模板引擎artTemplate，會推薦這款模板引擎最主要還是他輕量級，代碼簡潔，好用，一個template.js大概也才幾...

caohaoyu 2019-08-20 18:28 評論0 收藏0
淺談JS的淺拷貝和深拷貝(遞歸和樹遍歷)

摘要：對象的特殊性因為對象的是通過指針仔細內存地址的，所以對象的拷貝不能像變量一般簡單的賦值，對象的賦值只是將指針的地址賦值過去而已，修改屬性值會對所有指向這個內存地址的對象的屬性值都會被改變，見下面的例子變量賦值修改不會對造成影響對象賦值修改會 1.對象的特殊性因為對象的是通過指針仔細內存地址的，所以對象的拷貝不能像變量一般簡單的賦值，對象的賦值只是將指針的地址賦值過去而已，修改屬性值會...

cjie 2019-08-23 16:10 評論0 收藏0
淺談webpack之plugin，webpack-manifest-plugin源碼解讀

摘要：注冊方法之后，當執行了當前的，那么掛載正在當前上的方法就會被執行。比如在開始編譯之前，就能觸發鉤子，就用到了當前的。上面都是前置知識，下面通過解讀一個源碼來鞏固下。先看一段簡單的源碼。，是眾多的的一個，官網的解釋是編譯創建之后，執行插件。通過解讀webpack-manifest-plugin，了解下plugin機制先簡單說一下這個插件的功能，生成一份資源清單的json文件，如下 s...

william 2019-08-23 16:18 評論0 收藏0