ECMAScript 6+ 新特性 ( 四 ) 迭代器 与 生成器

最新推荐文章于 2024-08-21 15:52:24 发布
最新推荐文章于 2024-08-21 15:52:24 发布
阅读量885 收藏 30
点赞数 23
分类专栏： web基础 javascript 文章标签： ecmascript javascript 开发语言 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yuanchun05/article/details/136268855
版权

2.14.迭代器

2.14.1.for…of

for...of 是 JavaScript ES6 引入的一种新的循环结构，，用于遍历可迭代对象（Iterable objects）的每个元素。

它可以自动调用目标对象的迭代器接口，并按顺序逐个访问集合中的每个值。

它可以用来遍历数组、Set、Map、某种类型的字符串、生成器对象（Generator object）以及其他实现了可迭代协议的对象。

2.14.1.1.用法
// 遍历数组
let numbers = [1, 2, 3, 4, 5];
for (let num of numbers) {
    console.log(num);
}

// 输出：
// 1
// 2
// 3
// 4
// 5

let names = [ '王小二', '李小三', '赵小四', '赵小四' ];
for (let name of names) {
    console.log(name);
}

// 输出：
// 王小二
// 李小三
// 赵小四
// 赵小四



// 遍历字符串
let str = 'hello';
for (let char of str) {
    console.log(char);
}

// 输出：
// 'h'
// 'e'
// 'l'
// 'l'
// 'o'


// 遍历 Set
let set = new Set([ '王小二', '李小三', '赵小四' ]);

for (let name of set) {
    console.log(name);
}

// 输出：
// 王小二
// 李小三
// 赵小四



// 遍历 Map
let map = new Map([['name', '王小二'], ['age', 30]]);
for (let [key, value] of map) {
    console.log(`Key: ${key}, Value: ${value}`);
}

// 输出：
// Key: name, Value: John
// Key: age, Value: 30

通过 for...of 循环，开发者可以更加简洁、直观地遍历多种数据结构

2.14.1.2.和 for...in 比较

for...of 和 for...in 都是 JavaScript 中的循环结构，但它们在用途和遍历对象的方式上有所区别：

const names = ['王小二','李不三','赵小四','刘小六'];

for(let i in names){
   console.log(i,  names[i])
}

for(let n of names){
    console.log(n);
}

for…of :

  • 用于遍历可迭代对象（Iterable objects），如数组、字符串、Set、Map、生成器函数（generator function）产生的序列等。
  • 它会直接遍历并返回数据结构中的实际值或内容。
  • 示例：
let arr = [1, 2, 3];
for (let value of arr) {
  console.log(value); // 输出：1, 2, 3
}

for…in:

  • 用于遍历对象（Object）自身的可枚举属性（不包括继承自原型链的属性）。
  • 它遍历的是对象的键名（key），而非键值。
  • 对于数组，使用 for...in 循环可以遍历到非数字索引的属性，这通常不是期望的行为，除非特别处理。
  • 示例：
let obj = { a: 1, b: 2, c: 3 };
for (let key in obj) {
  console.log(key); // 输出："a", "b", "c"
  console.log(obj[key]); // 输出：1, 2, 3
}

总结：

  • 如果需要遍历数组或其它可迭代对象的实际元素值，应使用 for...of。
  • 如果要遍历对象的所有自有可枚举属性名，则使用 for...in。但在遍历数组时，更推荐使用 for...of 或者数组的 forEach() 方法来避免意外包含非数值索引的属性。如果确实需要同时处理数组和其他对象属性，可能需要结合使用 for...of 和 Object.keys() 等方法。

2.14.2.迭代器

在 ECMAScript 6（ES6）中，迭代器（Iterator）是一种接口，它为不同的数据结构提供了一种统一的方式来遍历和访问集合中的元素。

迭代器是 JavaScript 中用于顺序访问集合内项目的一种机制。

