JS for...of iterator（迭代器），for...in可枚举，不可枚举属性，对象属性遍历

目录

iterator

for...of循环迭代器

可枚举/不可枚举

属性描述对象

示例

对象属性遍历的方式

---

iterator

在JavaScript中，迭代器是一个对象，它提供了一种按顺序访问集合元素的方法，而不暴露集合结构的底层细节。

可遍历的数据类型：Array、String、Map、Set或者其他具有Symbol.iterator属性的对象，obj[Symbol.iterator]是一个迭代器生成函数，返回一个迭代器iterator。

迭代器具有一个方法next，iterator.next()  返回的对象结构{ value: value , done: boolean };

// Custom iterable object
const myIterable = {
  data: [1, 2, 3, 4],
  [Symbol.iterator]: function () {
    let index = 0;
    return {
      next: () => {
        if (index < this.data.length) {
          return { value: this.data[index++], done: false };
        } else {
          return { done: true };
        }
      },
    };
  },
};

// Using the iterator
const iterator = myIterable[Symbol.iterator]();
console.log(iterator.next()); // { value: 1, done: false }
console.log(iterator.next()); // { value: 2, done: false }
console.log(iterator.next()); // { value: 3, done: false }
console.log(iterator.next()); // { value: 4, done: false }
console.log(iterator.next()); // { done: true }

for...of循环迭代器

底层遍历，每次返回迭代器对象next() 的value

for(value of myIterable){
    console.log(value)   //1   2   3   4
}

...扩展符号， 扩展的原理其实就是底层调用迭代器

console.log([...myIterable])  // [1, 2, 3, 4]

可枚举/不可枚举

可枚举和不可枚举通俗点来说是可以被for...in循环遍历出来的属性就称做可枚举属性，不能被其遍历出来的属性就称做不可枚举属性，但是严谨解释就是，每一个对象属性都具有“属性描述对象”

属性描述对象

属性描述对象是一个包含有关 JavaScript 对象属性特性的对象。在属性描述对象中，包含了属性的各种信息，如是否可枚举、是否可写、是否可配置等。

对象描述属性由Object.getOwnPropertyDescriptor方法返回。

属性描述对象包含以下属性：

• value: 属性的值。
• writable: 如果为true，则属性的值可以被修改。默认为false。
• enumerable: 如果为true，则属性可以在for...in循环中被枚举。默认为false。
• configurable: 如果为true，则属性的描述符可以被修改，属性可以被删除。默认为false。

其中enumerable就表示这个属性是否可被枚举

示例

1. 创建一个对象，添加属性，for...in遍历属性

const obj = { a: 1, b: 2 };

// 添加一个属性，默认是可枚举的
obj.c = 3;

for (const key in obj) {
  console.log(key); // 输出 a, b, c
}

2. 创建一个对象，添加不可枚举属性，for...in遍历属性，不可枚举不被遍历

const obj = { a: 1, b: 2 };

// 添加一个属性，默认是可枚举的
obj.c = 3;
// 使用 Object.defineProperty 将属性设置为不可枚举
Object.defineProperty(obj, 'd', {
  value: 4,
  enumerable: false,
});
for (const key in obj) {
  console.log(key); // 输出 a, b, c
}

对象属性遍历的方式

• for...in 循环遍历对象的所有可枚举属性，包括原型链上的。
• Object.keys() 返回对象的所有可枚举属性的数组。
• Object.values() 返回对象的所有可枚举属性值的数组。
• Object.entries() 返回对象的所有可枚举属性键值对的数组。
• Object.getOwnPropertyNames() 返回对象的所有属性的数组，包括不可枚举属性。
• Reflect.ownKeys() 返回对象的所有属性键的数组，包括不可枚举属性。