遍历对象的4种方式

Nordon
2,091 阅读2分钟

这是我参与11月更文挑战的第10天，活动详情查看：2021最后一次更文挑战

JS中万物皆对象，若是想要遍历一个对象，有哪些方式可以呢？

for in

首先是众所周知的for...in

for...in语句以任意顺序遍历一个对象的除Symbol以外的可枚举属性，包括继承的可枚举属性。

const obj = {
  name: "nordon",
  age: 12
};

for (const key in obj) {
  console.log(key, '---', obj[key]);
}

控制台依次输出

name --- nordon
age --- 12

for...in不仅可以遍历对象，而且可以遍历数组

const arr = ["a", "b"];

for (const key in arr) {
    console.log(key, "---", arr[key]);
}

控制台依次输出

0 --- a
1 --- b

虽然其可以遍历数组，但是不推荐这么使用，因为其是专门为了遍历对象属性而存在的，并不建议搭配数组一起使用，而且数组和forEach、for...of、for循环等一起搭配使用更为契合

for of

使用for...of遍历对象属于一种投机取巧的行为，因为其设计初衷是为了迭代一些拥有可迭代对象中使用的，比如Array、Set、Map、arguments

想要使用for...of遍历对象，需要我们将一个普通的对象改造为可迭代对象，JS中开发者提供了非常多的元编程能力，@@iterator便是其中之一。对象通过实现@@iterator方法，使对象拥有一个带有Symbol.iterator的方法

const iteratorObj = {
    *[Symbol.iterator]() {
        yield 'name'
        yield 'age'
    },
    name: "nordon",
    age: 12,
};

for (const key of iteratorObj) {
    console.log(key, "---", iteratorObj[key]);
}

控制台输出

name --- nordon
age --- 12

Object.keys

Object.keys方法可以将一个对象自身可枚举属性组成一个数组并返回，最终得到的由对象可枚举key组成的数组，需要注意的是返回的数组跑许和正常遍历对象时顺序是一致的

const obj = {
    name: "nordon",
    age: 12,
};

Object.keys(obj);

控制台输出

['name', 'age']

通过遍历该数组便可以依次取出对象的数据

Object.keys(obj).forEach(key => {
  console.log(key, '---', obj[key]);
})

Object.entries

Object.entries方法可以将一个对象自身可枚举属性的键值对作为数组返回

const obj = {
    name: "nordon",
    age: 12,
};

Object.entries(obj);

控制台输出

[["name","nordon"],["age",12]]

返回的是一个二维数组，将其配合for...of便可以将对象的键值取出

for (const [key, value] of Object.entries(obj)) {
  console.log(key, '---', value);
}
avatar
文章
阅读
粉丝