2.14.2.1.说明

  1. Symbol.iterator：为了能够被迭代器遍历，一个对象需要在其自身上部署 Symbol.iterator 属性，

    ​ 这个属性的值是一个函数，被称为迭代器生成器，每次调用该函数都会返回一个新的迭代器对象。

  2. 调用函数创建一个指针对象，指向当前数据结构的起始位置

    第一次调用对象的 next 方法，指针自动指向数据结构的第一个成员

    接下来不断调用 next 方法，指针一直往后移动，直到指向最后一个成员

  3. 调用next()方法会返回一个包含两个属性的对象：value 和 done。

    • value 属性表示当前迭代位置的值。

    • done 属性是一个布尔值，如果为 true 表示迭代已结束，没有更多的元素可以迭代；

      若为 false，则表示还有更多值可以获取，并且 value 就是下一个要访问的值。

// Array
const names = ['王小二','李不三','赵小四','刘小六'];

let iterator = names[Symbol.iterator]();

//调用对象的next方法
console.log(iterator.next()); // {value: "王小二", done: false}
console.log(iterator.next()); // {value: "李不三", done: false}
console.log(iterator.next()); // {value: "赵小四", done: false}
console.log(iterator.next()); // {value: "刘小六", done: false}
console.log(iterator.next()); // {value: undefined, done: true}


// Map
let map2 = new Map([
    ['name', '王小二'],
    [123, 'abc'],
    [{ key: 'objectKey' }, 'Value for object key']
]);
let iterator = map2[Symbol.iterator]();
console.log(iterator.next()); // {value: ['name', '王小二'], done: false}
console.log(iterator.next()); // {value: [123, 'abc'], done: false}
console.log(iterator.next()); // {value: [{…}, 'Value for object key'] , done: false}
console.log(iterator.next()); // {value: undefined, done: true}

通过迭代器，开发者可以编写更加通用的算法，这些算法无需关心底层数据结构的具体实现，只要数据结构提供了迭代器接口即可遍历其内容。

同时，结合 for...of 循环和其他相关特性（如解构赋值），迭代器极大地简化了遍历操作的代码编写。

2.14.2.2.支持的类型

原生支持迭代器接口的数据类型包括但不限于：

  • Array
  • String
  • TypedArray
  • Map
  • Set
  • NodeList 等
2.14.2.3.自定义迭代器

定义对象, 但在调用 for…of 时 , 遍历对象中的数组

通常可以使用 friends.fs.forEach() , 但这样 直接暴露了 fs属性

通过 定义Symbol.iterator属性 返回对象

//声明一个对象
const friends = {
    name: "我的好朋友",
    fs: [
        '王小二','李小三','赵小四','刘小六'
    ],
    [Symbol.iterator]() {
        //索引变量
        let index = 0;
        //
        let _this = this;
        return {
            next: function () {
                if (index < _this.fs.length) {
                    const result = { value: _this.fs[index], done: false };
                    //下标自增
                    index++;
                    //返回结果
                    return result;
                }else{
                    return {value: undefined, done: true};
                }
            }
        };
    }
}

//遍历这个对象 
for (let v of friends) {
    console.log(v);
}

2.15. 生成器

在 ECMAScript 6 (ES6) 中，生成器（Generators）是一种特殊的迭代器生成函数，可以暂停执行并保存其上下文状态，之后可以恢复执行。

生成器通过 function* 关键字定义，

并使用 yield 表达式来产出值或表达式结果。

以下是一个简单的 ES6 生成器示例：

function* simpleGenerator() {
    yield 'one ';
    yield 'two';
    yield 'three';
}

let generator = simpleGenerator();
console.log(generator.next()); // 输出 {value: 'one ', done: false}
console.log(generator.next()); // 输出 {value: "two", done: false}
console.log(generator.next()); // 输出 {value: "three", done: false}
console.log(generator.next()); // 输出 {value: undefined, done: true} 因为已经没有更多的yield语句了

// 或者一次性获取所有产出值
for (let value of simpleGenerator()) {
    console.log(value);
}


/*
输出 :
one 
two
three
*/

在上述代码中，simpleGenerator() 是一个生成器函数，每次调用 next() 方法时，它都会从上次暂停的地方继续执行到下一个 yield 表达式，

并返回一个包含 { value: ..., done: ... } 的迭代器结果对象。当没有更多 yield 表达式时，done 属性将为 true，表示生成器已完成执行。

