遍历对象方法Object.keys()&for...in

绝地灬酷狼 2022-05-14 15:15 293阅读 0赞

最近的项目中用到了遍历对象的方法，但是又要兼容IE8浏览器，刚开始用的Object.keys()报错，又用回了万金油for...in，搜索了下Object.keys()的相关用法并总结如下：

那么我们目前有三种遍历对象的方法了 对于对象的遍历目前有三种方式：

1、for in : 会输出自身以及原型链上可枚举的属性。

2、Object.keys() : 用来获取对象自身可枚举的属性键    //不兼容IE8

3、Object.getOwnPropertyNames() : 用来获取对象自身的全部属性名

在 ES6 之前执行此操作的唯一方法是使用 `for ... in` 循环。

在ES6之后循环对象的更好方法是首先将对象转换为数组。然后，循环遍历数组。

您可以使用三种方法将对象转换为数组：

1.  Object.keys
2.  Object.values
3.  Object.entries

### Object.keys ###

`Object.keys` 创建一个包含对象属性的数组。这是一个例子：

JavaScript 代码:

1.  const fruits = \{
2.  apple: 28,
3.  orange: 17,
4.  pear: 54,
5.  \}
6.  const keys = Object.keys(fruits)
7.  console.log(keys) // \[apple, orange, pear\]

### Object.values ###

`Object.values` 创建一个数组，其中包含对象中每个属性的值。这是一个例子：

JavaScript 代码:

1.  const fruits = \{
2.  apple: 28,
3.  orange: 17,
4.  pear: 54,
5.  \}
6.  const values = Object.values(fruits)
7.  console.log(values) // \[28, 17, 54\]

### Object.entries ###

`Object.entries` 创建一个二维数组。每个内部数组都有两个元素。第一个元素是属性;第二个元素是属性值。

这是一个例子：

JavaScript 代码:

1.  const fruits = \{
2.  apple: 28,
3.  orange: 17,
4.  pear: 54,
5.  \}
6.  const entries = Object.entries(fruits)
7.  console.log(entries)
8.  // \[
9.  // \[apple, 28\],
10. // \[orange, 17\],
11. // \[pear, 54\]
12. // \]

我最喜欢的是 `Object.entries` ，因为你同时获得了键和属性值。

## 循环数组 ##

一旦将对象通过 `Object.keys`，`Object.values`或`Object.entries` 转换为数组，就可以像使用普通数组一样遍历它。

JavaScript 代码:

1.  // Looping through arrays created from Object.keys
2.  const keys = Object.keys(fruits)
3.  for (const key of keys) \{
4.  console.log(key)
5.  \}
6.  // Results:
7.  // apple
8.  // orange
9.  // pear

如果使用 `Object.entries`，则可能需要将数组解构为其键和属性。

JavaScript 代码:

1.  for (const \[fruit, count\] of entries) \{
2.  console.log(\`There are $\{count\} $\{fruit\}s\`)
3.  \}
4.  // Result
5.  // There are 28 apples
6.  // There are 17 oranges
7.  // There are 54 pears

## 小结 ##

循环对象的更好方法是首先使用这三种方法之一将其转换为数组。

1.  Object.keys
2.  Object.values
3.  Object.entries

然后，像普通数组一样遍历结果。

参考文章：[https://zellwk.com/blog/looping-through-js-objects/][https_zellwk.com_blog_looping-through-js-objects]

[https_zellwk.com_blog_looping-through-js-objects]: https://zellwk.com/blog/looping-through-js-objects/