快捷導(dǎo)航

Js中的Object.entries()基本知識詳細分析(附Demo)

更新時間：2024年09月10日 09:25:42 作者：碼農(nóng)研究僧

Object.entries方法能將對象的可枚舉屬性轉(zhuǎn)為數(shù)組,每個元素是鍵值對數(shù)組,可用于for...of迭代,下面這篇文章主要介紹了Js中的Object.entries()基本知識的相關(guān)資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下

1. 基本知識

用于將對象的可枚舉屬性轉(zhuǎn)換為一個數(shù)組

該數(shù)組包含對象自身的可枚舉屬性的鍵值對數(shù)組，每個鍵值對數(shù)組由兩個元素組成：

第一個元素是屬性名，字符串（或符號）
第二個元素是屬性值，任何類型

對象的屬性默認是可枚舉的，意味著它們可以在 for...in 循環(huán)中被枚舉出來
使用 Object.defineProperty 方法可以設(shè)置或修改屬性的可枚舉性

基本的用法如下：

基本用法：

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);
// 輸出: []

與其他方法的比較：Object.keys(obj)：返回一個包含對象所有可枚舉屬性名的數(shù)組
Object.values(obj)：返回一個包含對象所有可枚舉屬性值的數(shù)組
Object.entries(obj)：返回一個包含對象所有可枚舉屬性的鍵值對數(shù)組

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

console.log(Object.keys(obj));
// 輸出: ['a', 'b', 'c']

console.log(Object.values(obj));
// 輸出: [1, 2, 3]

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

非對象參數(shù)：如果傳入非對象參數(shù)（如 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 返回的數(shù)組可以使用 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

2. Demo

示例 1：過濾對象的屬性

通過 Object.entries 結(jié)合 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：對象屬性值的轉(zhuǎn)換

使用 map 方法對對象屬性值進行轉(zhuǎn)換，然后重新構(gòu)建對象

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：動態(tài)構(gòu)建對象

const entries = [['a', 1], ['b', 2], ['c', 3]];

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

示例 5：結(jié)合其他方法進行數(shù)據(jù)處理

使用 reduce 方法結(jié)合 Object.entries 對對象進行復(fù)雜的數(shù)據(jù)處理

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

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

示例 6：轉(zhuǎn)換對象為查詢字符串

const params = { name: 'Alice', age: 25, city: 'Wonderland' };

const queryString = Object.entries(params)
    .map(([key, value]) => `${encodeURIComponent(key)}=${encodeURIComponent(value)}`)
    .join('&');

console.log(queryString);
// 輸出: 'name=Alice&age=25&city=Wonderland'

附：Object.entries()、Object.fromEntries()、ES6的Map三者之間的關(guān)系

簡要說明一下，三者的作用，后續(xù)依次通過代碼詳細具體演示三者之間存在的聯(lián)系

Object.entries 傳入一個對象，返回該對象的鍵值對的數(shù)組，即每個鍵和對應(yīng)的值，轉(zhuǎn)化為一個數(shù)組，以此類推，最后這些數(shù)組再被放到一個新數(shù)組中

Object.fromEntries 傳入一個數(shù)組，或者傳入一個Map，數(shù)組最好是和Object.entries生成的數(shù)組結(jié)構(gòu)一致，根據(jù)傳入的返回一個對象

Map ES6新增的數(shù)據(jù)結(jié)構(gòu)，能夠進行迭代，使用...展開運算符可將Map類型轉(zhuǎn)化為Object.entries生成的數(shù)組對象，將Map傳入Object.fromEntries能得到一個對象

Object.entries和Object.fromEntries

const person = {
            name: '王二',
            age: 18,
            sex: '男',
            say() {
                console.log('說話');
            }
        }
 
        const obj1 = Object.entries(person)//返回對象的鍵值對數(shù)組
        const obj2 = Object.fromEntries(obj1);//通過上述的鍵值對數(shù)組，返回對應(yīng)的對象
        console.log(obj1);
        console.log(obj2);

結(jié)果輸出