生成器在处理异步编程、遍历复杂数据结构以及创建迭代器等方面非常有用。

2.15.1.可以理解为程序的分隔符

function* simpleGenerator() {
    console.log("第一部分")
    yield 'one ';
    console.log("第二部分")
    yield 'two';
    console.log("第三部分")
    yield 'three';
    console.log("第四部分")
}

let generator = simpleGenerator();
// 第一部分
console.log(generator.next()); // 输出 {value: 'one ', done: false}
// 第二部分
console.log(generator.next()); // 输出 {value: "two", done: false}
// 第三部分
console.log(generator.next()); // 输出 {value: "three", done: false}
// 第四部分
console.log(generator.next()); // 输出 {value: undefined, done: true} 因为已经没有更多的yield语句了

// 
for (let value of simpleGenerator()) {
    console.log(value);
}
/*
输出 :
第一部分
one
第二部分
two
第三部分
three
第四部分
*/

2.15.2.next() 传参

function* simpleGenerator( arg ) {
    console.log("第一部分 : " + arg )
    let aaa = yield 'one ';
    console.log("第二部分 : " + aaa )
    let bbb = yield 'two';
    console.log("第三部分 : " + bbb )
    let ccc = yield 'three';
    console.log("第四部分 : " + ccc )
}

let generator = simpleGenerator('AAA');
// 第一部分 : AAA 
console.log(generator.next()); // 输出 {value: 'one ', done: false}
//next方法可以传入实参            // 第二部分 : BBB
console.log(generator.next('BBB')); // 输出 {value: "two", done: false}
// 第三部分 : CCC
console.log(generator.next('CCC')); // 输出 {value: "three", done: false}
// 第四部分 : DDD
console.log(generator.next('DDD')); // 输出 {value: undefined, done: true} 因为已经没有更多的yield语句了

2.15.3.解决回调嵌套

// 异步编程  文件操作 网络操作(ajax, request) 数据库操作
// 这里使用 setTimeout 函数模拟异步操作
// 1s 后控制台输出 111  2s后输出 222  3s后输出 333 
// 回调地狱(回调函数嵌套)
// setTimeout(() => {
//     console.log(111);
//     setTimeout(() => {
//         console.log(222);
//         setTimeout(() => {
//             console.log(333);
//         }, 3000);
//     }, 2000);
// }, 1000);

function one(){
    setTimeout(()=>{
        console.log(111);
        iterator.next();
    },1000)
}

function two(){
    setTimeout(()=>{
        console.log(222);
        iterator.next();
    },2000)
}

function three(){
    setTimeout(()=>{
        console.log(333);
        iterator.next();
    },3000)
}

function * simpleGenerator(){
    yield one();
    yield two();
    yield three();
}

//调用生成器函数
let iterator = simpleGenerator();
iterator.next();

2.15.4.回调传参

//模拟获取  用户数据  订单数据  商品数据 
function getUsers(){
    setTimeout(()=>{
        let data = '用户数据';
        //调用 next 方法, 并且将数据传入
        iterator.next(data);
    }, 1000);
}

function getOrders(){
    setTimeout(()=>{
        let data = '订单数据';
        iterator.next(data);
    }, 1000)
}

function getGoods(){
    setTimeout(()=>{
        let data = '商品数据';
        iterator.next(data);
    }, 1000)
}

function * simpleGenerator(){
    console.log('开始获取数据');
    let users = yield getUsers();
    console.log(users);
    let orders = yield getOrders();
    console.log(orders);
    let goods = yield getGoods();
    console.log(goods);
}

