JavaScript中Iterator对象研究01_Iterator基本介绍_Iterator()构造函数_静态方法:from 实例方法:drop、every、filter、find、flatMap

最新推荐文章于 2025-04-12 23:19:31 发布
最新推荐文章于 2025-04-12 23:19:31 发布
阅读量1.7k 收藏 27
点赞数 29
分类专栏： javascript 文章标签： javascript 开发语言 ecmascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_33546823/article/details/142774093
版权

JavaScript中Iterator对象研究01：Iterator基本介绍、Iterator构造函数、静态方法from、实例方法drop、every、filter、find、flatMap

在现代JavaScript开发中，**迭代器（Iterator）**是一种重要的概念，它为我们提供了一种统一的方式来遍历数据结构。迭代器使得数据的遍历变得更加灵活和高效，特别是在处理大量数据或流数据时。

随着ECMAScript的不断发展，关于迭代器的功能也在逐步扩展。虽然截至2023年10月，一些迭代器的高级功能还处于提案阶段，但了解这些特性可以让我们更好地掌握未来的JavaScript发展方向。

本文将深入研究以下内容：

  • Iterator基本介绍
  • Iterator构造函数
  • 静态方法：from()
  • 实例方法：drop()、every()、filter()、find()、flatMap()

此外，这些实例方法将提供手写代码，模拟其实现，以便更好地理解其工作原理。

一、Iterator基本介绍

1. 什么是迭代器？

**迭代器（Iterator）**是一个对象，它定义了一系列的值，并且提供了一个接口来按需依次访问这些值。迭代器协议为数据结构提供了一种统一的遍历机制。

迭代器协议

一个对象被认为是迭代器（iterator），当它实现了一个next()方法，该方法返回一个具有以下两个属性的对象：

  • value：当前遍历位置的值。
  • done：一个布尔值，表示遍历是否结束。
可迭代协议

一个对象被认为是可迭代对象（iterable），当它实现了[Symbol.iterator]方法，该方法返回一个新的迭代器。

2. 为什么使用迭代器？

迭代器为我们提供了以下优势：

  • 统一遍历接口：不同的数据结构可以通过迭代器进行统一遍历，方便使用for...of循环等语法。
  • 延迟执行：迭代器可以按需生成值，避免一次性加载大量数据，提高性能。
  • 可组合性：可以对迭代器进行链式操作，实现数据的流式处理。

3. 常见的可迭代对象

  • 数组（Array）
  • 字符串（String）
  • Map 和 Set
  • TypedArray
  • 函数的 arguments 对象
  • DOM 的 NodeList

二、Iterator构造函数

1. Iterator构造函数的引入

截至2023年10月，Iterator并不是一个内置的全局构造函数。然而，Iterator Helper Proposal（迭代器辅助器提案）正在讨论中，该提案旨在为迭代器添加一些实用的方法，使得迭代器的操作更加方便。

2. 迭代器辅助器提案

该提案建议为迭代器添加以下内容：

  • 静态方法：如Iterator.from()
  • 实例方法：如map()、filter()、take()、drop()、flatMap()等

这些方法类似于数组的方法，但它们作用于迭代器，具有惰性求值的特点。

3. 注意事项

  • 提案阶段：截至2023年10月，该提案处于Stage 2或Stage 3，尚未成为正式标准。
  • 兼容性：在提案正式通过并被各大浏览器和运行时实现之前，我们需要谨慎使用，可以借助Polyfill或第三方库来体验这些特性。

三、静态方法：Iterator.from()

1. 定义

Iterator.from()是一个静态方法，用于将一个可迭代对象或类数组对象转换为迭代器。

2. 语法

Iterator.from(iterable)
  • iterable：一个可迭代对象或类数组对象。

3. 用途

  • 将可迭代对象转换为迭代器，以便使用迭代器的各种方法进行操作。
  • 统一处理不同类型的数据源，如数组、字符串、生成器等。

4. 示例

// 将数组转换为迭代器
const array = [1, 2, 3];
const iterator = Iterator.from(array);

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: undefined, done: true }

5. 手写模拟实现

由于Iterator.from()尚未成为正式标准，我们可以手动实现一个IteratorFrom函数，模拟其功能：

function IteratorFrom(iterable) {
  if (typeof iterable[Symbol.iterator] !== 'function') {
    throw new TypeError('Object is not iterable');
  }
  const iterator = iterable[Symbol.iterator]();
  return iterator;
}

