原生JS迭代遍歷方法使用指南
阿新 • • 發佈:2019-02-06
在原生JS中,除了for迴圈以外,自身還帶有5中迭代的方法,可根據場景自行選擇,十分方便
1.forEach
forEach十分好用,陣列的forEach回撥函式中寫入執行程式碼段就可以,回撥函式有三個引數,第一個為陣列的每一個值,第二個引數為index下標,第三個引數為當前陣列,但是注意的是forEach不能通過在For迴圈中使用return或者return false、break等方法終止遍歷,jQuery中的$.each方法break使用return false,continue使用return true
var arr = [0,1,2];
arr.forEach (function (val,idx,arr) {
console.log(val); //1,2,3
});
使用forEach遍歷陣列想要終止迴圈可以通過try catch丟擲異常的形式來終止迴圈
try{
arr.forEach(function (val,idx) {
if (val < 2) {
console.log(val);
} else {
foreach.break = new Error("Stop");
}
});
}catch(e){
console.log(e.message);
if (e.message == 'foreach is not defined') {
return;
}
}
2.every
every的遍歷會對陣列的每一個值執行回撥函式中的語句,只有在每一個值都為true時,整個遍歷返回值為true,否則為false
var test = arr.every(function (val,idx) {
return (val > 1);
});
console.log(test); //false
3.filter
filter對陣列中的每一項執行給定函式,返回該函式會返回 true 的項組成的陣列
var arr = [0,1,2,3,4];
var test = arr.filter(function (val,idx) {
return (val > 1);
});
console.log(test); //[2,3,4];
4.map
map會為陣列的每一個值去執行程式碼塊,對返回的結果(布林值)組成一個數組,作為整個遍歷的返回值
var arr = [0,1,2,3,4];
var test = arr.map(function (val,idx) {
return (val > 1);
});
console.log(test); //[false, false, true, true, true];
5.some
some方法類似於 || 的邏輯語句判斷,會為陣列每一個值執行判斷語句,只要有一個滿足條件,整個遍歷的返回值就為true
var arr = [0,1,2,3,4];
var test = arr.some(function (val,idx) {
return (val > 5);
});
console.log(test); //false;
除了以上的書寫回調的函式方法,還有兩個方法值得學習:
for in 和for of
for in:
var obj = {
name: 'zhangsan',
age: 18
}
for (var item in obj) {
console.log(item); //name age
}
for in可以用來迴圈物件,item為每個鍵值對的key,可以使用類似obj[item]的方式得到value
for of:
for(var item of Object.keys(obj)) {
console.log(item + ':' + obj[item]); //name:zhangsan age:18
}
for of可以遍歷大多數的類陣列物件,但是不支援遍歷物件,遍歷物件可以使用上面的方法,還有,for of 是在ES6中新新增的方法,注意瀏覽器的相容