遍歷陣列和物件的方法都有哪些？

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

在前端開發中，遍歷陣列和物件的方法有很多，以下是常用的幾種，並分別針對陣列和物件進行說明：

陣列遍歷:

  • for 迴圈: 最基本的迴圈方式，可以完全控制迴圈的起始、結束和步長。
const arr = [1, 2, 3, 4, 5];

for (let i = 0; i < arr.length; i++) {
  console.log(arr[i]);
}
  • for...in 迴圈: 遍歷陣列的索引（鍵名）。 不推薦用於陣列遍歷, 因為：
    • 遍歷順序不保證與陣列索引順序一致。
    • 會遍歷到繼承的屬性。
    • 效率低於 for 迴圈和 for...of 迴圈。
const arr = [1, 2, 3, 4, 5];

for (const index in arr) {
  console.log(index, arr[index]); // index 是字串型別的索引
}
  • for...of 迴圈: ES6 引入，遍歷陣列的元素值。推薦用於遍歷陣列。
const arr = [1, 2, 3, 4, 5];

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

arr.forEach((value, index) => {
  console.log(index, value);
});
  • map() 方法: 遍歷陣列的每個元素，並對每個元素執行回撥函式，返回一個新陣列，新陣列包含回撥函式的返回值。 常用於對陣列元素進行轉換。
const arr = [1, 2, 3, 4, 5];

const doubled = arr.map(value => value * 2);
console.log(doubled); // [2, 4, 6, 8, 10]

物件遍歷:

  • for...in 迴圈: 遍歷物件的鍵名（屬性名）。 這是遍歷物件屬性的常用方法。
const obj = { a: 1, b: 2, c: 3 };

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

const keys = Object.keys(obj);
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);
console.log(values); // [1, 2, 3]
  • Object.entries(): 返回一個包含物件自身所有可列舉屬性的鍵值對陣列。
const obj = { a: 1, b: 2, c: 3 };

const entries = Object.entries(obj);
console.log(entries); // [["a", 1], ["b", 2], ["c", 3]]

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

選擇哪種方法取決於你的具體需求。 對於陣列，for...of 和 forEach 通常是首選。 對於物件，for...in、Object.keys()、Object.values() 和 Object.entries() 提供了不同的遍歷方式，可以根據需要選擇。

希望以上資訊對您有所幫助!

相關文章