欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時(shí)間：2024年09月10日 09:25:42   作者：碼農(nóng)研究僧  
Object.entries方法能將對(duì)象的可枚舉屬性轉(zhuǎn)為數(shù)組,每個(gè)元素是鍵值對(duì)數(shù)組,可用于for...of迭代,下面這篇文章主要介紹了Js中的Object.entries()基本知識(shí)的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下

1. 基本知識(shí)

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

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

  • 第一個(gè)元素是屬性名，字符串（或符號(hào)）
  • 第二個(gè)元素是屬性值，任何類型

對(duì)象的屬性默認(rèn)是可枚舉的，意味著它們可以在 for...in 循環(huán)中被枚舉出來(lái)
使用 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]]
  • 處理空對(duì)象：
const emptyObj = {};
const entries = Object.entries(emptyObj);
console.log(entries);
// 輸出: []
  • 與其他方法的比較：Object.keys(obj)： 返回一個(gè)包含對(duì)象所有可枚舉屬性名的數(shù)組
    Object.values(obj)：返回一個(gè)包含對(duì)象所有可枚舉屬性值的數(shù)組
    Object.entries(obj)： 返回一個(gè)包含對(duì)象所有可枚舉屬性的鍵值對(duì)數(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]]
  • 非對(duì)象參數(shù)：如果傳入非對(duì)象參數(shù)（如 null 或 undefined），Object.entries 會(huì)拋出錯(cuò)誤
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：過(guò)濾對(duì)象的屬性

通過(guò) Object.entries 結(jié)合 filter 方法，篩選出滿足特定條件的鍵值對(duì)

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： 對(duì)象屬性值的轉(zhuǎn)換

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

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：嵌套對(duì)象處理

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

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

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

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

使用 reduce 方法結(jié)合 Object.entries 對(duì)對(duì)象進(jìn)行復(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)換對(duì)象為查詢字符串

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)系

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

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

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

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

Object.entries和Object.fromEntries

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

結(jié)果輸出

結(jié)果分析

上述可得，Object.entries和Object.fromEntries兩個(gè)得到的結(jié)果可以相互轉(zhuǎn)換

前者通過(guò)對(duì)象可以得到鍵值對(duì)數(shù)組，后者可以將前者的數(shù)組，轉(zhuǎn)化為對(duì)象

個(gè)人猜測(cè)，可以實(shí)現(xiàn)深拷貝

總結(jié) 

到此這篇關(guān)于Js中的Object.entries()基本知識(shí)詳細(xì)分析的文章就介紹到這了,更多相關(guān)Js中Object.entries()基本知識(shí)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評(píng)論