Object.keys()、Object.values()、Object.entries()用法總結

2023-04-08 06:00:18

一、返回一個陣列，成員是引數物件自身的（不含繼承的）所有可遍歷屬性的鍵值
二、返回陣列的成員順序，與屬性的遍歷部分介紹的排列規則一致
三、Object.values()只會遍歷物件自身的可遍歷屬性
四、Object.values會過濾屬性名為 Symbol 值的屬性
五、如果引數不是物件，Object.values會先將其轉為物件

Object.entries()

一、Object.entries方法返回一個陣列，成員是引數物件自身的（不含繼承的）所有可遍歷（enumerable）屬性的鍵值對陣列
二、如果原物件的屬性名是一個 Symbol 值，該屬性會被省略
三、遍歷物件的屬性
四、將物件轉為真正的Map結構
五、實現Object.entries方法

Object.keys()

一、官方解釋

Object.keys() 方法會返回一個由一個給定物件的自身可列舉屬性組成的陣列，陣列中屬性名的排列順序和使用 for...in 迴圈遍歷該物件時返回的順序一致。如果物件的鍵-值都不可列舉，那麼將返回由鍵組成的陣列。

二、語法

Object.keys(obj)
引數：要返回其列舉自身屬性的物件
返回值：一個表示給定物件的所有可列舉屬性的字串陣列

三、處理物件，返回可列舉的屬性陣列

            let person={
                name:'一隻流浪的kk',
                age:20,
                eat:function(){}
            }
            console.log(Object.keys(person));//    ['name','age','eat']

四、處理陣列，返回索引值陣列

 let arr=[1,2,3,4,5];
 console.log(Object.keys(arr));//['0','1','2','3','4','5']

五、處理字串，返回索引值陣列

let str='hello';
console.log(Object.keys(str));//['0','1','2','3','4']

六、實用技巧

 let person={
                   name:'一隻流浪的kk',
                   age:18,
                   eat:function(){
                       
                   }
           }
           Object.keys(person).map((key)=>{
                   person[key];//獲得屬性對應的值，可以進行其它處理
           })

Object.values()

一、返回一個陣列，成員是引數物件自身的（不含繼承的）所有可遍歷屬性的鍵值

let obj = {
    foo : "bar",
    baz : 20
};
console.log(Object.values(obj));  // ["bar", 20]

二、返回陣列的成員順序，與屬性的遍歷部分介紹的排列規則一致

const obj = {100 : "a", 2 : "b", 7 : "c"};
console.log(Object.values(obj));   //["b", "c", "a"]

三、Object.values()只會遍歷物件自身的可遍歷屬性

const obj = Object.create({},{p : {value : 10}});
console.log(Object.values(obj));    
console.log(Object.getOwnPropertyDescriptors(obj)); // []

Object.create方法的第二個引數新增的物件屬性（屬性p），如果不顯式宣告，預設是不可遍歷的，因為p的屬性描述物件的enumerable預設是false，Object.values不會返回這個屬性。
因此只要把enumerable改成true，Object.values就會返回屬性p的值。

const obj = Object.create({},{p:{
     value : 10,
     enumerable : true,
     configurable : true,
     writable : true,
}})
console.log(Object.values(obj));    //[10]

四、Object.values會過濾屬性名為 Symbol 值的屬性

//如果Object.values方法的引數是一個字串，會返回各個字元組成的一個陣列。
Object.values({ [Symbol()]: 123, foo: 'abc' });
console.log(Object.values('foo'));  //["f", "o", "o"]

五、如果引數不是物件，Object.values會先將其轉為物件

console.log(Object.values(42));  // []
console.log(Object.values(true));  // []
console.log(Object.values(undefined));   //error
console.log(Object.values(null));   //error

Object.entries()

一、Object.entries方法返回一個陣列，成員是引數物件自身的（不含繼承的）所有可遍歷（enumerable）屬性的鍵值對陣列

var obj = { foo: 'bar', baz: 42 };
console.log(Object.entries(obj));

二、如果原物件的屬性名是一個 Symbol 值，該屬性會被省略

console.log(Object.entries({ [Symbol()]: 123, foo: 'abc' }));  // [ [ 'foo', 'abc' ] ]

三、遍歷物件的屬性

let obj = {
    one : 1,
    two : 2,
}
for(let [k , v] of Object.entries(obj)){
     console.log(`${JSON.stringify(k)} : ${JSON.stringify(v)}`);
}

四、將物件轉為真正的Map結構

const obj = {foo : "bar", baz : 10};
const map = new Map(Object.entries(obj));
console.log(map);

五、實現Object.entries方法

const entries = (obj) => {
     let result = [];
     const objType = typeof(obj);
     if(obj === undefined || obj === null){
          throw new TypeError();
     }
     if(objType === "number" || objType === "boolean"){
         return [];
     }
     for(let k of Object.keys(obj)){
         result.push([k,obj[k]]);
     }
     return result
}

到此這篇關於Object.keys()、Object.values()、Object.entries()用法總結的文章就介紹到這了,更多相關Object.keys() Object.values() Object.entries()內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com！