Object.fromEntries和Object.entries的使用-js教程詳情 - 數組,鍵值對,字符串,Html,CSS,前端開發 mob64ca1418736f 博客

`Object.entries()` 和 `Object.fromEntries()` 允許在對象和數組之間轉換，方便與 `Map` 進行交互。

Object.entries：傳入一個對象，返回該對象的鍵值對的數組，即每個鍵和對應的值，轉化為一個數組，以此類推，最後這些數組再被放到一個新數組中
Object.fromEntries：傳入一個數組，或者傳入一個Map，數組最好是和Object.entries生成的數組結構一致，根據傳入的返回一個對象
Map：ES6新增的數據結構，能夠進行迭代，使用...展開運算符可將Map類型轉化為Object.entries生成的數組對象，將Map傳入Object.fromEntries能得到一個對象

Object.entries()

該方法返回一個由對象自身可枚舉屬性的鍵值對組成的二維數組，每個子數組形式為 [key, value]，順序與 for...in 循環一致，但不會遍歷原型鏈上的屬性。

若輸入是數組，鍵會被轉換為字符串索引（如 ['0', 1]）。
若輸入是字符串，會按字符索引生成鍵值對。
數字或 Symbol 類型的鍵會被強制轉為字符串。

基本的用法如下：

const obj = { a: 1, b: 2, c: 3 };
const entries = Object.entries(obj);
console.log(entries);
// 輸出: [['a', 1], ['b', 2], ['c', 3]]

處理空對象：

const emptyObj = {};
const entries = Object.entries(emptyObj);
console.log(entries);
// 輸出: []

非對象參數：

如果傳入非對象參數（如 null 或 undefined），Object.entries 會拋出錯誤

try {
    console.log(Object.entries(null));
} catch (e) {
    console.error(e);
    // 輸出: TypeError: Cannot convert undefined or null to object
}

使用 for…of 迭代：

Object.entries 返回的數組可以使用 for...of 迭代

const obj = { x: 10, y: 20, z: 30 };

for (const [key, value] of Object.entries(obj)) {
    console.log(`${key}: ${value}`);
}
// 輸出:
// x: 10
// y: 20
// z: 30

應用場景

1. 通過 filter 過濾無效屬性

通過 Object.entries 結合 filter 方法，篩選出滿足特定條件的鍵值對

const obj = { a: 1, b: 2, c: 3, d: 4 };

const filteredEntries = Object.entries(obj).filter(([key, value]) => value > 2);
console.log(filteredEntries);
// 輸出: [['c', 3], ['d', 4]]

2. 對象屬性值的轉換

使用 map 方法對對象屬性值進行轉換，然後重新構建對象

const obj = { name: 'Alice', age: 25 };

const transformedEntries = Object.entries(obj).map(([key, value]) => {
    return [key, typeof value === 'string' ? value.toUpperCase() : value];
});

const newObj = Object.fromEntries(transformedEntries);
console.log(newObj);
// 輸出: { name: 'ALICE', age: 25 }

3. 嵌套對象處理

const nestedObj = {
    user: {
        name: 'Bob',
        age: 30
    },
    location: {
        city: 'New York',
        country: 'USA'
    }
};

const nestedEntries = Object.entries(nestedObj).flatMap(([key, value]) =>
    Object.entries(value).map(([subKey, subValue]) => [`${key}.${subKey}`, subValue])
);

console.log(nestedEntries);
// 輸出: [['user.name', 'Bob'], ['user.age', 30], ['location.city', 'New York'], ['location.country', 'USA']]

4. 結合其他方法進行數據處理

使用 reduce 方法結合 Object.entries 對對象進行復雜的數據處理

const obj = { apple: 10, banana: 20, cherry: 30 };

const total = Object.entries(obj).reduce((sum, [key, value]) => sum + value, 0);
console.log(total);
// 輸出: 60

4. 與 URLSearchParams 結合生成URL參數

`Object.entries` 和 `URLSearchParams` 可以結合使用來生成 URL 參數。以下是一個示例：

const paramsObject = {
  name: 'John Doe',
  age: 30,
  city: 'New York'
};
// 使用 Object.entries 將對象轉換為鍵值對數組
const paramsArray = Object.entries(paramsObject);
// 使用 URLSearchParams 將鍵值對數組轉換為 URL 參數
const urlParams = new URLSearchParams(paramsArray);
// 獲取生成的 URL 參數字符串
const queryString = urlParams.toString();
console.log(queryString); // 輸出: "name=John%20Doe&age=30&city=New%20York"

5.將對象轉換為Map類型

`Object.entries()` 方法可以將對象的鍵值對轉換為數組形式，然後可以利用 `Map` 構造函數將其轉換為 `Map` 對象。以下是一個示例：

const obj = {
  a: 1,
  b: 2,
  c: 3
};
// 使用 Object.entries() 轉換對象為數組
const entries = Object.entries(obj);
console.log(entries); // [['a', 1], ['b', 2], ['c', 3]]
// 將數組轉換為 Map
const map = new Map(entries);
console.log(map); // Map(3) { 'a' => 1, 'b' => 2, 'c' => 3 }
// 訪問 Map 中的值
console.log(map.get('b')); // 2

在這個例子中，`Object.entries(obj)` 將對象轉換為一個包含鍵值對的數組，然後通過 `new Map(entries)` 創建了一個 `Map` 對象。