关键词

JS遍历对象属性(4种方法)

在编写 JavaScript 应用程序时,经常需要把对象中的所有属性和值取出来,这时候可以先通过获取对象中的所有属性名,然后通过遍历属性名获取对应的值。

1) Object.keys()

JavaScript 内置的 Object 对象中提供了 keys() 方法,用于获取一个对象的所有属性名,它接收一个对象作为参数,返回一个数组,里边保存了参数对象自身所有的属性。

请看下面的例子:
const blogPost={
     id:1,
     title: "JavaScript教程",
     getSlug: function(){
          return "/post/"+this.title;
     },
     author: "李明",
     comments: ["很好","受教了","加油"],
     "update-at": "2020-10-26"
};
console.log(Object.keys(blogPost));
Object.keys(blogPost).forEach((key)=>{
     console.log(`${key}:${blogPost[key]}`);
});
输出结果为:
['id','title','getSlug','author','comments','update-at']
id:1
title:JavaScript教程
getSlug:function(){
     return "/post/"+title;
}
author:李明
comments:很好,受教了,加油
update-at:2020-10-26
第一行输出了 Object.keys(blogPost) 的值,可以看到对象中的属性名以数组的形式返回了,后面代码遍历了这个数组,并用遍历到的元素作为属性名去对象中获取属性值,并打印出了字符串结果。

2) for...in

除了使用 Object.keys() 获取属性外,还可以使用 for...in 循环,它与 for...of 循环的语法类似,在 for 后边的括号中,定义接收属性名的变量,后面使用 in 关键字跟上对象的名字。

同样访问上例中 blogPost 的所有属性,代码如下:
//...省略blogPost定义
for(let key in blogPost){
     console.log(`${key}:${blogPost[key]}`);
}
输出结果与上例一样。

需要注意的是,Object.keys() 和 for...in 循环只能获取可枚举(Enumerable)的属性,并且 Object.keys() 只能获取对象自身的属性,而 for...in 可以获取继承的属性。

3) Object.getOwnPropertyNames()

最后,使用 Object.getOwnPropertyNames() 可以获取对象自身的所有属性,无论是否为可枚举的,它接收要获取的属性的对象作为参数,然后返回属性名数组。不过 Object.getOwnPropertyNames() 不能获取 Symbol 类型的属性。

下面示例展示了使用 Object.getOwnPropertyNames() 遍历 blogPost 对象的方式,代码如下:
Object.getOwnPropertyNames(blogPost).forEach(key=>{
     console.log(`${key}:${blogPost[key]}`);
})

4) Object.getOwnPropertySymbols()

如果要获取 Symbol 类型的属性,则可以使用 Object.getOwnPropertySymbols(),它接收要获取属性的对象作为参数,然后返回 Symbol 类型的属性名数组,但是不包括普通字符串的属性名,代码如下:
const obj={
     a:1,
     [Symbol('b')]:2,
     [Symbol('c')]:3,
}
Object.getOwnPropertySymbols(obj);  //[Symbol(b),Symbol(c)]

本文链接:http://task.lmcjl.com/news/14462.html

展开阅读全文