js迭代器 - 技术栈

文章目录

前言

前言

迭代器是 JSt 中一种特殊的对象，它提供了一种统一的、通用的方式遍历个各种不同类型的数据结构。

可以遍历的数据结构包括：数组、字符串、Set、Map 等可迭代对象。我们也可以自定义实现迭代器，以支持遍历自定义的数据结构。

实现原理：

迭代器的实现原理是通过定义一个特定的next() 方法,在每次迭代中返回一个包含两个属性的对象：done 和 value。
next()方法

参数：无参数或者有一个参数。
返回值：返回一个有两个属性的对象。属性值如下：
done:布尔值，表示迭代是否完成
value:当前步骤的值

每次调用next方法,都会改变value值至下一步，直到迭代完成

据此，可以给数组手写一个迭代器函数

javascript 复制代码

const strArr = ['a', 'b', 'c', 'd'];

// 为数组封装迭代器
function create(arr) {
  let index = 0;
  return {
    next: () => {
      if (index < arr.length) {
        return { done: false, value: arr[index++] };
      } else {
        return { done: true };
      }
    },
  };
}

const str = create(strArr);
console.log(JSON.stringify(str.next()));
console.log(JSON.stringify(str.next()));
console.log(JSON.stringify(str.next()));
console.log(JSON.stringify(str.next()));
console.log(JSON.stringify(str.next()));
//输出
// {"done":false,"value":"a"}
// 测试.html:28 {"done":false,"value":"b"}
// 测试.html:29 {"done":false,"value":"c"}
// 测试.html:30 {"done":false,"value":"d"}
// 测试.html:31 {"done":true}

可以看到，每调用一次next，value会向后移动，直至遍历完毕

调用迭代器

语法

javascript 复制代码

const a=可迭代对象[Symbol.iterator]()

实例如下

javascript 复制代码

const myArr = ['a', 'b', 'c', 'd'];

// 获取数组自带的迭代器对象
const myIterator = myArr[Symbol.iterator]();

// 通过迭代器的 next() 方法遍历数组
console.log(JSON.stringify(myIterator.next()));
console.log(JSON.stringify(myIterator.next()));
console.log(JSON.stringify(myIterator.next()));
console.log(JSON.stringify(myIterator.next()));
console.log(JSON.stringify(myIterator.next()));
//输出
// {"value":"a","done":false}
// 测试.html:17 {"value":"b","done":false}
// 测试.html:18 {"value":"c","done":false}
// 测试.html:19 {"value":"d","done":false}
// 测试.html:20 {"done":true}

自制迭代器

很多数据对象由于不是可迭代对象，我们可以为其手动创建一个迭代器

与函数不同,这次将其封装在对象中,并且此后调用方法一致

javascript 复制代码

const myObj1 = {
  strArr: ['a', 'b', 'c', 'd'],
  // 在 myObj1 的内部创建一个迭代器
  [Symbol.iterator]: function () {
    let index = 0;
    const Iterator = {
      next: function () {
        if (index < myObj1.strArr.length) {
          return { done: false, value: myObj1.strArr[index++] };
        } else {
          return { done: true };
        }
      },
    };
    return Iterator;
  },
};

// 获取 myObj1 的迭代器对象
const myIterator = myObj1[Symbol.iterator]();
// 通过迭代器遍历 myObj1.strArr 的数据
console.log(JSON.stringify(myIterator.next()));
console.log(JSON.stringify(myIterator.next()));
console.log(JSON.stringify(myIterator.next()));
console.log(JSON.stringify(myIterator.next()));
console.log(JSON.stringify(myIterator.next()));
// 输出
// {"done":false,"value":"a"}
// 测试.html:32 {"done":false,"value":"b"}
// 测试.html:33 {"done":false,"value":"c"}
// 测试.html:34 {"done":false,"value":"d"}
// 测试.html:35 {"done":true}

大部分步骤一致,只是在函数前加上[Symbol.iterator]:

而可迭代对象可以使用for of进行遍历

如下

javascript 复制代码

for(let item of myObj1){
    console.log(item);
}
//输出同样效果

当自定义类复杂时,自制迭代器也就更难写