面試題之js陣列遍歷
阿新 • • 發佈:2018-11-08
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
}