|
|
|
|
|
|
JavaScript中for與forEach循環的三個區別【示例】
作者:admin 時間:2022-7-4 17:54:28 瀏覽:當你要迭代一個數組元素時，你或許出于習慣首先想到的是用for循環語句，其代碼也相當簡單，我們可看看以下示例：
var array = ['小明', '小杰', '小強', '小美']
for (var i = 0; i < array.length; i++) {
const item = array[i];
console.log(i, item);
}
現在，你有更多更簡單的寫法來實現這一結果，forEach語句就是其中之一。
相同的結果，使用 forEach 后更容易被閱讀、理解。
array.forEach(function(item, i) {
console.log(i, item)
});不過實際上這兩者還是略有差異，本篇就來介紹for與forEach循環的那些小差別。
for循環可能會產生全域變數
因為JS 作用域是屬于函數作用域，而for循環在執行時使用 var 所建立的變量是屬于在區塊 {} 內，因此for循環運行時所定義的變量常常會是建立在全域的環境下。
以下范例來說，下列變量 i 就屬于全域的變量。
for (var i = 0; i < array.length; i++) {
const item = array[i];
console.log(i, item);
}
console.log(i); // 4相對來說 forEach 使用回調函數就不容易踩到這個雷，不過for循環依然可以使用ES6 的 let, const 來解決作用域的問題。
有關回調函數的文章：
有關let、const的文章：
目前主流的文字編輯器，輸入 for 后預設都會使用 let 來定義索引 i 的變量。
for (let i = 0; i < array.length; i++) {
const item = array[i];
console.log(i, item);
}
console.log(i) // 無法取得 ifor 可以被中斷
雖然for循環目前的使用率較不如forEach，不過它可中斷運行的方式在 forEach 中是沒有的，如果循環中有必要停止運行，就可以使用for循環搭配break。
for (let i = 0; i < array.length; i++) {
const item = array[i];
if (i === 2) { // 執行到索引 2 就會被中斷
break;
}
console.log(i, item);
}執行到索引 2 就會被中斷，中斷后的循環將不會繼續運行。
并非所有數組都能使用forEach
JavaScript 中的數組依據原型的不同，也有另一種分支稱為類數組（array-like），類數組中的原型方法與一般定義的數組就有所不同，其中的方法就可能不包含forEach。
函數中的 arguments 就屬于類數組，它的方法就不包含 forEach 的方法，因此它無法直接運行forEach。
function fn() {
console.log(arguments);
// for 循環可以正常運行
for (let i = 0; i < arguments.length; i++) {
const item = arguments[i];
console.log(i, item);
}
// 錯誤：Uncaught TypeError: arguments.forEach is not a function
arguments.forEach(item => {
console.log(item);
});
}
fn('小明', '小杰', '小強, '小美');類數組可以直接使用for循環來運行它，如果要使用 forEach 的數組方法也是可行，只要將類數組透過ES6 的“展開” 語法轉換為純數組即可（[...]）。
如以下代碼中就透過展開將 arguments 轉變為純數組arg，那么 arg 變量就可以使用 forEach 的陣列方法。
function fn() {
const arg = [...arguments];
arg.forEach(item => console.log(item))
}
fn('小明', '小杰', '小強', '小美');總結
本文通過示例，介紹了JavaScript中for與foreach循環的差異，我們在使用中需要了解兩者的不同，從而選用更加合適的語句。
相關文章
