Object.keys()、Object.values()、Object.entries()用法總結(jié)
Object.keys()
一、官方解釋
Object.keys() 方法會返回一個由一個給定對象的自身可枚舉屬性組成的數(shù)組,數(shù)組中屬性名的排列順序和使用 for...in 循環(huán)遍歷該對象時返回的順序一致 。如果對象的鍵-值都不可枚舉,那么將返回由鍵組成的數(shù)組。
二、語法
Object.keys(obj)
參數(shù):要返回其枚舉自身屬性的對象
返回值:一個表示給定對象的所有可枚舉屬性的字符串?dāng)?shù)組
三、處理對象,返回可枚舉的屬性數(shù)組
let person={ name:'一只流浪的kk', age:20, eat:function(){} } console.log(Object.keys(person));// ['name','age','eat']
四、處理數(shù)組,返回索引值數(shù)組
let arr=[1,2,3,4,5]; console.log(Object.keys(arr));//['0','1','2','3','4','5']
五、處理字符串,返回索引值數(shù)組
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];//獲得屬性對應(yīng)的值,可以進(jìn)行其它處理 })
Object.values()
一、返回一個數(shù)組,成員是參數(shù)對象自身的(不含繼承的)所有可遍歷屬性的鍵值
let obj = { foo : "bar", baz : 20 }; console.log(Object.values(obj)); // ["bar", 20]
二、返回數(shù)組的成員順序,與屬性的遍歷部分介紹的排列規(guī)則一致
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方法的第二個參數(shù)添加的對象屬性(屬性p),如果不顯式聲明,默認(rèn)是不可遍歷的,因為p的屬性描述對象的enumerable默認(rèn)是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方法的參數(shù)是一個字符串,會返回各個字符組成的一個數(shù)組。 Object.values({ [Symbol()]: 123, foo: 'abc' }); console.log(Object.values('foo')); //["f", "o", "o"]
五、如果參數(shù)不是對象,Object.values會先將其轉(zhuǎn)為對象
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方法返回一個數(shù)組,成員是參數(shù)對象自身的(不含繼承的)所有可遍歷(enumerable)屬性的鍵值對數(shù)組
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)}`); }
四、將對象轉(zhuǎn)為真正的Map結(jié)構(gòu)
const obj = {foo : "bar", baz : 10}; const map = new Map(Object.entries(obj)); console.log(map);
五、實現(xiàn)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 }
到此這篇關(guān)于Object.keys()、Object.values()、Object.entries()用法總結(jié)的文章就介紹到這了,更多相關(guān)Object.keys() Object.values() Object.entries()內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
JavaScript 程序循環(huán)結(jié)構(gòu)詳解
這篇文章主要為大家介紹了JavaScript 程序循環(huán)結(jié)構(gòu),具有一定的參考價值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來幫助2021-12-12基于Day.js更優(yōu)雅的處理JavaScript中的日期
Day.js它能夠幫助我們處理JavaScript中的日期,本文就詳細(xì)的介紹一下Day.js的具體使用,可以更簡單的處理JavaScript中的日期和時間2021-09-09Javascript 網(wǎng)頁黑白效果實現(xiàn)代碼(兼容IE/FF等)
今天在網(wǎng)上看到有人推薦的一個不錯的方法,試了一下,效果還是可以的,可以自定義讓網(wǎng)頁的某一部分變成灰度顏色(黑白)。2010-04-04JavaScript實現(xiàn)給數(shù)字添加千位分隔符
這篇文章主要為大家詳細(xì)介紹了JavaScript如何實現(xiàn)給數(shù)字添加千位分隔符,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-11-11Javascript實現(xiàn)顏色rgb與16進(jìn)制轉(zhuǎn)換的方法
這篇文章主要介紹了Javascript實現(xiàn)顏色rgb與16進(jìn)制轉(zhuǎn)換的方法,實例分析了顏色值轉(zhuǎn)換的常用技巧與使用方法,非常具有實用價值,需要的朋友可以參考下2015-04-04