技術文章 » es6中for和foreach的區別是什麼

es6中for和foreach的區別是什麼

2022-10-21 18:00:26

區別：1、forEach是一個迭代器，是負責遍歷（Array Set Map）可迭代物件的；而for是一種迴圈機制，只是能通過它遍歷出陣列。2、for迴圈中會用到一些中斷行為，對於優化陣列遍歷查詢是很好的，但由於forEach屬於迭代器，只能按序依次遍歷完成，所以不支援中斷行為。3、forEach的迴圈起點只能為0，且不能進行人為干預；而for迴圈不同，可以人為控制迴圈起點。

前端（vue）入門到精通課程：進入學習
Apipost = Postman + Swagger + Mock + Jmeter 超好用的API偵錯工具：

本教學操作環境：windows7系統、ECMAScript 6版、Dell G3電腦。

for迴圈和forEach本質區別

for迴圈是js提出時就有的迴圈方法。

forEach是ES5提出的，掛載在可迭代物件原型上的方法，例如Array Set Map。

forEach是一個迭代器，負責遍歷可迭代物件。

那麼遍歷，迭代，可迭代物件分別是什麼呢。

  • 遍歷：指的對資料結構的每一個成員進行有規律的且為一次存取的行為。

  • 迭代：迭代是遞迴的一種特殊形式，是迭代器提供的一種方法，預設情況下是按照一定順序逐個存取資料結構成員。迭代也是一種遍歷行為。

  • 可迭代物件：ES6中引入了 iterable 型別，Array Set Map String arguments NodeList 都屬於 iterable，他們特點就是都擁有 [Symbol.iterator] 方法，包含他的物件被認為是可迭代的 iterable。

forEach 其實是一個迭代器，他與 for 迴圈本質上的區別是 forEach 是負責遍歷（Array Set Map）可迭代物件的，而 for 迴圈是一種迴圈機制，只是能通過它遍歷出陣列。

什麼是迭代器，當它被呼叫時就會生成一個迭代器物件（Iterator Object），它有一個 .next()方法，每次呼叫返回一個物件{value:value,done:Boolean}，value返回的是 yield 後的返回值，當 yield 結束，done 變為 true，通過不斷呼叫並依次的迭代存取內部的值。

迭代器是一種特殊物件。ES6規範中它的標誌是返回物件的 next() 方法，迭代行為判斷在 done 之中。在不暴露內部表示的情況下，迭代器實現了遍歷。看程式碼

let arr = [1, 2, 3, 4]  // 可迭代物件
let iterator = arr[Symbol.iterator]()  // 呼叫 Symbol.iterator 後生成了迭代器物件
console.log(iterator.next()); // {value: 1, done: false}  存取迭代器物件的next方法
console.log(iterator.next()); // {value: 2, done: false}
console.log(iterator.next()); // {value: 3, done: false}
console.log(iterator.next()); // {value: 4, done: false}
console.log(iterator.next()); // {value: undefined, done: true}
登入後複製

我們看到了。只要是可迭代物件，呼叫內部的 Symbol.iterator 都會提供一個迭代器，並根據迭代器返回的next 方法來存取內部，這也是 for...of 的實現原理。

let arr = [1, 2, 3, 4]
for (const item of arr) {
    console.log(item); // 1 2 3 4 
}
登入後複製

把呼叫 next 方法返回物件的 value 值並儲存在 item 中，直到 value 為 undefined 跳出迴圈，所有可迭代物件可供for...of消費。再來看看其他可迭代物件：

function num(params) {
    console.log(arguments); // Arguments(6) [1, 2, 3, 4, callee: ƒ, Symbol(Symbol.iterator): ƒ]
    let iterator = arguments[Symbol.iterator]()
    console.log(iterator.next()); // {value: 1, done: false}
    console.log(iterator.next()); // {value: 2, done: false}
    console.log(iterator.next()); // {value: 3, done: false}
    console.log(iterator.next()); // {value: 4, done: false}
    console.log(iterator.next()); // {value: undefined, done: true}
}
num(1, 2, 3, 4)

let set = new Set('1234')
set.forEach(item => {
    console.log(item); // 1 2 3 4
})
let iterator = set[Symbol.iterator]()
console.log(iterator.next()); // {value: 1, done: false}
console.log(iterator.next()); // {value: 2, done: false}
console.log(iterator.next()); // {value: 3, done: false}
console.log(iterator.next()); // {value: 4, done: false}
console.log(iterator.next()); // {value: undefined, done: true}
登入後複製

所以可迭代物件中的 Symbol.iterator 屬性被呼叫時都能生成迭代器，而 forEach 也是生成一個迭代器，在內部的回撥函數中傳遞出每個元素的值

for迴圈和forEach的語法區別

瞭解了本質區別，在應用過程中，他們到底有什麼語法區別呢？

  • forEach 的引數。

  • forEach 的中斷。

  • forEach 刪除自身元素，index不可被重置。

  • for 迴圈可以控制迴圈起點。

