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