ES6迭代器

说起迭代器, 那就要先了解迭代模式

迭代模式: 提供一种方法可以顺序获得聚合对象中的各个元素, 是一种最简单,

      也是最常见的设计模式,它可以让用户通过特定的接口寻访集合中的每一个元素

      而不用了解底层的实现。

迭代器 : 依照迭代模式的思想而实现,

    分为内部迭代器和外部迭代器,

内部迭代器: 本身是函数, 该函数内部定义好迭代规则,完全接手整个迭代过程

       外部只需要一次初始调用,如Array.prototype.forEach,  Jquery.each

外部迭代器: 本身是函数, 执行返回迭代对象,迭代下一个元素必须显示调用,

      调用复杂度增加,但灵活性增强。

我们主要来了解一下外部迭代器:

外部迭代器本身是一个函数, 执行这个函数就相当于启动了这个迭代器,

然后我们每次迭代需要手动调用next()方法,返回一个对象,

基于此我们来自己实现一个外部迭代器

const arr = [2,3,4];
function OuterIterator(o) {
    let curIndex = 0;
    let next = () => {
        return {
            value: o[curIndex],
            done: o.length === ++curIndex,
        }
    };
    return {
        next
    }
}
const oIt = OuterIterator(arr);
console.log(oIt.next());
console.log(oIt.next());
console.log(oIt.next());

结果:

我们为什么要用外部迭代器呢 ? 

想象一个场景, 后端给前端返回一个数组形式的数据, 前端通过for 循环遍历

       当业务变动时, 后端传给前端的不再是数组了, 而是一个对象又

      或者是一个Map/Set 结构的数据, 那前端的遍历代码就需要大规模重写。

所以我们要标准化迭代操作,

解决方案: ES6  引入Iterator, 部署在NodeLlist,  argument,  Array, Set, Map , 字符串

      等数据上的Symbol.iterator属性   , 使得这些数据是可迭代的, 并可进行

      for...of   ,    ...   ,  Array.from等操作。

这里插播一个内容Symbol:  js 第七种 基本数据结构

         特点: 唯一, 可作为对象属性, 有静态方法Symbol.iterator

Symbol如果传入的是对象的话,会隐式调用对象的toString() 方法,比如:

let os = Symbol({'name': 'liu'});
console.log(os);
let os2 = Symbol({'name': 'liu', toString() {
    return "我最帅"
    }});
console.log(os2);

我们重写了对象的toString方法, 结果:

回到主题, 原生有iterator接口的只有NodeLlist,  argument,  Array, Set, Map , 字符串等数据

对象上是没有iterator的, 所以它不能被迭代, 也不能进行for...of   ,    ...   ,  Array.from等操作

那我们要迭代对象怎么办呢 ? 

没错, 就是给它加上我们自己按照ES6规范写外部迭代器:

const obj = {
  0: 'liu',
  1: '18',
  2: 'man',
 }; console.log([...obj]);

直接用...操作符报错, obj 不可迭代

const obj = {
    0: 'liu',
    1: '18',
    2: 'man',
    length: 4,
    [Symbol.iterator] : function () {
        let curIndex = 0;
        let next = () => {
            return {
                value: this[curIndex],
                done: this.length === ++curIndex,
            }
        };
        return {
            next
        }
    }
};
console.log([...obj]);

结果:

obj必须是类数组, 就是属性是数字 , 且有length属性 才能这样写。

我们下一篇来讨论generator生成器, 它可以生成一个迭代对象。

转载于:https://www.cnblogs.com/LHLVS/p/10827901.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
ES6(Iterator)是一种新的遍历机制,它有两个核心特点。首先,是一个接口,通过Symbol.iterator方法来创建,并通过的next()方法来获取数据。其次,是用于遍历数据结构的指针,类似于数据库的游标。例如,我们可以使用来遍历数组。比如,对于数组\[20,30,50,20,50\],我们可以通过arr\[Symbol.iterator\]()来创建一个,然后使用的next()方法来逐个获取数组中的元素。\[1\] 除了数组,具备Iterator接口的数据结构都可以进行解构赋值和扩展运算符(...运算符)操作。例如,字符串也具备Iterator接口,我们可以使用扩展运算符将字符串转换为字符数组。比如,对于字符串'hello',我们可以使用\[...str\]来将其转换为字符数组\['h', 'e', 'l', 'l', 'o'\]。这是因为字符串是具备Iterator接口的数据结构,我们可以自定义来遍历字符串中的字符。\[2\] 除了数组和字符串,还有其他可代的数据结构,比如类型数组(TypedArray)。我们可以使用for...of循环来遍历这些可代的数据结构。例如,对于数组\["zero", "one", "two"\],我们可以使用for...of循环来逐个输出数组中的元素。\[3\] #### 引用[.reference_title] - *1* [ES6 Iterator](https://blog.csdn.net/weixin_49342009/article/details/122665011)[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^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [es6 iterator](https://blog.csdn.net/weixin_43443341/article/details/121417247)[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^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] - *3* [ES6 Iterator 详细介绍](https://blog.csdn.net/weixin_43856422/article/details/128290261)[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^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值