Object.keys()、Object.values()、Object.entries()用法總結(jié)
更新時(shí)間：2023年04月07日 15:54:58 作者：前端白雪
本文主要介紹了Object.keys()、Object.values()、Object.entries()用法總結(jié)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
Object.keys()
一、官方解釋
Object.keys() 方法會(huì)返回一個(gè)由一個(gè)給定對(duì)象的自身可枚舉屬性組成的數(shù)組，數(shù)組中屬性名的排列順序和使用 for...in 循環(huán)遍歷該對(duì)象時(shí)返回的順序一致 。如果對(duì)象的鍵-值都不可枚舉，那么將返回由鍵組成的數(shù)組。
二、語(yǔ)法
Object.keys(obj)
參數(shù)：要返回其枚舉自身屬性的對(duì)象
返回值：一個(gè)表示給定對(duì)象的所有可枚舉屬性的字符串?dāng)?shù)組
三、處理對(duì)象，返回可枚舉的屬性數(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']
六、實(shí)用技巧
let person={
name:'一只流浪的kk',
age:18,
eat:function(){
}
}
Object.keys(person).map((key)=>{
person[key];//獲得屬性對(duì)應(yīng)的值，可以進(jìn)行其它處理
})
Object.values()
一、返回一個(gè)數(shù)組，成員是參數(shù)對(duì)象自身的（不含繼承的）所有可遍歷屬性的鍵值
let obj = {
foo : "bar",
baz : 20
};
console.log(Object.values(obj)); // ["bar", 20]
二、返回?cái)?shù)組的成員順序，與屬性的遍歷部分介紹的排列規(guī)則一致
const obj = {100 : "a", 2 : "b", 7 : "c"};
console.log(Object.values(obj)); //["b", "c", "a"]
三、Object.values()只會(huì)遍歷對(duì)象自身的可遍歷屬性
const obj = Object.create({},{p : {value : 10}});
console.log(Object.values(obj));
console.log(Object.getOwnPropertyDescriptors(obj)); // []
Object.create方法的第二個(gè)參數(shù)添加的對(duì)象屬性（屬性p），如果不顯式聲明，默認(rèn)是不可遍歷的，因?yàn)閜的屬性描述對(duì)象的enumerable默認(rèn)是false，Object.values不會(huì)返回這個(gè)屬性。
因此只要把enumerable改成true，Object.values就會(huì)返回屬性p的值。
const obj = Object.create({},{p:{
value : 10,
enumerable : true,
configurable : true,
writable : true,
}})
console.log(Object.values(obj)); //[10]
四、Object.values會(huì)過(guò)濾屬性名為 Symbol 值的屬性
//如果Object.values方法的參數(shù)是一個(gè)字符串，會(huì)返回各個(gè)字符組成的一個(gè)數(shù)組。
Object.values({ [Symbol()]: 123, foo: 'abc' });
console.log(Object.values('foo')); //["f", "o", "o"]
五、如果參數(shù)不是對(duì)象，Object.values會(huì)先將其轉(zhuǎn)為對(duì)象
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方法返回一個(gè)數(shù)組，成員是參數(shù)對(duì)象自身的（不含繼承的）所有可遍歷（enumerable）屬性的鍵值對(duì)數(shù)組
var obj = { foo: 'bar', baz: 42 };
console.log(Object.entries(obj));
二、如果原對(duì)象的屬性名是一個(gè) Symbol 值，該屬性會(huì)被省略
console.log(Object.entries({ [Symbol()]: 123, foo: 'abc' })); // [ [ 'foo', 'abc' ] ]
三、遍歷對(duì)象的屬性
let obj = {
one : 1,
two : 2,
}
for(let [k , v] of Object.entries(obj)){
console.log(`${JSON.stringify(k)} : ${JSON.stringify(v)}`);
}
四、將對(duì)象轉(zhuǎn)為真正的Map結(jié)構(gòu)
const obj = {foo : "bar", baz : 10};
const map = new Map(Object.entries(obj));
console.log(map);
五、實(shí)現(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)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
數(shù)組的冒泡排序很實(shí)用，不過(guò)還是有些同學(xué)們不會(huì)，于是在本文為大家詳細(xì)介紹下，感興趣的朋友不要錯(cuò)過(guò)2013-12-12
數(shù)組重復(fù)元素如何處理，這是在項(xiàng)目實(shí)戰(zhàn)中經(jīng)常遇到的，針對(duì)這個(gè)問(wèn)題，下文給出詳細(xì)解決方法，希望對(duì)大家有所幫助2013-12-12
這篇文章主要介紹了js如何獲取ajax的返回值,需要的朋友可以參考下2014-04-04
JavaScript 程序循環(huán)結(jié)構(gòu)詳解
這篇文章主要為大家介紹了JavaScript 程序循環(huán)結(jié)構(gòu)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2021-12-12
Webpack 是一個(gè)前端資源加載/打包工具。它將根據(jù)模塊的依賴關(guān)系進(jìn)行靜態(tài)分析，然后將這些模塊按照指定的規(guī)則生成對(duì)應(yīng)的靜態(tài)資源，這篇文章主要介紹了使用Webpack打包的操作方法,需要的朋友可以參考下2022-12-12
前面已經(jīng)講解了 引用，函數(shù)重載，作用域和上下文，接下來(lái)，講解JavaScript中另一個(gè)重要的知識(shí)——閉包。2009-09-09
基于Day.js更優(yōu)雅的處理JavaScript中的日期
Day.js它能夠幫助我們處理JavaScript中的日期，本文就詳細(xì)的介紹一下Day.js的具體使用，可以更簡(jiǎn)單的處理JavaScript中的日期和時(shí)間2021-09-09
Javascript 網(wǎng)頁(yè)黑白效果實(shí)現(xiàn)代碼(兼容IE/FF等)
今天在網(wǎng)上看到有人推薦的一個(gè)不錯(cuò)的方法，試了一下，效果還是可以的，可以自定義讓網(wǎng)頁(yè)的某一部分變成灰度顏色(黑白)。2010-04-04
JavaScript實(shí)現(xiàn)給數(shù)字添加千位分隔符
這篇文章主要為大家詳細(xì)介紹了JavaScript如何實(shí)現(xiàn)給數(shù)字添加千位分隔符,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-11-11
Javascript實(shí)現(xiàn)顏色rgb與16進(jìn)制轉(zhuǎn)換的方法
這篇文章主要介紹了Javascript實(shí)現(xiàn)顏色rgb與16進(jìn)制轉(zhuǎn)換的方法,實(shí)例分析了顏色值轉(zhuǎn)換的常用技巧與使用方法,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-04-04