舉例說明陣列和物件的迭代方法分別有哪些？

王铁柱6發表於2024-11-23
陣列物件

在前端開發中，陣列和物件都有多種迭代方法，各有優缺點，適用於不同的場景。以下是一些常見的例子：

陣列迭代:

  • for 迴圈: 最基本的迭代方式，可以完全控制迭代過程，包括索引訪問和提前終止。
const arr = [1, 2, 3, 4, 5];

for (let i = 0; i < arr.length; i++) {
  console.log(arr[i]); // 訪問元素和索引
  if (arr[i] > 3) break; // 可以根據條件終止迴圈
}
  • for...in 迴圈: 迭代陣列的索引（鍵名）。雖然可以用於陣列，但不推薦，因為它迭代的是字串型別的索引，並且會遍歷原型鏈上的屬性。
const arr = [1, 2, 3];

for (const index in arr) {
  console.log(index); // "0", "1", "2" (字串型別)
  console.log(arr[index]); // 1, 2, 3
}
  • for...of 迴圈: ES6 引入，迭代陣列的元素值。簡潔易讀，推薦使用。
const arr = [1, 2, 3];

for (const value of arr) {
  console.log(value); // 1, 2, 3
}
  • forEach() 方法: 對陣列的每個元素執行提供的回撥函式。
const arr = [1, 2, 3];

arr.forEach((value, index) => {
  console.log(index, value); // 可以訪問索引和值
});
  • map() 方法: 建立一個新陣列，其結果是該陣列中的每個元素都呼叫一個提供的函式後返回的結果。
const arr = [1, 2, 3];
const doubled = arr.map(value => value * 2);
console.log(doubled); // [2, 4, 6]
  • filter() 方法: 建立一個新陣列, 其包含透過所提供函式實現的測試的所有元素。
const arr = [1, 2, 3, 4, 5];
const even = arr.filter(value => value % 2 === 0);
console.log(even); // [2, 4]

物件迭代:

  • for...in 迴圈: 迭代物件的鍵名（屬性名）。
const obj = { a: 1, b: 2, c: 3 };

for (const key in obj) {
  console.log(key); // "a", "b", "c"
  console.log(obj[key]); // 1, 2, 3
}
  • Object.keys(): 返回一個包含物件自身可列舉屬性名的陣列。可以結合 for...of 或其他陣列迭代方法使用。
const obj = { a: 1, b: 2, c: 3 };
const keys = Object.keys(obj); // ["a", "b", "c"]

for (const key of keys) {
  console.log(key, obj[key]);
}
  • Object.values(): 返回一個包含物件自身可列舉屬性值的陣列。
const obj = { a: 1, b: 2, c: 3 };
const values = Object.values(obj); // [1, 2, 3]

for (const value of values) {
  console.log(value);
}
  • Object.entries(): 返回一個包含物件自身可列舉屬性的鍵值對陣列。
const obj = { a: 1, b: 2, c: 3 };
const entries = Object.entries(obj); // [["a", 1], ["b", 2], ["c", 3]]

for (const [key, value] of entries) {
  console.log(key, value);
}

選擇哪種迭代方法取決於你的具體需求。例如，需要訪問索引時使用 for 迴圈或 forEach()；需要建立新陣列時使用 map() 或 filter()；迭代物件屬性時使用 for...in、Object.keys()、Object.values() 或 Object.entries()。 `for

相關文章