//调用生成器函数
let iterator = simpleGenerator();
iterator.next();
春哥的魔法书
关注
专栏目录
ECMAScript6 新特性范例大全
10-20
生成器允许创建迭代器，可以暂停和恢复执行： ```javascript function* fibonacci() { let a = 1, b = 1; while (true) { yield a; [a, b] = [b, a + b]; } } for (let n of fibonacci()) { if (n > ...
ECMAScript 2022 正式发布
ejinxian的专栏
07-08 2008
ECMAScript 2022 现已获得 ECMA International的批准。ECMAScript 是标准化的 JavaScript 语言，于 1997 年发布了第一版，现已发展成为世界上使用最广泛的通用编程语言之一。本 Ecma 标准定义了 ECMAScript 2022 Language，是 ECMAScript 语言规范的第 13 版。 ECMAScript 2022 主要包含内容有：参考：..................
ECMAScript版本对比：从ES1到ES2021
DevCorner的Pro技术博客
08-17 1857
通过对ECMAScript各个版本的对比，我们可以看到JavaScript语言的不断演进和改进。每个版本都带来了新的语法和功能，使开发人员能够更高效地编写代码。在选择使用哪个版本时，我们应该考虑项目的需求和目标平台的兼容性。较新的版本通常具有更多的功能和改进，但可能不被所有浏览器完全支持。在实际开发中，我们可以使用Babel等工具将较新版本的代码转换为较旧版本的代码，以确保在不同浏览器上的兼容性。总之，了解不同ECMAScript版本的特性和差异对于前端开发人员来说非常重要。
ECMAScript 2024 正式发布，新特性一览！
最新发布
ll_renlong的博客
08-21 1022
2024 年 6 月 26 日，第 127 届 ECMA 大会正式批准了 ECMAScript 2024 语言规范，这意味着它现在正式成为最新 ECMAScript 标准。下面就来看看 ECMAScript 2024 都有哪些新特性吧！resize正则表达式v标志。
盘点2022年ECMAScript新特性（Es13）
m0_62180235的博客
11-09 1024
摘取了11 Amazing New JavaScript Features in ES13
ECMAScript 2024 (ES15) 来啦！看看都有什么新功能吧！
LGD_Sunday的专栏
02-29 1167
ECMAScript语言规范每年更新一次，备受期待的ECMAScript 2024计划于2024年6月正式亮相。目前，ECMAScript 2024的候选版本已经发布，带来了一系列实用的新功能~~
ECMAScript 2023 正式发布，有哪些新特性？
qq_59015565的博客
06-29 509
在 JavaScript 中，通过find()和查找数组中的值是一种常见做法。// {v: 4}// 3如果要从数组的末尾开始遍历，就必须反转数组并使用上述方法。这样做就需要一个额外的数组操作。findLast()和的就解决了这一问题。语义。
ES6 迭代器与可迭代对象的实现
10-17
ES6（ECMAScript 2015）新增了迭代器（Iterator）和可迭代对象（Iterable）的概念，为处理集合数据提供了统一的遍历机制。这一部分的实现是现代JavaScript编程中的重要基础。在ES6中，迭代器被广泛应用于数组、集合...
2018最新高清ECMAScript 6入门
04-19
- 生成器函数通过`function*`定义，可以暂停和恢复执行，常用于异步控制流和迭代。 10. **Set 和 Map** - `Set`和`Map`数据结构提供了集合操作和键值对存储，弥补了数组和对象的一些不足。 11. ** WeakSet 和 ...
cursoECMAScript：关于Platzi的ECMAScript6 +课程的存储库
02-16
在"cursoECMAScript-master"这个压缩包中，可能包含的文件有课程笔记、代码示例、练习和测试，帮助学习者逐步掌握和应用这些新特性。通过学习这些内容，开发者可以提升自己的JavaScript技能，更好地适应现代Web开发...
详解ES6语法之可迭代协议和迭代器协议
08-28
ECMAScript 2015 中的可迭代协议和迭代器协议 ECMAScript 2015 中引入了两个重要的协议：可迭代协议和迭代器协议。这些协议允许 JavaScript 对象定义或定制它们的迭代行为，并提供了一种统一的访问机制来处理不同的...
2023款ECMAScript
奇舞周刊
05-22 1384
2023款ECMAScript新的数组apifindLast 反向迭代数组，并返回满足提供的测试函数的第一个元素的值, 如果没有找到返回undefinedconstisEven=(number)=>number%2===0; constnumbers=[1,2,3,4]; console.log(numbers.findLast(isEven));//4fi...
ECMAScript 2022 正式发布，有你了解过的吗？
高大志leo的博客
06-29 1761
目录前言正文一、总览二、详述1、Top-level await（顶层 await）2、Object.hasOwn()3、at()4、error.cause5、正则表达式匹配索引6、类总结2022年6月22日，第123届 ECMA 大会批准了 ECMAScript 2022 语言规范，这意味着它现在正式成为标准。下面就来看看 ECMAScript 2022 有哪些新特性，是否有你了解过的。1、Top-level await（顶层 await）2、Object.hasOwn()3、at()4、error.cau
快来看看ECMAScript 2024(ES13)有哪些新标准？，前端开发环境
2401_84097964的博客
04-06 993
面试题千万不要死记，一定要自己理解，用自己的方式表达出来，在这里预祝各位成功拿下自己心仪的offer。需要完整面试题的朋友可以点击蓝色字体免费获取jpg" />面试题千万不要死记，一定要自己理解，用自己的方式表达出来，在这里预祝各位成功拿下自己心仪的offer。需要完整面试题的朋友可以点击蓝色字体免费获取[外链图片转存中…(img-soECrG6w-1712342507831)][外链图片转存中…(img-KViVFdsY-1712342507831)]
Web前端最全ECMAScript 2024(ES10) 的新特性总结，前端开发规范文档
2401_84435768的博客
05-08 766
四轮技术面+一轮hr面结束，学习到了不少，面试也是一个学习检测自己的过程，面试前大概复习了 一周的时间，把以前的代码看了一下，字节跳动比较注重算法，面试前刷了下leetcode和剑指offer， 也刷了些在牛客网上的面经。大概就说这些了，写代码去了~祝大家都能收获大厂offer~开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】篇幅有限，仅展示部分内容String.trimStart()和String.trimEnd()：去掉开头结尾空格文本。
ECMAScript6入门上_emacscript，2024年最新2024大数据开发开发面试解答
m0_75012421的博客
04-16 735
以下是本篇文章正文内容一个常见的问题是，ECMAScript 和 JavaScript 到底是什么关系？ECMAScript 和 JavaScript 的关系是，前者是后者的规格，后者是前者的一种实现（另外的 ECMAScript 方言还有 JScript 和 ActionScript）。日常场合，这两个词是可以互换的。
ECMAScript 2023（ES14）中的所有新功能
08-15 908
时间的车轮又过去了一年，随之而来的是JavaScript的新官方版本：ECMAScript 2023，也被称为ECMAScript 14。记住，这会创建一个新数组，而不是修改原来的数组。关于规范的另一个要了解的事情是，它实际上是一个活动的文档，在语言在实际应用中使用时会不断发展。toSorted()具有与sort()相同的签名，但它创建一个新的数组，而不是在原数组上进行操作。ECMAScript规范是一份令人印象深刻的文档，既是开发人员和教育者的基本参考，也是JavaScript引擎实现者的官方技术规范。
【总结】1735- ECMAScript 2023 正式发布，有哪些新特性？
pingan8787
07-06 120
2023 年 6 月 27 日，第 125 届 ECMA 大会正式批准了 ECMAScript 2023 语言规范，这意味着它现在正式成为最新 ECMAScript 标准。下面就来看看 ECMAScript 2023 都有哪些新特性吧！全文概览：从头到尾搜索数组：findLast() 、findLastIndex()Hashbang 语法通过副本更改数组：toReversed()、toSorted...
【ES】2087- ECMAScript 2024 正式发布，新特性一览！
pingan8787
06-28 106
2024 年 6 月 26 日，第 127 届 ECMA 大会正式批准了 ECMAScript 2024 语言规范，这意味着它现在正式成为最新 ECMAScript 标准。下面就来看看 ECMAScript 2024 都有哪些新特性吧！Promise.withResolvers()Object.groupBy / Map.groupByString：isWellFormed() / toWellF...
深入理解ECMAScript6：迭代器与生成器
在ES6中，迭代器与生成器是两个重要的概念，它们为JavaScript提供了处理集合数据和实现高效内存管理的新方法。迭代器允许我们遍历任何可迭代对象，如数组、Set或Map，而生成器则是一种特殊的函数，能够生成一系列的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值