【日常记录】【JS】迭代器、可迭代对象、内置可迭代对象

1、迭代器

在JavaScript中，迭代器也是一个具体的对象，这个对象需要符合迭代器协议（iterator protocol）

解释：迭代器（Iterator）是一种用于遍历数据集合的接口或对象，它提供了一种统一的方式来访问集合中的元素，而无需了解其内部的数据结构。

在 JavaScript 中，迭代器是实现了迭代器协议（Iterator Protocol）的对象。根据这个协议，一个对象如果要被视为迭代器，它必须实现一个名为 next 的方法，该方法每次被调用都会返回一个包含 value 和 done 属性的对象。其中，value 表示迭代器返回的值，而 done 表示迭代器是否已经完成遍历。

• 迭代器协议定义了产生一系列值（无论是有限还是无限个）的标准方式
• 那么在js中这个标准就是一个特定的next方法

next方法要求如下

• 一个无参数或者一个参数的函数，返回一个应当拥有以下两个属性的对象
• done(Boolean类型)
  • 如果迭代器可以产生序列中的下一个值，则为 false。（这等价于没有指定 done 这个属性。）
  • 如果迭代器已将序列迭代完毕，则为 true。这种情况下，value 是可选的，如果它依然存在，即为迭代结束之后的默认返回值。
• value：迭代器返回的任何 JavaScript 值。done 为 true 时可省略

    // iterator:迭代器
    /**
     * 迭代器要求:
     * 1.是一个对象
     * 2.有 next 无参函数并且返回 一个对象，对象包含 done 和value
    */
    const iterator = {
      next: function () {
        return { done: true, value: 1 }
      }
    }

    let index = 0
    const names = ["1号", "2号", "3号", "4号",]
    const namesIterator = {
      next: function () {
        if (index < names.length) {
          return { done: false, value: names[index++] }
        } else {
          return { done: true, value: undefined }
        }
      }
    }
    console.log(namesIterator.next()) // {done: false, value: '1号'}
    console.log(namesIterator.next()) // {done: false, value: '2号'}
    console.log(namesIterator.next()) // {done: false, value: '3号'}
    console.log(namesIterator.next()) // {done: false, value: '4号'}
    console.log(namesIterator.next()) // {done: true, value: undefined}
    console.log(namesIterator.next()) // {done: true, value: undefined}

2、可迭代对象

• 它和迭代器是不同的概念
• 当一个对象实现了iterable protocol协议时，它就是一个可迭代对象
• 这个对象的要求是必须实现 @@iterator 方法，在代码中我们使用 Symbol.iterator 访问该属性

作用:当一个对象变成一个可迭代对象的时候，进行某些迭代操作，比如 for...of 操作时，其实就会调用它的 @@iterator 方法

Array 实例的 @@iterator 方法实现了迭代协议，允许数组被大多数期望可迭代对象的语法所使用，例如展开语法和 for…of 循环。它返回一个数组迭代器对象，该对象会产生数组中每个索引的值。
但是对象，是没有实现这个迭代协议的，所以不能使用 for of 循环

可迭代对象（Iterable）是指实现了可迭代协议（Iterable Protocol）的对象。换句话说，可迭代对象是具有 Symbol.iterator 方法的对象，该方法返回一个迭代器对象。

在 JavaScript 中，可迭代对象可以被 for…of 循环直接遍历，也可以通过其他方式进行遍历，比如使用迭代器的 next 方法逐个访问元素。
常见的可迭代对象包括数组、Set、Map 等，它们都实现了可迭代协议，因此可以直接在 for…of 循环中使用

    // 迭代器是一个对象
    // 符合迭代器协议（iterator protocol）
    const iterator = { next: function () { return { done: , value:  } } }

    // 可迭代对象 是一个对象
    // 符合可迭代协议（iterable protocol）:[Symbol.iterator] 函数
    const iterableObj = {
      [Symbol.iterator]: function () {
        return 迭代器(上面定义的iterator这个对象)
      }
    }

// 可迭代对象
const iterableObj = {
  names: ["1号", "2号", "3号", "4号",],
  [Symbol.iterator]: function () {
    let index = 0
    return {
      next: () => {
        if (index < this.names.length) {
          return { done: false, value: this.names[index++] }
        } else {
          return { done: true, value: undefined }
        }
      }
    }
  }
}
console.log(iterableObj[Symbol.iterator]);
// 这个函数会返回一个迭代器
const iterator = iterableObj[Symbol.iterator]()
console.log(iterator.next());
console.log(iterator.next());
console.log(iterator.next());
console.log(iterator.next());
console.log(iterator.next());
// 可迭代对象的作用
/**
 * 1. for of 可以遍历的东西必须是一个可迭代对象
*/
const obj = {
  name: "呆呆狗",
  age: 20
}
// for (const item of obj) {
//   console.log(item); // 报错: obj is not iterable
// }
for (const item of iterableObj) {
  // for of 就是一个语法糖，就是迭代器不断执行 next，取出来值，传递给item，当value 为ture 就停止了
  console.log(item);
}

3、内置可迭代对象

const names = ["1号", "2号", "3号"]
console.log(names[Symbol.iterator]);
const iterator1 = names[Symbol.iterator]()

console.log(iterator1.next());
console.log(iterator1.next());
console.log(iterator1.next());
console.log(iterator1.next());

for (const iterator of names) {
  console.log(iterator);
}

// String、Array、Map、Set、arguments对象、NodeList集合 都可以 for of