Object.keys()、Object.values()、Object.entries()用法總結
更新時間：2023年04月07日 15:54:58 作者：前端白雪
本文主要介紹了Object.keys()、Object.values()、Object.entries()用法總結，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
Object.keys()
一、官方解釋
Object.keys() 方法會返回一個由一個給定對象的自身可枚舉屬性組成的數組，數組中屬性名的排列順序和使用 for...in 循環(huán)遍歷該對象時返回的順序一致 。如果對象的鍵-值都不可枚舉，那么將返回由鍵組成的數組。
二、語法
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]
二、返回數組的成員順序，與屬性的遍歷部分介紹的排列規(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方法的第二個參數添加的對象屬性（屬性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);
五、實現(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
}到此這篇關于Object.keys()、Object.values()、Object.entries()用法總結的文章就介紹到這了,更多相關Object.keys() Object.values() Object.entries()內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要介紹了JavaScript偏函數與柯里化,結合實例形式詳細分析了JavaScript偏函數與柯里化的概念、原理、定義、使用方法及相關操作注意事項,需要的朋友可以參考下2019-03-03
很多網站都涉及到輸入日期選項，如果客戶日期輸入錯誤，可能導入查詢不到甚至查詢到錯誤的信息，為了更好的滿足用戶需求，需要對日期進行校驗，下面給大家介紹使用純javascript如何判斷查詢日期是否為有效日期，需要的朋友可以參考下2015-08-08
這篇文章主要為大家詳細介紹了基于canvas實現(xiàn)超炫酷的流水燈效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-05-05
這篇文章主要介紹了JS簡單判斷滾動條的滾動方向實現(xiàn)方法,涉及javascript針對scrollTop事件的相關操作技巧,需要的朋友可以參考下2017-04-04
這篇文章主要介紹了詳解iframe跨域的幾種常用方法(小結)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-04-04
這篇文章主要介紹了JS實現(xiàn)自定義狀態(tài)欄動畫文字效果,涉及javascript結合時間函數動態(tài)設置IE狀態(tài)欄文字顯示效果相關操作技巧,需要的朋友可以參考下2017-10-10
這篇文章主要為大家詳細介紹了微信小程序實現(xiàn)加入購物車滑動軌跡，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-11-11
javascript iframe內的函數調用實現(xiàn)方法
用下面的方法可以調用iframe中的函數，實現(xiàn)一些比較特殊的效果，不過能跨域的。2009-07-07
JavaScript 學習技巧,需要的朋友可以參考下。2010-02-02
網頁中都有.js文件和.css文件，但這并不意味著CSS和js是獨立不能交互的，下面與大家分享js與css交互的5種方法2014-04-04