{首页主词},&

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

一、Object.keys()

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

Object.keys(obj);

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

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

二、for...in循環(huán)

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

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

其中variable是一個局部變量，object是對象或數(shù)組。例如：

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

三、Object.getOwnPropertyNames()

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

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()方法返回一個由目標(biāo)對象自身的屬性和方法組成的數(shù)組，包括不可枚舉屬性，由 Symbol 類型的屬性鍵名組成的數(shù)組。其語法如下：

Reflect.ownKeys(target)

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

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

五、解構(gòu)賦值

使用ES6的解構(gòu)賦值，我們也可以將對象的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結(jié)構(gòu)

使用ES6新增的Map結(jié)構(gòu)，我們也可以方便的獲取對象中的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"

七、小結(jié)

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

JS獲取對象key方式