1. 程式人生 > >原生JS迭代遍歷方法使用指南

原生JS迭代遍歷方法使用指南

在原生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中新新增的方法,注意瀏覽器的相容