千锋教育-做有情怀、有良心、有品质的职业教育机构

手机站
千锋教育

千锋学习站 | 随时随地免费学

千锋教育

扫一扫进入千锋手机站

领取全套视频
千锋教育

关注千锋学习站小程序
随时随地免费学习课程

当前位置:首页  >  技术干货  > 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