// 使用示例
const array = [1, 2, 3];
const iterator = IteratorFrom(array);

console.log(iterator.next()); // { value: 1, done: false }

四、实例方法

以下实例方法是Iterator Helper Proposal中提出的，这些方法为迭代器提供了类似数组的方法，但具有惰性求值的特点。

1. drop()

1.1 定义

drop()方法返回一个新的迭代器，跳过前n个元素，返回剩余的元素。

1.2 语法
iterator.drop(n)
  • n：要跳过的元素数量，必须为非负整数。
1.3 用途
  • 跳过不需要处理的前几个元素，提高数据处理的灵活性。
1.4 示例
const array = [1, 2, 3, 4, 5];
const iterator = Iterator.from(array).drop(2);

for (const value of iterator) {
  console.log(value); // 输出 3, 4, 5
}
1.5 手写模拟实现

由于drop()方法尚未标准化，我们可以为迭代器手动实现一个drop方法：

function drop(iterator, n) {
  let count = 0;
  return {
    next() {
      let result;
      while (count < n) {
        result = iterator.next();
        count++;
      }
      return iterator.next();
    },
    [Symbol.iterator]() {
      return this;
    }
  };
}

// 使用示例
const array = [1, 2, 3, 4, 5];
const iterator = drop(array[Symbol.iterator](), 2);

for (const value of iterator) {
  console.log(value); // 输出 3, 4, 5
}
1.6 注意事项
  • 如果n大于迭代器的长度，返回的迭代器将为空。
  • drop()不改变原始迭代器，返回一个新的迭代器。

2. every()

2.1 定义

every()方法测试是否所有元素都通过了提供的测试函数。它会遍历迭代器，直到测试函数返回false或迭代结束。

2.2 语法
iterator.every(callback)
  • callback：用于测试每个元素的函数，接受参数(value, index)。
2.3 用途
  • 检查迭代器中的所有元素是否满足某个条件。
2.4 示例
const array = [2, 4, 6];
const iterator = Iterator.from(array);

const allEven = iterator.every((value) => value % 2 === 0);
console.log(allEven); // true
2.5 手写模拟实现

我们可以手动实现一个every函数，接受迭代器和回调函数作为参数：

function every(iterator, callback) {
  let index = 0;
  let result;
  while (!(result = iterator.next()).done) {
    if (!callback(result.value, index++)) {
      return false;
    }
  }
  return true;
}

// 使用示例
const array = [2, 4, 6];
const iterator = array[Symbol.iterator]();

const allEven = every(iterator, (value) => value % 2 === 0);
console.log(allEven); // true
2.6 注意事项
  • every()会消耗迭代器，使用后迭代器将不能再次使用。
  • 一旦callback返回false，every()会立即返回false，不再继续遍历。

3. filter()

3.1 定义

filter()方法返回一个新的迭代器，包含所有通过测试函数的元素。

3.2 语法
iterator.filter(callback)
  • callback：用于测试每个元素的函数，接受参数(value, index)。
3.3 用途
  • 过滤迭代器中的元素，仅保留满足条件的元素。
3.4 示例
const array = [1, 2, 3, 4, 5];
const iterator = Iterator.from(array).filter((value) => value > 2);

for (const value of iterator) {
  console.log(value); // 输出 3, 4, 5
}
3.5 手写模拟实现

我们可以手动实现一个filter函数，接受迭代器和回调函数，返回一个新的迭代器：

function filter(iterator, callback) {
  let index = 0;
  return {
    next() {
      let result;
      while (!(result = iterator.next()).done) {
        if (callback(result.value, index++)) {
          return { value: result.value, done: false };
        }
      }
      return { value: undefined, done: true };
    },
    [Symbol.iterator]() {
      return this;
    }
  };
}

// 使用示例
const array = [1, 2, 3, 4, 5];
const iterator = filter(array[Symbol.iterator](), (value) => value > 2);

for (const value of iterator) {
  console.log(value); // 输出 3, 4, 5
}
3.6 注意事项
  • filter()返回一个新的迭代器，原始迭代器的状态不会改变。
  • 过滤操作是惰性的，只有在消费迭代器时才会执行。

4. find()

4.1 定义

find()方法遍历迭代器，返回第一个满足测试函数的元素。如果没有找到，返回undefined。

4.2 语法
iterator.find(callback)
  • callback：用于测试每个元素的函数，接受参数(value, index)。
4.3 用途
  • 查找迭代器中第一个满足条件的元素。
4.4 示例
const array = [1, 3, 5, 7];
const iterator = Iterator.from(array);

