ES6 Iterator

1、概述

Iterator 的作用有三个:一是为各种数据结构,提供一个统一的、简便的访问接口;二是使得数据结构的成员能够按某种次序排列;三是 ES6 创造了一种新的遍历命令for...of循环,Iterator 接口主要供for...of循环

2、Iterator 接口

ES6 的有些数据结构原生具备 Iterator 接口(比如数组),即不用任何处理,就可以被for...of循环遍历。原因在于,这些数据结构原生部署了Symbol.iterator属性,另外一些数据结构没有(比如对象)。凡是部署了Symbol.iterator属性的数据结构,就称为部署了遍历器接口。调用这个接口,就会返回一个遍历器对象。

原生具备 Iterator 接口的数据结构如下。

  • Array
  • Map
  • Set
  • String
  • TypedArray
  • 函数的 arguments 对象
  • NodeList 对象

3、只要某个数据结构部署了 Iterator 接口,就可以对它使用扩展运算符,将其转为数组。

let arr = [...iterable];

4、for...of

JavaScript 原有的for...in循环,只能获得对象的键名,不能直接获取键值。ES6 提供for...of循环,允许遍历获得键值。

var arr = [‘a‘, ‘b‘, ‘c‘, ‘d‘];

for (let a in arr) {
  console.log(a); // 0 1 2 3
}

for (let a of arr) {
  console.log(a); // a b c d
}
  •  Set 结构和 Map 结构=遍历的顺序是按照各个成员被添加进数据结构的顺序。其次,Set 结构遍历时,返回的是一个值,而 Map 结构遍历时,返回的是一个数组,该数组的两个成员分别为当前 Map 成员的键名和键值。
  • entries() 返回一个遍历器对象,用来遍历[键名, 键值]组成的数组。对于数组,键名就是索引值;对于 Set,键名与键值相同。Map 结构的 Iterator 接口,默认就是调用entries方法。
时间: 2024-10-18 20:17:45

ES6 Iterator的相关文章

ES6—— iterator和for-of循环

Iterator 遍历器的作用:为各种数据结构,提供一个同意的,简便的访问接口.是的数据结构的成员能够按某种次序排列.ES6 新增了遍历命令 for...of 循环,Iterator接口主要供 for...of 消费. 1.手写Iterator接口. const arr=[ 1,2,3 ]; function iterator(arr){ let index=0; return { return index<arr.length?{value:arr[index++],done:false}:{

ES6(Iterator 和 for...of 循环)

Iterator 和 for...of 循环 1.什么是 Iterator 接口 Iterator 接口功能:用一种相同办法的接口让不同的数据结构得到统一的读取命令的方式 2.Iterator的基本用法 见代码 3.for...of for...of 循环就是不断调用Iterator 接口来达到这种形式 一.Iterator 接口介绍 1.数组调用Iterator 接口,数组内部已实现,直接调用即可,false代表还有下一步,true 代表结束 2.自定义Iterator 接口(先遍历 star

ES6 Iterator for...of

区别 (1)传统for循环:语法不够简洁 (2)ES5 forEach循环:不能正确响应break,continue,return (3)for...in循环:为普通对象设计,不适于遍历数组 可遍历对象 实现了[Symbol.Interator]方法的对象,例如数组,绝大多数类数组(NodeList对象),字符串(正确识别 32 位 UTF-16 字符),Map,Set.普通对象不能通过for...of遍历 深入理解 for...of循环首先调用集合的[Symbol.Interator]()方法

Javascript 设计模式系统讲解与应用

第1章 课程介绍学习设计模式的必要性,课程包含的知识点,课程安排,学习前提1-1 导学 第2章 面向对象讲解javascript中的面向对象的概念,包括 ES6 class 语法.UML 类图.以及面向对象三要素2-1 搭建开发环境12-2 搭建开发环境22-3 搭建开发环境32-4 搭建开发环境42-5 什么是面向对象2-6 面向对象-继承2-7 面向对象-封装2-8 面向对象-多态2-9 面向对象-应用举例2-10 面向对象-总结2-11 UML类图1-介绍2-12 UML类图2-关系2-1

nodejs入门API之url模块+querystring模块

关于URL的一些基础内容 URL模块的API解析 URL的参数URLSearchParams类 querystring模块 一.关于URL的一些基础内容 1.1 定义: 在WWW上,每一信息资源都有统一的且在网上唯一的地址,该地址就叫URL(Uniform Resource Locator,统一资源定位符),它是WWW的统一资源定位标志,就是指网络地址. 1.2 URL的组成部分:(以下面这个URL为例) http://www.baidu.com:8080/news/index.asp?boar

JavaScript-迭代器模式

迭代器模式 顺序访问一个集合 使用者无需知道集合内部结构(封装) jQuery 示例 <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Document</title> </head> <body> <p>jquery each</p> <p>jquery each</p>

ES6中的迭代器(Iterator)和生成器(Generator)

前面的话 用循环语句迭代数据时,必须要初始化一个变量来记录每一次迭代在数据集合中的位置,而在许多编程语言中,已经开始通过程序化的方式用迭代器对象返回迭代过程中集合的每一个元素 迭代器的使用可以极大地简化数据操作,于是ES6也向JS中添加了这个迭代器特性.新的数组方法和新的集合类型(如Set集合与Map集合)都依赖迭代器的实现,这个新特性对于高效的数据处理而言是不可或缺的,在语言的其他特性中也都有迭代器的身影:新的for-of循环.展开运算符(...),甚至连异步编程都可以使用迭代器 本文将详细介

es6笔记5^_^set、map、iterator

一.set 1.基本用法 数据结构Set类似于数组,但是成员的值都是唯一的,没有重复的值. let s = new Set(); [2,3,5,4,5,2,2].map(x => s.add(x)) for (let i of s) {console.log(i)}// 2 3 5 4 //Set函数可以接受一个数组作为参数,用来初始化. var items = new Set([1,2,3,4,5,5,5,5]); console.log(items); // set object conso

ES6 之 Set数据结构和Map数据结构 Iterator和for...of循环

ECMAScript 6 入门 Set数据结构 基本用法 ES6提供了新的数据结构Set.它类似于数组,但是成员的值都是唯一的,没有重复的值. Set本身是一个构造函数,用来生成Set数据结构. var s = new Set(); [2, 3, 5, 4, 5, 2, 2].map(x => s.add(x)); for (let i of s) { console.log(i); } // 2 3 5 4 上面代码通过add方法向Set结构加入成员,结果表明Set结构不会添加重复的值. 向S