forEach 的引數

我們真正瞭解 forEach 的完整傳參內容嗎？它大概是這樣：

arr.forEach((self,index,arr) =>{},this)
登入後複製

  • self： 陣列當前遍歷的元素，預設從左往右依次獲取陣列元素。

  • index： 陣列當前元素的索引，第一個元素索引為0，依次類推。

  • arr： 當前遍歷的陣列。

  • this： 回撥函數中this指向。

let arr = [1, 2, 3, 4];
arr.forEach(function (self, index, arr) {
    console.log(`當前元素為${self}索引為${index},屬於陣列${arr}`);
}, person)
登入後複製

我們可以利用 arr 實現陣列去重：

let arr1 = [1, 2, 1, 3, 1];
let arr2 = [];
arr1.forEach(function (self, index, arr) {
    arr.indexOf(self) === index ? arr2.push(self) : null;
});
console.log(arr2);   // [1,2,3]
登入後複製

forEach 的中斷

在js中有break return continue 對函數進行中斷或跳出迴圈的操作，我們在 for迴圈中會用到一些中斷行為，對於優化陣列遍歷查詢是很好的，但由於forEach屬於迭代器，只能按序依次遍歷完成，所以不支援上述的中斷行為。

let arr = [1, 2, 3, 4],
    i = 0,
    length = arr.length;
for (; i < length; i++) {
    console.log(arr[i]); //1,2
    if (arr[i] === 2) {
        break;
    };
};

arr.forEach((self,index) => {
    console.log(self);
    if (self === 2) {
        break; //報錯
    };
});

arr.forEach((self,index) => {
    console.log(self);
    if (self === 2) {
        continue; //報錯
    };
});
登入後複製

如果我一定要在 forEach 中跳出迴圈呢？其實是有辦法的，藉助try/catch：

try {
    var arr = [1, 2, 3, 4];
    arr.forEach(function (item, index) {
        //跳出條件
        if (item === 3) {
            throw new Error("LoopTerminates");
        }
        //do something
        console.log(item);
    });
} catch (e) {
    if (e.message !== "LoopTerminates") throw e;
};
登入後複製

若遇到 return 並不會報錯，但是不會生效

let arr = [1, 2, 3, 4];

function find(array, num) {
    array.forEach((self, index) => {
        if (self === num) {
            return index;
        };
    });
};
let index = find(arr, 2);// undefined
登入後複製

forEach 刪除自身元素，index不可被重置

在 forEach 中我們無法控制 index 的值，它只會無腦的自增直至大於陣列的 length 跳出迴圈。所以也無法刪除自身進行index重置，先看一個簡單例子：

let arr = [1,2,3,4]
arr.forEach((item, index) => {
    console.log(item); // 1 2 3 4
    index++;
});
登入後複製

index不會隨著函數體內部對它的增減而發生變化。在實際開發中，遍歷陣列同時刪除某項的操作十分常見，在使用forEach刪除時要注意。

for 迴圈可以控制迴圈起點

如上文提到的 forEach 的迴圈起點只能為0不能進行人為干預，而for迴圈不同：

let arr = [1, 2, 3, 4],
    i = 1,
    length = arr.length;

for (; i < length; i++) {
    console.log(arr[i]) // 2 3 4
};
登入後複製

那之前的陣列遍歷並刪除滋生的操作就可以寫成

let arr = [1, 2, 1],
    i = 0,
    length = arr.length;

for (; i < length; i++) {
    // 刪除陣列中所有的1
    if (arr[i] === 1) {
        arr.splice(i, 1);
        //重置i，否則i會跳一位
        i--;
    };
};
console.log(arr); // [2]
//等價於
var arr1 = arr.filter(index => index !== 1);
console.log(arr1) // [2]
登入後複製

for迴圈和forEach的效能區別

在效能對比方面我們加入一個 map 迭代器，它與 filter 一樣都是生成新陣列。

對比 for forEach map 的效能在瀏覽器環境中都是什麼樣的：

效能比較：for > forEach > map 在chrome 62 和 Node.js v9.1.0環境下：for 迴圈比 forEach 快1倍，forEach 比 map 快20%左右。

原因分析for：for迴圈沒有額外的函數呼叫棧和上下文，所以它的實現最為簡單。

forEach：對於forEach來說，它的函數簽名中包含了引數和上下文，所以效能會低於 for 迴圈。

map：map 最慢的原因是因為 map 會返回一個新的陣列，陣列的建立和賦值會導致分配記憶體空間，因此會帶來較大的效能開銷。

如果將map巢狀在一個迴圈中，便會帶來更多不必要的記憶體消耗。

當大家使用迭代器遍歷一個陣列時，如果不需要返回一個新陣列卻使用 map 是違背設計初衷的。

【相關推薦：、】

以上就是es6中for和foreach的區別是什麼的詳細內容，更多請關注TW511.COM其它相關文章！