JavaScript數組轉對象詳解

一、基本概念

JavaScript中的數組是一種特殊對象，其擁有一些特殊的屬性和方法，可以通過下標訪問數組元素，也可以使用循環語句對數組進行遍歷，是一種常用的數據結構，而對象則更加靈活，通過屬性名稱進行訪問和修改值。

在一些場景中，需要將數組轉換成對象來更好地處理數據，這時候就需要使用到 JavaScript 中的數組轉對象功能。

二、數組轉對象的兩種方式

1. 使用 reduce 方法

reduce 方法是一種高階函數，它接受一個`操作函數`和一個可選的初始值作為參數，該操作函數負責對數組的每一個元素執行一次操作，並返回一個最終結果。在實現數組轉對象時，該方法尤為方便。

const arr = [['name', 'Tom'], ['age', 18], ['gender', 'male']]; 
const obj = arr.reduce((prev, [key, value]) => {
  prev[key] = value; 
  return prev; 
}, {}); 
console.log(obj) // {name: "Tom", age: 18, gender: "male"}

2. 使用 Object.formEntries 方法

Object.fromEntries 方法可以接受一個鍵值對列表作為參數，並返回一個新的對象。當需要將一個二維數組轉成鍵值對時，非常適合使用這個方法進行轉換。

const arr = [['name', 'Tom'], ['age', 18], ['gender', 'male']]; 
const obj = Object.fromEntries(arr); 
console.log(obj) // {name: "Tom", age: 18, gender: "male"}

三、數組轉對象的一些注意事項

1. 重複鍵值的處理

由於對象中不能存在兩個重複的鍵，如果在數組中存在相同的鍵值對，則後面的鍵值對會覆蓋前面的。

const arr = [['name', 'Tom'], ['age', 18], ['gender', 'male'], ['name', 'Jerry']]; 
const obj = arr.reduce((prev, [key, value]) => {
  prev[key] = value; 
  return prev; 
}, {}); 
console.log(obj); // {name: "Jerry", age: 18, gender: "male"}

2. 轉換後對象的屬性順序

在 JavaScript 中，對象的屬性順序並不是按照添加順序排列的，而是按照內部哈希表的順序排列的。因此，在數組轉換為對象後，對象的屬性順序並不一定與數組中的順序相同。

const arr = [['name', 'Tom'], ['age', 18], ['gender', 'male']]; 
const obj = Object.fromEntries(arr); 
console.log(obj); // {age: 18, gender: "male", name: "Tom"}

3. 對象屬性名的格式化

在將數組轉換成對象時，往往需要對對象的屬性名進行格式化和處理，這樣可以更好地滿足業務需求。

const arr = [['name', 'Tom'], ['age', 18], ['gender', 'male']]; 
const obj = arr.reduce((prev, [key, value]) => {
  prev[key.toLowerCase()] = value; // 對屬性名進行小寫處理
  return prev; 
}, {}); 
console.log(obj); // {name: "Tom", age: 18, gender: "male"}

四、小結

數組轉對象是 JavaScript 中常用的一種數據結構轉換方式，可以使用 reduce 方法和 Object.fromEntries 方法進行轉換，需要注意重複鍵值的處理、轉換後對象的屬性順序和對象屬性名的格式化等問題。