国产一区二区精品-国产一区二区精品久-国产一区二区精品久久-国产一区二区精品久久91-免费毛片播放-免费毛片基地

千鋒教育-做有情懷、有良心、有品質的職業教育機構

手機站
千鋒教育

千鋒學習站 | 隨時隨地免費學

千鋒教育

掃一掃進入千鋒手機站

領取全套視頻
千鋒教育

關注千鋒學習站小程序
隨時隨地免費學習課程

當前位置:首頁  >  技術干貨  > JS獲取對象key方式

JS獲取對象key方式

來源:千鋒教育
發布人:xqq
時間: 2023-11-21 09:49:52 1700531392

JS作為前端開發的基礎語言,對象在JS中起著重要的作用。而獲取對象中的key也是我們經常需要掌握的技能。在這篇文章中,我們將介紹JS獲取對象key的幾種方式。

一、Object.keys()

Object.keys()方法返回一個對象中已定義的屬性的所有鍵名, 以字符串數組的形式。該方法的語法如下:

Object.keys(obj);

其中obj是一個對象,該方法返回的是obj中所有已定義屬性的鍵名。例如:

let obj = {a:8, b:12, c:15}
console.log(Object.keys(obj));
// ["a", "b", "c"]

二、for...in循環

使用for...in循環可以遍歷對象中的所有可枚舉屬性,對象中所有屬性都將被枚舉,包括其原型鏈上的屬性。for...in循環的語法如下:

for (variable in object){
    //代碼塊
}

其中variable是一個局部變量,object是對象或數組。例如:

let obj = {a:8, b:12, c:15};
for(let key in obj){
    console.log(key);
}
// "a"
// "b"
// "c"

三、Object.getOwnPropertyNames()

Object.getOwnPropertyNames()方法返回一個數組,該數組包含了對象自身所有屬性(不包括繼承的屬性)的屬性名。該方法的語法如下:

Object.getOwnPropertyNames(obj)

其中obj是一個對象,該方法返回的是obj中所有自身屬性的鍵名。例如:

let obj = {a:8, b:12, c:15};
console.log(Object.getOwnPropertyNames(obj));
// ["a", "b", "c"]

四、Reflect.ownKeys()

Reflect.ownKeys()方法返回一個由目標對象自身的屬性和方法組成的數組,包括不可枚舉屬性,由 Symbol 類型的屬性鍵名組成的數組。其語法如下:

Reflect.ownKeys(target)

其中target是一個對象,該方法返回的是target自身所有屬性和方法的鍵名。例如:

let obj = {a:8, b:12, c:15};
console.log(Reflect.ownKeys(obj));
// ["a", "b", "c"]

五、解構賦值

使用ES6的解構賦值,我們也可以將對象的key賦值給變量。其語法如下:

let {key1, key2, …, keyN} = object;

其中key1, key2, …, keyN是對象中定義的屬性名稱,例如:

let obj = {a:8, b:12, c:15};
let {a, b, c} = obj;
console.log(a);
console.log(b);
console.log(c);
// 8
// 12
// 15

六、使用Map結構

使用ES6新增的Map結構,我們也可以方便的獲取對象中的key。例如:

let obj = {a:8, b:12, c:15};
let map = new Map(Object.entries(obj));
for(let [key, value] of map){
    console.log(key);
}
// "a"
// "b"
// "c"

七、小結

以上就是JS獲取對象key的幾種方式。Object.keys(),for...in循環,Object.getOwnPropertyNames()和Reflect.ownKeys()方法都是一些比較基礎的方法,掌握它們能夠讓你更加便捷地操控對象。同時,使用ES6的解構賦值和Map結構也能夠非常方便地獲取對象中的key。

聲明:本站稿件版權均屬千鋒教育所有,未經許可不得擅自轉載。
10年以上業內強師集結,手把手帶你蛻變精英
請您保持通訊暢通,專屬學習老師24小時內將與您1V1溝通
免費領取
今日已有369人領取成功
劉同學 138****2860 剛剛成功領取
王同學 131****2015 剛剛成功領取
張同學 133****4652 剛剛成功領取
李同學 135****8607 剛剛成功領取
楊同學 132****5667 剛剛成功領取
岳同學 134****6652 剛剛成功領取
梁同學 157****2950 剛剛成功領取
劉同學 189****1015 剛剛成功領取
張同學 155****4678 剛剛成功領取
鄒同學 139****2907 剛剛成功領取
董同學 138****2867 剛剛成功領取
周同學 136****3602 剛剛成功領取

下一篇

ica_x64.msi
相關推薦HOT