遍历对象属性的几种方法

6月 11 2021 Code 6 分钟读完 (约 877 字)

手撕一个迭代器遍历

JS 原生对象中并无迭代器，此时若想**随心遍历该对象中的一个数组****，**要怎样做呢–

手撕一个迭代器，然后用for ...of遍历它

const LPL = {
  name: "TES",
  players: ["JackeyLove", "Karsa", "knight"],
  [Symbol.iterator]() {
    let index = 0;
    return {
      next: () => {
        if (index < this.players.length) {
          const res = { value: this.players[index], done: false };
          index++;
          return res;
        } else {
          return { value: undefined, done: true };
        }
      },
    };
  },
};
for (let item of LPL) {
  //JackeyLove
  console.log(item); //Karsa
} //knight

该方法不便利，但很灵活

自身可枚举属性+for…of

`Object.keys()`

参数： obj

它会返回一个数组，该数组由给定对象的**自身****可枚举属性**组成，“自身”指该方法会跳过从原型对象继承的属性，不会返回 prototype 中的属性。

论证：

let simpleColors = {
  colorA: "white",
  colorB: "black",
};
let natureColors = {
  colorC: "green",
  colorD: "yellow",
};
Object.setPrototypeOf(natureColors, simpleColors);
Object.keys(natureColors); // => ['colorC', 'colorD']
natureColors["colorA"]; // => 'white'
natureColors["colorB"]; // => 'black'

如果对象的键-值都不可枚举，那么将返回由键组成的数组

Object.values()

返回给定对象“自身“的可枚举属性的values 数组

let meals = {
  mealA: "Breakfast",
  mealB: "Lunch",
  mealC: "Dinner",
};
console.log(Object.values(meals)); //[ 'Breakfast', 'Lunch', 'Dinner' ]

`Object.entries()`

返回给定对象“自身“的可枚举属性的键值对数组
这个返回的数组是一个二维数组，如[ [key1, value1], [key2, value2], …, [keyN, valueN] ]
直接使用很烦，我们可以用解构赋值+for...of遍历，就像是 Vue 的 v-for=”(val,key) in obj”那样。

写法：

let meals = {
  mealA: "Breakfast",
  mealB: "Lunch",
  mealC: "Dinner",
};
for (let [key, value] of Object.entries(meals)) {
  console.log(key + ":" + value);
}
// 'mealA:Breakfast' 'mealB:Lunch' 'mealC:Dinner'

Object.entries()最适用于数组解构赋值，其方式是将键和值轻松分配给不同的变量。
此函数还可以轻松地将纯 JS 对象属性映射到Map对象中

let greetings = {
  morning: "Good morning",
  midday: "Good day",
  evening: "Good evening",
};
let greetingsMap = new Map(Object.entries(greetings));
greetingsMap.get("morning"); // => 'Good morning'
greetingsMap.get("midday"); // => 'Good day'
greetingsMap.get("evening"); // => 'Good evening'

总结

一般来说，for…in 和 for…of 的区别在于：一个是遍历 keys，一个是遍历 values
当我们要想遍历对象的属性，由于 for…of 只能遍历拥有迭代器的数据结构，而原生 JS 对象是没有迭代器的，因此只能结合 Object.values，先将 keys 或 values 或 key-values 梳理出来，放到数组里(数组有迭代器)，再遍历
返回的数组中属性名的排列顺序和使用 for…in 循环遍历该对象时返回的顺序一致。
但与 Object 这几个方法不同的是，for…in 可以遍历原型链上的属性，因为他不需要迭代器

可以直接遍历 JS 对象本身(而不是去遍历 Object.方法返回的数组)

* for...in遍历的是对象的keys

番外：对象的点操作符和[]操作符

对象支持这两种方式，通过属性名访问属性值

二者区别：

通过点操作符访问，属性名是写死的，只能是那一个，因此是静态的
通过“[]”操作符访问，中括号内部是字符串就行，即–它允许使用字符串变量，或一个结果是字符串的表达式来访问对应属性的值，因此是动态的

参考：

JS 轻松遍历对象的几种方式

#面经