1.forEach方法

forEach是javaScrip中數(shù)組(Array)的一個內(nèi)置方法，用于遍歷數(shù)組中的每個元素并執(zhí)行回調函數(shù)。

array.forEach(function(currentValue, index, array) {
  // 執(zhí)行的操作
}, thisArg);

參數(shù)說明：

• currentValue：當前處理的數(shù)組元素（必需）

• index：當前元素的索引（可選）

• array：正在操作的數(shù)組本身（可選）

• thisArg：執(zhí)行回調時用作 this 的值（可選）

基本用法示例

const fruits = ['apple', 'banana', 'orange'];

// 簡單遍歷
fruits.forEach(function(fruit) {
  console.log(fruit);
});
// 輸出: apple, banana, orange

// 帶索引的遍歷
fruits.forEach(function(fruit, index) {
  console.log(index + ': ' + fruit);
});
// 輸出: 0: apple, 1: banana, 2: orange

箭頭函數(shù)寫法

fruits.forEach((fruit,index)) =>{
console.log(${index+1}: ${fruit});
}

特點與注意事項

不會改變原數(shù)組（除非在回調中手動修改）

const numbers = [1, 2, 3];
numbers.forEach(num => num * 2); // 原數(shù)組不變
console.log(numbers); // [1, 2, 3]

沒有返回值（返回undefined）

const result = [1, 2, 3].forEach(num => num * 2);
console.log(result); // undefined

無法中途跳出循環(huán)（不能使用break或return）

// 這樣不會停止循環(huán)
[1, 2, 3].forEach(num => {
  if (num === 2) return; // 只是跳過當前迭代
  console.log(num);
});

會跳過空位

[1, , 3].forEach(num => console.log(num)); // 輸出: 1, 3

適用場景

• 需要對數(shù)組每個元素執(zhí)行相同操作

• 不需要中途退出循環(huán)

• 代碼可讀性優(yōu)先于性能

不適用場景

• 需要根據(jù)條件提前終止循環(huán)（改用 for 或 some/every）

• 需要返回新數(shù)組（改用 map）

• 需要過濾數(shù)組（改用 filter）

2.map--數(shù)組映射轉換

map是JavaScript 數(shù)組的高階函數(shù)，用于處理數(shù)組并返回新數(shù)組。而我們的forEach不會返回新數(shù)組。map（）方法會創(chuàng)建一個新數(shù)組，其結果是原數(shù)組的每個元素調用一次提供的函數(shù)返回值。

const newArray = arr.map(function(currentValue, index, array) {
  // 返回處理后的元素
}, thisArg);

特點

• 返回新數(shù)組（不修改原數(shù)組）

• 新數(shù)組長度與原數(shù)組相同

• 用于數(shù)據(jù)轉換/格式化

const numbers = [1, 2, 3];

// 所有元素乘以2
const doubled = numbers.map(num => num * 2);
console.log(doubled); // [2, 4, 6]

// 轉換為對象數(shù)組
const objects = numbers.map(num => ({ value: num }));
console.log(objects); // [{value: 1}, {value: 2}, {value: 3}]

實際應用場景

• API數(shù)據(jù)格式化

• 渲染列表前的數(shù)據(jù)準備

• 數(shù)值計算轉換

3.filter---數(shù)組過濾

基本概念：filter()方法會創(chuàng)建一個新數(shù)組，包含通過所提供的函數(shù)測試的所有元素。

const newArray = arr.filter(function(currentValue, index, array) {
  // 返回true保留元素，false過濾元素
}, thisArg);

何時選擇

特點

• 返回新數(shù)組（不修改原數(shù)組）

• 新數(shù)組長度 ≤ 原數(shù)組長度

• 用于數(shù)據(jù)篩選

const numbers = [1, 2, 3, 4, 5];

// 過濾偶數(shù)
const evens = numbers.filter(num => num % 2 === 0);
console.log(evens); // [2, 4]

// 過濾長度大于3的字符串
const words = ['apple', 'banana', 'pear'];
const longWords = words.filter(word => word.length > 4);
console.log(longWords); // ['banana']

實際應用場景

• 搜索/篩選功能

• 數(shù)據(jù)清理（去除無效數(shù)據(jù)）

• 權限過濾

• 

注意事項

• 不修改原數(shù)組：兩者都返回新數(shù)組，不影響原數(shù)組

• 性能考慮：大數(shù)據(jù)量時，鏈式調用多個方法可能影響性能

• 需要轉換數(shù)據(jù)格式 → 用 map

• 需要篩選數(shù)據(jù)子集 → 用 filter

• 需要先篩選再轉換 → 鏈式調用 filter().map()