const found = iterator.find((value) => value > 4);
console.log(found); // 5
4.5 手写模拟实现

我们可以手动实现一个find函数，接受迭代器和回调函数：

function find(iterator, callback) {
  let index = 0;
  let result;
  while (!(result = iterator.next()).done) {
    if (callback(result.value, index++)) {
      return result.value;
    }
  }
  return undefined;
}

// 使用示例
const array = [1, 3, 5, 7];
const iterator = array[Symbol.iterator]();

const found = find(iterator, (value) => value > 4);
console.log(found); // 5
4.6 注意事项
  • find()会消耗迭代器，使用后迭代器将不能再次使用。
  • 一旦找到满足条件的元素，find()会立即返回，不再继续遍历。

5. flatMap()

5.1 定义

flatMap()方法首先对迭代器的每个元素调用映射函数，然后将结果展平为一个新的迭代器。

5.2 语法
iterator.flatMap(callback)
  • callback：对每个元素进行处理的函数，接受参数(value, index)，返回可迭代对象。
5.3 用途
  • 对每个元素进行映射，并将结果展平，适用于需要将嵌套结构拉平的场景。
5.4 示例
const array = [1, 2, 3];
const iterator = Iterator.from(array).flatMap((value) => [value, value * 2]);

for (const value of iterator) {
  console.log(value); // 输出 1, 2, 2, 4, 3, 6
}
5.5 手写模拟实现

我们可以手动实现一个flatMap函数，接受迭代器和回调函数：

function flatMap(iterator, callback) {
  let index = 0;
  let innerIterator = null;

  return {
    next() {
      while (true) {
        if (innerIterator) {
          const innerResult = innerIterator.next();
          if (!innerResult.done) {
            return { value: innerResult.value, done: false };
          } else {
            innerIterator = null;
          }
        }

        const outerResult = iterator.next();
        if (outerResult.done) {
          return { value: undefined, done: true };
        }

        const mapped = callback(outerResult.value, index++);
        if (typeof mapped[Symbol.iterator] !== 'function') {
          throw new TypeError('flatMap callback should return an iterable');
        }

        innerIterator = mapped[Symbol.iterator]();
      }
    },
    [Symbol.iterator]() {
      return this;
    }
  };
}

// 使用示例
const array = [1, 2, 3];
const iterator = flatMap(array[Symbol.iterator](), (value) => [value, value * 2]);

for (const value of iterator) {
  console.log(value); // 输出 1, 2, 2, 4, 3, 6
}
5.6 注意事项
  • flatMap()返回一个新的迭代器，原始迭代器的状态不会改变。
  • 展平操作是惰性的，只有在消费迭代器时才会执行。

五、迭代器辅助器的优势

1. 惰性求值

迭代器的操作都是惰性的，只有在真正需要时才会计算。这对于处理大量数据或无限序列非常有用。

2. 流式处理

可以对迭代器进行链式调用，实现类似于Unix管道的流式数据处理。

3. 内存效率

由于惰性求值，迭代器不会一次性加载所有数据，减少了内存占用，提高了性能。

六、完整示例

// 手动实现 Iterator.from、filter、drop、take

function IteratorFrom(iterable) {
  if (typeof iterable[Symbol.iterator] !== 'function') {
    throw new TypeError('Object is not iterable');
  }
  const iterator = iterable[Symbol.iterator]();
  return iterator;
}

function filter(iterator, callback) {
  let index = 0;
  return {
    next() {
      let result;
      while (!(result = iterator.next()).done) {
        if (callback(result.value, index++)) {
          return { value: result.value, done: false };
        }
      }
      return { value: undefined, done: true };
    },
    [Symbol.iterator]() {
      return this;
    }
  };
}

function drop(iterator, n) {
  let count = 0;
  return {
    next() {
      let result;
      while (count < n) {
        result = iterator.next();
        count++;
      }
      return iterator.next();
    },
    [Symbol.iterator]() {
      return this;
    }
  };
}

function take(iterator, n) {
  let count = 0;
  return {
    next() {
      if (count++ < n) {
        return iterator.next();
      } else {
        return { value: undefined, done: true };
      }
    },
    [Symbol.iterator]() {
      return this;
    }
  };
}

// 生成一个无限的自然数序列
function* naturalNumbers() {
  let n = 1;
  while (true) {
    yield n++;
  }
}

