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']

六腿准、實(shí)用技巧

 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)是不可遍歷的,因?yàn)閜的屬性描述對象的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));
image.png

二袄膏、如果原對象的屬性名是一個 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)}`);
}
image.png

四沉馆、將對象轉(zhuǎn)為真正的Map結(jié)構(gòu)

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

五、實(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
}
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末德崭,一起剝皮案震驚了整個濱河市斥黑,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌接癌,老刑警劉巖心赶,帶你破解...
    沈念sama閱讀 210,978評論 6 490
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異缺猛,居然都是意外死亡缨叫,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 89,954評論 2 384
  • 文/潘曉璐 我一進(jìn)店門荔燎,熙熙樓的掌柜王于貴愁眉苦臉地迎上來耻姥,“玉大人,你說我怎么就攤上這事有咨∷龃兀” “怎么了?”我有些...
    開封第一講書人閱讀 156,623評論 0 345
  • 文/不壞的土叔 我叫張陵座享,是天一觀的道長婉商。 經(jīng)常有香客問我,道長渣叛,這世上最難降的妖魔是什么丈秩? 我笑而不...
    開封第一講書人閱讀 56,324評論 1 282
  • 正文 為了忘掉前任,我火速辦了婚禮淳衙,結(jié)果婚禮上蘑秽,老公的妹妹穿的比我還像新娘。我一直安慰自己箫攀,他們只是感情好肠牲,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,390評論 5 384
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著靴跛,像睡著了一般缀雳。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上梢睛,一...
    開封第一講書人閱讀 49,741評論 1 289
  • 那天俏险,我揣著相機(jī)與錄音严拒,去河邊找鬼。 笑死竖独,一個胖子當(dāng)著我的面吹牛裤唠,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播莹痢,決...
    沈念sama閱讀 38,892評論 3 405
  • 文/蒼蘭香墨 我猛地睜開眼种蘸,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了竞膳?” 一聲冷哼從身側(cè)響起航瞭,我...
    開封第一講書人閱讀 37,655評論 0 266
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎坦辟,沒想到半個月后刊侯,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 44,104評論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡锉走,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,451評論 2 325
  • 正文 我和宋清朗相戀三年滨彻,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片挪蹭。...
    茶點(diǎn)故事閱讀 38,569評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡亭饵,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出梁厉,到底是詐尸還是另有隱情辜羊,我是刑警寧澤,帶...
    沈念sama閱讀 34,254評論 4 328
  • 正文 年R本政府宣布词顾,位于F島的核電站八秃,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏肉盹。R本人自食惡果不足惜昔驱,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,834評論 3 312
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望垮媒。 院中可真熱鬧,春花似錦航棱、人聲如沸睡雇。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,725評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽它抱。三九已至,卻和暖如春朴艰,著一層夾襖步出監(jiān)牢的瞬間观蓄,已是汗流浹背混移。 一陣腳步聲響...
    開封第一講書人閱讀 31,950評論 1 264
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留侮穿,地道東北人歌径。 一個月前我還...
    沈念sama閱讀 46,260評論 2 360
  • 正文 我出身青樓,卻偏偏與公主長得像亲茅,于是被迫代替她去往敵國和親回铛。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,446評論 2 348