1. 程式人生 > >面試題之js陣列遍歷

面試題之js陣列遍歷

js中的陣列遍歷是專案中經常用到的,在這裡將幾種方法做個對比。

for迴圈:使用評率最高,也是最基本的一種遍歷方式。

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()迴圈:forEach中傳入要執行的回撥函式,函式有三個引數。第一個引數為陣列元素(必選),第二個引數為陣列元素索引值(可選),第三個引數為陣列本身(可選)

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迴圈: map()中傳入要執行的回撥函式,函式有三個引數。第一個引數為陣列元素(必選),第二個引數為陣列元素索引值(可選),第三個引數為陣列本身(可選)

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) // 
 }
})

for…in迴圈:for…in迴圈可用於迴圈物件和陣列,推薦用於迴圈物件,可以用來遍歷json

let obj = {
 name: '前端攻城小牛',
 age: '864305860', //QQ群:864305860
 weight: 'max'
}
for(var key in obj) {
 console.log(key); // name age weight
 console.log(obj[key]); // 全棧開發交流群
 QQ群:864305860 max
}
let arr = ['a','b','c','d','e'];
for(var key in arr) {
 console.log(key); // 0 1 2 3 4 返回陣列索引
 console.log(arr[key]) // a b c d e
}

for…of迴圈:可迴圈陣列和物件,推薦用於遍歷數

for…of提供了三個新方法:

key()是對鍵名的遍歷;
value()是對鍵值的遍歷;
entries()是對鍵值對的遍歷;

let arr = ['前端攻城獅', '全棧開發交流群', 'QQ群:864305860'];
for (let item of arr) { 
 console.log(item); // 前端攻城獅 全棧開發交流群 QQ群:864305860
}
// 輸出陣列索引
for (let item of arr.keys()) { 
 console.log(item); // 0 1 2
}
// 輸出內容和索引
for (let [item, val] of arr.entries()) { 
 console.log(item + ':' + val); // 0:前端攻城獅 1:全棧開發交流群 2:Q群:864305860
}