// 创建迭代器
const iterator = take(
  drop(
    filter(
      IteratorFrom(naturalNumbers()),
      (n) => n % 2 === 0 // 过滤偶数
    ),
    5 // 跳过前5个偶数
  ),
  5 // 取接下来的5个偶数
);

// 消费迭代器
for (const value of iterator) {
  console.log(value); // 输出 12, 14, 16, 18, 20
}

参考资料

《现代Javascript高级教程》Iterator 迭代器：简化集合遍历的利器
linwu的博客
07-04 1153
除了使用内置数据结构提供的迭代器之外，我们还可以自定义迭代器来遍历自定义数据结构。要实现一个自定义迭代器，我们需要定义一个具有next方法的对象，并且该对象的next方法需要返回一个包含value和done属性的对象。} , };在上面的示例中，我们定义了一个自定义数据结构myIterable，它包含一个数组data和一个自定义的迭代器对象。迭代器对象的next方法会依次返回数组中的元素，并在遍历结束时返回。
用java创建一个类cat_包含属性name在构造方法中进行初始化_JAVA练习题
weixin_31786973的博客
02-27 5994
1.创建一个类Cat包含属性name，在构造方法中进行初始化添加一个方法show()，用以打印name属性的值创建一个类CatTest，添加main方法，实现创建一个ArrayList，向其中添加三个Cat对象遍历该集合，获取集合中对象的个数，并且对每个Cat对象调用show()方法package com.zw.work;public class Cat {private String name;...
js中flat(), flatMap()方法
Pzg3240432140的博客
03-09 1031
深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回用法。
JS【详解】迭代器 Iterator（含可迭代对象、同步迭代器、异步迭代器等）
最新发布
朝阳39的博客
04-12 1147
/ 创建一个可迭代对象return {} else {// 使用 for...of 循环遍历自定义的可迭代对象。
js中Iterator
weixin_70989429的博客
06-03 721
处理集合中的每个项是很常见的操作。JavaScript 提供了许多迭代集合的方法，从简单的for循环到map()和filter()。
JS - iterator（迭代器）
m0_52545254的博客
09-08 6657
这样就有了四种数据集合，用户还可以组合使用它们，定义自己的数据结构，比如数组的成员是Map，Map的成员是对象。这个对象有 value 和 done 两个属性，value属性返回当前位置的成员，done属性是一个布尔值，表示遍历是否结束，即是否有必要再调用一次next ()。其次，Set结构遍历时，返回的是一个值。而Map结构遍历时，返回的是一个数组，该数组的两个成员分别是当前Map成员的键名和键值。实际上，这提供了一种简便机制，可以将任何部署了 Iterator 接口的数据结构，转为数组。
【JS】Iterator
qq_41298192的博客
07-17 753
/生成器函数声明function*generatorFn(){}//生成器函数表达式letgeneratorFn=function*(){}//作为对象字面量方法的生成器函数letfoo={}}//作为类实例方法的生成器函数classFoo{}}//作为类静态方法的生成器函数classBar{}}生成器的形式是一个函数，函数名称前面加一个星号（*）表示它是一个生成器箭头函数不能用来定义生成器函数。...
JS Iterator（迭代器）
我本可以
12-07 9274
任何数据结构只要部署 Iterator 接口，就可以完成遍历操作，即依次处理该数据结构的所有成员。 遍历器对象本质上，就是一个指针对象。指针对象的next方法，用来移动指针。 next方法返回一个对象，表示当前数据成员的信息。这个对象具有value和done两个属性，value属性返回当前位置的成员，done属性是一个布尔值，表示遍历是否结束，即是否还有必要再一次调用next方法。对于遍历器对象来说，done: false和value: undefined属性都是可以省略的。
iterator_adaptor.pdf
08-13
Boost库中的`iterator_adaptor`是一个强大的工具，用于创建自定义迭代器。这个模板类允许程序员以一种灵活的方式包装现有的迭代器类型，以适应特定的需求或扩展其功能。`iterator_adaptor`的设计理念是基于`iterator...
iterator_facade.pdf
08-14
这种方式允许用户在派生类中定义迭代器的行为，而无需创建和复制策略对象，减少了潜在的性能开销，并且支持自定义迭代器类型的构造函数，这对于实现具有特定行为的迭代器至关重要。 **基本的iterator_facade使用...
JavaScript实现Iterator模式实例分析
10-24
JavaScript中的Iterator模式是一种被广泛使用的设计模式，其目的是为了能够按顺序逐个访问容器中的元素，而不暴露容器的内部实现。此模式常用于数组和类数组对象，以便于在JavaScript这种没有显式接口定义的语言中，...
param_ctor_iterator.rar_Modified
09-14
2. **param_ctor_iterator.pass.c**：文件名中的"param_ctor_iterator"可能是指一个参数构造迭代器的实例，通常用于初始化或遍历一组参数。在C++中，迭代器是访问容器元素的一种方式，它允许程序员像操作数组一样...
js之Iterator
qq_39852145的博客
03-14 483
迭代器的应用 数据处理：汇总下面对象中的数字 let a = { b: { c: [ '1', '2', '3' ], d: [ '4', '5', '6', '7' ], e: [ '8', '9',
JavaScript之迭代器Iterator
weixin_63712639的博客
09-02 347
JavaScript之迭代器Iterator
JavaScript的迭代器（iterator）与可迭代对象（iterable）
qq_53432433的博客
08-21 1022
深入了解JavaScript中的迭代器以及可迭代对象的原理，以及如何手写迭代器，如何将一个不可迭代的对象变为可迭代等等
JS的迭代器
一步一个脚印，踏实努力，向着目标前进
06-27 3497
在JavaScript中，迭代器（Iterator）是一种遍历任何可迭代对象（Iterable）的通用接口。迭代器是ES6规范中引入的一种新的数据类型，用于遍历各种数据结构，包括数组、对象、Map、Set等。在语言层面上，迭代器可以被看做一个有next方法的对象，每次调用next方法都可以返回一个值对象（Value）和一个布尔值（Done），表示是否遍历结束。其中，Value代表当前迭代项的取值，Done代表迭代是否结束。
js 迭代器
木子小姐
07-11 1185
迭代器：迭代器是一个对象，这个对象允许对它的值集合进行遍历，并保持任何必要的状态以便能够跟踪到当前遍历的位置。 当迭代器用于有限的集合时，当遍历完所有的值并且没有多余的值可迭代时，在调用next()方法会抛出StopIteration 生成器： 任何使用关键字yield的函数都称为“生成器函数”。生成器函数通过yield返回值。这些函数中可以使用return来终止函数的执行而不带任何返回...
JavaScript的Iterator认识
白菜的博客
05-08 178
遍历器（Iterator） 遍历器（Iterator）就是这样一种机制。它是一种接口，为各种不同的数据结构提供统一的访问机制。任何数据结构只要部署Iterator接口，就可以完成遍历操作（即依次处理该数据结构的所有成员）。 Iterator 的作用有三个： 为各种数据结构，提供一个统一的、简便的访问接口； 使得数据结构的成员能够按某种次序排列； ES6创造了一种新的遍历命令for…of循环，Iterator接口主要供for…of消费。 遍历过程： 创建一个指针对象，指向当前数据结构的起始位置。也就是说
JS版设计模式--Iterator
descire
11-09 384
迭代模式(Iterator) var Iterator = function () { var data = [1,2,3,4,5], index = 0, length = data.length; return { hasNext: function () { return index < length;
js flatmap
08-24
flatMap是JavaScript中的一个数组方法，它通过应用一个回调函数来运行数组中的每个元素，并将回调函数的结果展平成一个新的数组。 使用flatMap方法的语法如下： ```javascript let newArray = arrayObject.flatMap(callback, thisArg); ``` 其中，arrayObject是要操作的数组，callback是应用于数组中每个元素的回调函数，thisArg是可选的，表示在callback中使用的this值。 实际场景中，flatMap方法可以用于将一个二维数组展平为一维数组，或者在字符串分割之后将结果展平为一个字符串数组。例如，下面的代码展示了如何使用flatMap方法将一个包含多个句子的数组转换为一个包含所有单词的数组： ```javascript let sentences = ["JavaScript Array flatMap()", " ", "is", " ", "Awesome"]; let words = sentences.flatMap(s => s.split(' ')); console.log(words); ``` 运行以上代码，输出结果为：["JavaScript", "Array", "flatMap()", "is", "Awesome"]，即将每个句子分割成单词，并将结果展平为一个数组。 #### 引用[.reference_title] - *1* [【JavaScript中数组的flatMap方法的详细介绍】](https://blog.youkuaiyun.com/m0_37873510/article/details/125101910)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* *3* [【JavaScript 教程】第六章 数组17—flatMap() ：对每个元素执行映射函数并将结果展平...](https://blog.youkuaiyun.com/snsHL9db69ccu1aIKl9r/article/details/123058916)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

It'sMyGo

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值