• 空位處理：map會保留空位，filter會跳過空位

• 異步問題：回調函數(shù)中使用異步代碼需要特別處理

4.for...of循環(huán)

• 基本概念：for...of 是 ES6 引入的循環(huán)語法，用于遍歷可迭代對象（如 Array、String、Map、Set 等）

for (const element of iterable) {
  // 執(zhí)行操作
}

特點

• 可遍歷任何可迭代對象（實現(xiàn)了 [Symbol.iterator] 方法的對象）

• 可以直接獲取元素值（不需要通過索引）

• 可以使用 break 和 continue 控制循環(huán)

• 不提供索引（需要索引時可結合 entries()）

const fruits = ['apple', 'banana', 'orange'];

// 基本用法
for (const fruit of fruits) {
  console.log(fruit);
}

// 帶索引的遍歷
for (const [index, fruit] of fruits.entries()) {
  console.log(index, fruit);
}

// 可提前終止
for (const fruit of fruits) {
  if (fruit === 'banana') break;
  console.log(fruit); // 只輸出 'apple'
}

與forEach的區(qū)別

• for...of 可以使用 break/continue

• for...of 可以遍歷任何可迭代對象，而 forEach 只是數(shù)組方法

• for...of 性能通常比 forEach 更好

5.some方法

基本概念：some()測試數(shù)組中是否至少有一個元素通過了提供的函數(shù)測試。

array.some(function(currentValue, index, array) {
  // 返回布爾值
}, thisArg);

特點

• 返回布爾值（true/false）

• 遇到第一個返回 true 的元素就停止遍歷

• 空數(shù)組調用始終返回 false

• 不修改原數(shù)組

const numbers = [1, 2, 3, 4, 5];

// 檢查是否有偶數(shù)
const hasEven = numbers.some(num => num % 2 === 0);
console.log(hasEven); // true

// 檢查是否有大于10的數(shù)
const hasLargeNumber = numbers.some(num => num > 10);
console.log(hasLargeNumber); // false

實際應用

• 權限檢查（是否有某項權限）

• 表單驗證（是否有無效字段）

• 搜索（是否存在匹配項）

6.every方法

基本概念：every()測試數(shù)組中的所有元素是否都通過了提供的函數(shù)測試。

array.every(function(currentValue, index, array) {
  // 返回布爾值
}, thisArg);

特點

• 返回布爾值（true/false）

• 遇到第一個返回 false 的元素就停止遍歷

• 空數(shù)組調用始終返回 true（空真規(guī)則）

• 不修改原數(shù)組

const numbers = [2, 4, 6, 8, 10];

// 檢查是否都是偶數(shù)
const allEven = numbers.every(num => num % 2 === 0);
console.log(allEven); // true

// 檢查是否都小于5
const allSmall = numbers.every(num => num < 5);
console.log(allSmall); // false (6不小于5)

實際應用

• 表單驗證（所有字段是否有效）

• 權限檢查（是否具備所有權限）

• 數(shù)據(jù)完整性檢查

• 

JavaScript 數(shù)組遍歷方法對比表

詳細對比說明

1. 返回值差異

• 無返回值：forEach, for...of

• 返回新數(shù)組：map, filter

• 返回布爾值：some, every

2. 循環(huán)控制能力

• 可完全中斷：for...of (使用break), some/every (短路特性)

• 不可中斷：forEach, map, filter

3. 空數(shù)組處理

• 特殊返回：

  • some([]) → false

  • every([]) → true (空真規(guī)則)

• 跳過不執(zhí)行：forEach, for...of

• 返回空數(shù)組：map([]), filter([])

4. 性能考量

• 最快：some/every (可能提前結束)

• 較快：for...of (原生循環(huán))

• 中等：forEach, filter

• 稍慢：map (必須處理所有元素)

5. 典型使用場景

• 數(shù)據(jù)轉換 → map

• 數(shù)據(jù)篩選 → filter

• 簡單遍歷 → forEach 或 for...of

• 存在性檢查 → some

• 全體性檢查 → every

• 需要流程控制 → for...of

選擇建議

1. 需要 轉換數(shù)組結構 → map

2. 需要 過濾數(shù)據(jù) → filter

3. 需要 檢查是否至少一個元素滿足條件 → some

4. 需要 檢查所有元素是否滿足條件 → every

5. 需要 靈活控制循環(huán)過程 → for...of

6. 只需要 簡單遍歷執(zhí)行操作 → forEach

總結 

到此這篇關于JavaScript中各種對象遍歷方法總結的文章就介紹到這了,更多相關JS各種對象遍歷內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！