ES6遍历器 生成器 学习整理
遍历器[迭代器](Iterator)
就是这样一种机制。它是一种接口,为各种不同的数据结构提供统一的访问机制。任何数据结构只要部署 Iterator 接口,就可以完成遍历操作(即依次处理该数据结构的所有成员)。
Iterator 的作用有三个:
1、是为各种数据结构,提供一个统一的、简便的访问接口;
2、是使得数据结构的成员能够按某种次序排列;
3、是 ES6 创造了一种新的遍历命令for...of循环,Iterator 接口主要供for...of消费。
示例代码:
//迭代器示例
function newIterator(arr) {
let index = 0;
return {
next:()=>{
if(index<arr.length){
return {value:arr[index++]}
}
return {value:'无数据值'}
}
}
}
const nit=newIterator(['第一次','第二次','第三次']);
console.log( nit.next().value)
console.log( nit.next().value)
console.log( nit.next().value)
console.log( nit.next().value)
console.log( nit.next().value)
/**
输出结果
第一次
第二次
第三次
无数据值
无数据值
**/
给某一实例增加迭代器
Symbol.iterator属性本身是一个函数,就是当前数据结构默认的遍历器生成函数。执行这个函数,就会返回一个遍历器。至于属性名Symbol.iterator,它是一个表达式,返回Symbol对象的iterator属性,这是一个预定义好的、类型为 Symbol 的特殊值,所以要放在方括号内
Symbol 是 ES6 引入了一种新的原始数据类型Symbol,表示独一无二的值
const obj = {
[Symbol.iterator] : function () {
return {
next: function () {
return {
value: 1,
done: true
};
}
};
}
};
生成器函数 Generator
生成器函数语法可以理解为对迭代器简化,为了更便捷的使用迭代器而出现的生成器函数。用来达到语法层面的代码精简;
Generator 可以看作是数据结构,更确切地说,可以看作是一个数组结构,因为 Generator 函数可以返回一系列的值,这意味着它可以对任意表达式,提供类似数组的接口。
示例代码
function* helloWorldGenerator() {
yield 'hello';
yield 'world';
return 'ending';
}
var hw = helloWorldGenerator();
/** 执行结果
hw.next()
// { value: 'hello', done: false }
hw.next()
// { value: 'world', done: false }
hw.next()
// { value: 'ending', done: true }
hw.next()
// { value: undefined, done: true }
**/
for...of循环可以自动遍历 Generator 函数时生成的Iterator对象,且此时不再需要调用next方法。
ES6遍历器 生成器 学习整理的更多相关文章
- ES6学习笔记(十三)Iterator遍历器和for...of循环
1.概念 遍历器(Iterator)就是这样一种机制.它是一种接口,为各种不同的数据结构提供统一的访问机制.任何数据结构只要部署 Iterator 接口,就可以完成遍历操作(即依次处理该数据结构的所有 ...
- 【前端】【javascript】es6中的遍历器接口Iterator
好久没发文章啦-.-为了证明我还活着,我决定从笔记里面抓一篇还算不乱比较像文章的发出来... 这些笔记是我在学es6的时候断断续续记录的,最近会一份一份整理陆陆续续发出来,顺便也自己再看一遍.我学习e ...
- ES6的 Iterator 遍历器到底是什么?
这节课要讲的是ES6中的Iterator. for...of为啥不遍历Object对象 第十三节我们讲了简单又实用的for...of,我们可以使用它来遍历数组,字符串,Set和Map结构,但是有没有发 ...
- ES6的Iterator遍历器
JS表示集合的对象主要有Array.Set.Object.Map,在以前,遍历它们需要使用2种不同的方法,而现在,JS提出了Iterator机制,可以给不同的数据结构提供统一的遍历方法,就是for…o ...
- Spring IOC设计原理解析:本文乃学习整理参考而来
Spring IOC设计原理解析:本文乃学习整理参考而来 一. 什么是Ioc/DI? 二. Spring IOC体系结构 (1) BeanFactory (2) BeanDefinition 三. I ...
- ES6迭代器和生成器
一.迭代器 JavaScript 原有的表示"集合"的数据结构,主要是数组(Array)和对象(Object),ES6 又添加了Map和Set.这样就需要一种统一的接口机制,来处理 ...
- 疑问:Iterator 遍历器和数据集合各种遍历方法的区别
https://es6.ruanyifeng.com/#docs/iterator Iterator(遍历器)的概念 Iterator 接口主要供for...of消费 Iterator 的遍历过程是: ...
- ES6中Map数据结构学习笔记
很多东西就是要细细的品读然后做点读书笔记,心理才会踏实- Javascript对象本质上就是键值对的集合(Hash结构),但是键只能是字符串,这有一定的限制. 1234 var d = {}var e ...
- HttpClient学习整理
HttpClient简介HttpClient 功能介绍 1. 读取网页(HTTP/HTTPS)内容 2.使用POST方式提交数据(httpClient3) 3. 处理页面重定向 ...
随机推荐
- [VS] - EntityFrameworkCore 2.0 安装失败 之解决
背景 在 Visual Studio 2017 中,使用 Nuget 包管理器安装 EntityFrameworkCore 2.0 失败.切换至程序包控制器管理台,查看 Error Message: ...
- hadoop常见问题收集
hadoop 搭建 常用命令记录 快捷键安装在/user/local/bin目录下 nano 文件名 ctrl + k 剪切一行 ctrl + o 保存并重命名,不重命名直接enter ctrl + ...
- 在CentOS7上安装OpenJDK1.8 & OracleJDK1.8
安装OpenJDK1.8 : 1.检查当前机器是否有自带的JDK rpm -qa |grep java rpm -qa |grep jdk rpm -qa |grep gcj 2.如果没有 则跳至安装 ...
- Linux 基础 目录介绍
/bin 存放二进制可执行文件(ls cat clear)等等 ,常用基础命令在这个目录下 /etc 存放系统管理和配置文件 如 passwd 用 ...
- nginx与php配置用户问题
当配置nginx的nginx.conf 时,可参照如下配置: server { listen 80; server_name www.advancephp2017.com; access_log lo ...
- Linux权限管理:ACL 权限
1.ACL 是什么 ACL的全称是 Access Control List (访问控制列表) ,一个针对文件/目录的访问控制列表.它在UGO权限管理的基础上为文件系统提供一个额外的.更灵活的权限管理机 ...
- Codeforces Round #415 (Div. 1) (CDE)
1. CF 809C Find a car 大意: 给定一个$1e9\times 1e9$的矩阵$a$, $a_{i,j}$为它正上方和正左方未出现过的最小数, 每个询问求一个矩形内的和. 可以发现$ ...
- Vue自定义指令和自定义过滤器
一.自定义指令: 自定义指令分为两种:全局自定义指令和局部自定义指令 全局指令指所有组件都可以使用,局部指令是只有在当前组件中才可以使用. 如,我们现在有个需求,当一个输入框获取焦点时,显示出一个di ...
- apply 和 call 的用法
apply的用法 语法 func.apply(thisArg, [argsArray]) thisArg 可选的.在func函数运行时使用的this值.请注意,this可能不是该方法看到的实际值:如果 ...
- javascript中bind()、call()、apply()的使用
一直以来对bind().apply().call()这三个方法都模模糊糊的,现在有时间详细的看看这三个方法,并记录下来. bind() 参考文档:https://developer.mozilla.o ...