深入理解 Object.fromEntries() 和 Object.entries()
JavaScript 中的 Object.entries() 和 Object.fromEntries() 是處理物件和陣列之間轉換的強大工具。這兩個方法在數據處理、序列化和反序列化時非常有用。可以簡單理解為Object.entries與Object.fromEntries是互逆的操作。這兩個方法不僅提高了程式碼的可讀性，還簡化了資料的操作。以下是對這兩個方法的詳細介紹和常見使用場景。
1. Object.entries()
Object.entries() 方法返回一個給定物件自身可列舉屬性的鍵值對陣列。
語法:
Object.entries(obj);
示例:
const obj = { a: 1, b: 2, c: 3 };
const entries = Object.entries(obj);
console.log(entries);
// 輸出: [ ['a', 1], ['b', 2], ['c', 3] ]
使用場景:
遍歷物件屬性: 可以與陣列方法結合使用，例如
map和forEach。資料轉換: 將物件轉換為陣列，便於操作和處理。
示例:
const obj = { x: 10, y: 20 };
const updatedEntries = Object.entries(obj).map(([key, value]) => [key, value * 2]);
console.log(Object.fromEntries(updatedEntries));
// 輸出: { x: 20, y: 40 }
2. Object.fromEntries()
Object.fromEntries() 方法將鍵值對陣列轉換為物件。
語法:
Object.fromEntries(iterable);
示例:
const entries = [['x', 1], ['y', 2]];
const obj = Object.fromEntries(entries);
console.log(obj);
// 輸出: { x: 1, y: 2 }
使用場景:
反序列化資料: 將從外部資料來源（如 API）獲得的陣列形式的鍵值對轉換為物件。
物件重建: 根據某些規則重建物件。
示例:
const kvArray = [['name', 'Alice'], ['age', 25]];
const user = Object.fromEntries(kvArray);
console.log(user);
// 輸出: { name: 'Alice', age: 25 }
結合使用示例
1. 組合使用，方便地對物件進行轉換和修改。
const original = { a: 1, b: 2, c: 3 };
// 使用 Object.entries() 進行轉換和修改
const modified = Object.fromEntries(
Object.entries(original).map(([key, value]) => [key, value + 1])
);
console.log(modified);
// 輸出: { a: 2, b: 3, c: 4 }
2. 配合 filter() 方法來過濾物件的屬性。這種組合非常靈活，可以基於條件篩選出需要的鍵值對。
//假設我們有一個物件，包含一些使用者的資訊，我們希望只保留年齡大於 18 的使用者。
const users = {
user1: { name: 'Alice', age: 25 },
user2: { name: 'Bob', age: 17 },
user3: { name: 'Charlie', age: 30 },
};
// 過濾年齡大於18的使用者
const filteredUsers = Object.fromEntries(
Object.entries(users).filter(([key, value]) => value.age > 18)
);
console.log(filteredUsers);
程式碼解析
總結
Object.entries()是將物件轉換為鍵值對陣列，適合遍歷和處理。Object.fromEntries()是將鍵值對陣列轉換為物件，適合反序列化和重建物件。
這兩個方法在日常開發中非常實用，可以幫助開發者更方便地操作和處理物件資料。你對某個特定的使用場景感興趣嗎？
