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。