js數(shù)組遍歷總結(jié)

oujie 發(fā)布于2019-08-23 12:20 / 3341人閱讀

摘要：中的數(shù)組遍歷是項(xiàng)目中經(jīng)常用到的，在這里將幾種方法做個(gè)對(duì)比。第一個(gè)參數(shù)為數(shù)組元素必選，第二個(gè)參數(shù)為數(shù)組元素索引值可選，第三個(gè)參數(shù)為數(shù)組本身可選循環(huán)中傳入要執(zhí)行的回調(diào)函數(shù)，函數(shù)有三個(gè)參數(shù)。用于遍歷數(shù)組元素使用，，，用于循環(huán)對(duì)象屬性使用

js中的數(shù)組遍歷是項(xiàng)目中經(jīng)常用到的，在這里將幾種方法做個(gè)對(duì)比。

for循環(huán)：使用評(píng)率最高，也是最基本的一種遍歷方式。

let arr = ["a","b","c","d","e"];
for (let i = 0, len = arr.length; i < len; i++) {
    console.log(i);       //  0 1 2 3 4
    console.log(arr[i]);  //a b c d e
}

forEach()循環(huán)：forEach中傳入要執(zhí)行的回調(diào)函數(shù)，函數(shù)有三個(gè)參數(shù)。第一個(gè)參數(shù)為數(shù)組元素(必選)，第二個(gè)參數(shù)為數(shù)組元素索引值(可選)，第三個(gè)參數(shù)為數(shù)組本身(可選)

let arr = ["a","b","c","d","e"];
arr.forEach((item,index,arr)=> {
    console.log(item);   // a b c d e 
    console.log(index);  // 0 1 2 3 4
    console.log(arr);    // ["a","b","c","d","e"]
})

map循環(huán)： map()中傳入要執(zhí)行的回調(diào)函數(shù)，函數(shù)有三個(gè)參數(shù)。第一個(gè)參數(shù)為數(shù)組元素(必選)，第二個(gè)參數(shù)為數(shù)組元素索引值(可選)，第三個(gè)參數(shù)為數(shù)組本身(可選)

var arr = [
    {name:"a",age:"18"},
    {name:"b",age:"19"},
    {name:"c",age:"20"}
];
arr.map(function(item,index) {
    if(item.name == "b") {
        console.log(index)  // 1
    }
})

for...in循環(huán)：for...in循環(huán)可用于循環(huán)對(duì)象和數(shù)組,推薦用于循環(huán)對(duì)象,可以用來遍歷json

let obj = {
    name: "王大錘",
    age: "18",
    weight: "70kg"
}
for(var key in obj) {
    console.log(key);       //  name age weight
    console.log(obj[key]);  //  王大錘 18 70kg
}
let arr = ["a","b","c","d","e"];
for(var key in arr) {
    console.log(key);  //  0 1 2 3 4 返回?cái)?shù)組索引
    console.log(arr[key]) //  a b c d e
}

for...of循環(huán)：可循環(huán)數(shù)組和對(duì)象，推薦用于遍歷數(shù)組。

for...of提供了三個(gè)新方法：

key()是對(duì)鍵名的遍歷；

value()是對(duì)鍵值的遍歷；

entries()是對(duì)鍵值對(duì)的遍歷；

let arr = ["科大訊飛", "政法BG", "前端開發(fā)"];
for (let item of arr) {  
  console.log(item); //  科大訊飛  政法BG  前端開發(fā)
}
// 輸出數(shù)組索引
for (let item of arr.keys()) {  
  console.log(item);  // 0 1 2
}
// 輸出內(nèi)容和索引
for (let [item, val] of arr.entries()) {  
  console.log(item + ":" + val); //  0:科大訊飛  1：政法BG  2：前端開發(fā)
}

總結(jié)：forEach、map、filter、reduce、every、some 都會(huì)有 break 和 continue 不生效的問題，因?yàn)槭窃趂unction中，但function解決了閉包陷阱的問題；要使用 break、continue 可以使用 for、for...in、for...of、while。用于遍歷數(shù)組元素使用：for()，forEach()，map()，for...of 用于循環(huán)對(duì)象屬性使用：for...in