首页 > web前端 > js教程 > 正文

ES6中Iterator接口的代码示例讲解

不言
发布: 2018-10-29 15:18:20
转载
1979 人浏览过

本篇文章给大家带来的内容是关于ES6中Iterator接口的代码示例讲解,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

es6中,操作某些数据结构(array object map set)时,怎么用一个统一的方法操作,Iterator接口实现了这样的功能

1.Iterator在数组中的应用

{
    let arr = ['hello', 'world'];
    // 数组内部实现了iterator接口,所以直接调用[Symbol.iterator]()
    let map = arr[Symbol.iterator]();
    console.log(map.next()); // {value: "hello", done: false}
    console.log(map.next()); // {value: "world", done: false}
    console.log(map.next()); // {value: undefined, done: true}
    // value 表示数组元素,done表示循环是否有下一步状态,true:没有下一步了,false:循环没有结束
}
登录后复制
登录后复制

2.自定义Iterator接口

{
    // object没有内置iterator接口,自定义iterator接口,让obj也可以使用for...of
    let obj = {
        start: [1,2,3],
        end: [4,5,6],
        // 声明iterator接口方法
        [Symbol.iterator]() {
            // 先遍历start,再遍历end
            let arr = this.start.concat(this.end);
            let index = 0;
            // 返回next()
            return {
                next() {
                    if (index < arr.length) {
                        return {
                            value: arr[index++],
                            done: false
                        }
                    } else {
                        return {
                            value: arr[index++],
                            done: true
                        }
                    }
                }
            }
        }
    };
    // for...of 实现的原理就是不断调用Iterator接口
    // 通过 for...of 验证接口是否配置成功,如果没有配置成功,object就无法使用 for...of循环
    for (let key of obj) {
        console.log(key); // 1 2 3 4 5 6
    }
}
登录后复制
登录后复制

3.for...of循环

{
    // 数组内部实现了iterator接口,所以可以直接使用for...of循环
    let arr = ['hello', 'world'];
    for (let value of arr) {
        console.log(value); // hello world
    }
}
登录后复制
登录后复制

                                               








ican                                                                                                ES6中Iterator接口的代码示例讲解26                                                                                                发布于                                                超级有温度的代码                                                                                                                                                                                                

                                                   1 天前发布                                                                                            

【ES6入门13】:Iterator

  • 前端

  • es6

  • javascript

                                               14 次阅读                                                 ·                                                 读完需要 6 分钟                                                                                    



                           0                        

                                                                                                                                           


es6中,操作某些数据结构(array object map set)时,怎么用一个统一的方法操作,Iterator接口实现了这样的功能

1.Iterator在数组中的应用

{
    let arr = ['hello', 'world'];
    // 数组内部实现了iterator接口,所以直接调用[Symbol.iterator]()
    let map = arr[Symbol.iterator]();
    console.log(map.next()); // {value: "hello", done: false}
    console.log(map.next()); // {value: "world", done: false}
    console.log(map.next()); // {value: undefined, done: true}
    // value 表示数组元素,done表示循环是否有下一步状态,true:没有下一步了,false:循环没有结束
}
登录后复制
登录后复制

2.自定义Iterator接口

{
    // object没有内置iterator接口,自定义iterator接口,让obj也可以使用for...of
    let obj = {
        start: [1,2,3],
        end: [4,5,6],
        // 声明iterator接口方法
        [Symbol.iterator]() {
            // 先遍历start,再遍历end
            let arr = this.start.concat(this.end);
            let index = 0;
            // 返回next()
            return {
                next() {
                    if (index < arr.length) {
                        return {
                            value: arr[index++],
                            done: false
                        }
                    } else {
                        return {
                            value: arr[index++],
                            done: true
                        }
                    }
                }
            }
        }
    };
    // for...of 实现的原理就是不断调用Iterator接口
    // 通过 for...of 验证接口是否配置成功,如果没有配置成功,object就无法使用 for...of循环
    for (let key of obj) {
        console.log(key); // 1 2 3 4 5 6
    }
}
登录后复制
登录后复制

3.for...of循环

{
    // 数组内部实现了iterator接口,所以可以直接使用for...of循环
    let arr = ['hello', 'world'];
    for (let value of arr) {
        console.log(value); // hello world
    }
}
登录后复制
登录后复制

               

  • ES6中Iterator接口的代码示例讲解


你可能感兴趣的



评论                                                    

默认排序                        时间排序



载入中...

显示更多评论


以上是ES6中Iterator接口的代码示例讲解的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
来源:segmentfault.com
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板