一个数据结构只要部署了Symbol.iterator属性就能使用 for...of遍历...运算符 操作

 

Object身上没有Symbol.iterator,当直接使用时会报错

        let obj = {
0: 'a',
1: 'b',
2: 'c',
} console.log([...obj])//报错obj is not iterable
     在没有Symbol.iterator方法下运行
let obj = {
0: 'a',
1: 'b',
2: 'c',
} for(let p of obj){
console.log(p);//TypeError: obj is not iterable
}

  

Array身上天生具备Symbol.iterator

        let arr = [1,2,3,4];

        console.log([...arr]);//(4) [1, 2, 3, 4]
数组,天生具备Symbol.iterator方法所以可以使用

而我们Object需要用到...运算符for of遍历怎么办呢

如果我们要使用它的话,Object身上需要有一个Symbol.iterator属性代码如下:

  let obj = {
0: 'a',
1: 'b',
2: 'c',
length: 3,
[Symbol.iterator]: function () {
// index用来记遍历圈数
let index = 0;
let next = () => {
return {
value: this[index],
done: this.length == ++index
}
}
return {
next
}
}
} // console.log(obj.length)
console.log([...obj]);//(2) ["a", "b"] for(let p of obj){
console.log(p) //"a" "b"
}

  

ES6-Symbol.iterator 迭代器的更多相关文章

  1. Es6 Symbol.iterator

    Symbol.iterator 为每一个对象定义了默认的迭代器.该迭代器可以被 for...of 循环结构使用. --描述 当需要迭代一个对象的时候(比如在 for...of 循环的开始时),它的 @ ...

  2. ES6笔记(6)-- Set、Map结构和Iterator迭代器

    系列文章 -- ES6笔记系列 搞ES6的人也是够无聊,把JS弄得越来越像Java.C++,连Iterator迭代器.Set集合.Map结构都出来了,不知道说什么好... 一.简单使用 1. iter ...

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

    前面的话 用循环语句迭代数据时,必须要初始化一个变量来记录每一次迭代在数据集合中的位置,而在许多编程语言中,已经开始通过程序化的方式用迭代器对象返回迭代过程中集合的每一个元素 迭代器的使用可以极大地简 ...

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

    用循环语句迭代数据时,必须要初始化一个变量来记录每一次迭代在数据集合中的位置,而在许多编程语言中,已经开始通过程序化的方式用迭代器对象返回迭代过程中集合的每一个元素 迭代器的使用可以极大地简化数据操作 ...

  5. ES6入门十:iterator迭代器

    迭代模式 ES6迭代器标准化接口 迭代循环 自定义迭代器 迭代器消耗 一.迭代模式 迭代模式中,通常有一个包含某种数据集合的对象.该数据可能存在一个复杂数据结构内部,而要提供一种简单的方法能够访问数据 ...

  6. ES6 iterator 迭代器

    iterator使用TypeScript 的描述: interface Iterable { [Symbol.iterator]() : Iterator, } interface Iterator ...

  7. ES6的Iterator,jquery Fn

    ES6的Iterator对象详解 Iterator实现原理 创建一个指针对象,指向当前数据结构的起始位置.也就是说,遍历器对象本质上,就是一个指针对象. 第一次调用指针对象的next方法,可以将指针指 ...

  8. [js高手之路] es6系列教程 - 迭代器,生成器,for...of,entries,values,keys等详解

    接着上文[js高手之路] es6系列教程 - 迭代器与生成器详解继续. 在es6中引入了一个新的循环结构for ....of, 主要是用来循环可迭代的对象,那么什么是可迭代的对象呢? 可迭代的对象一般 ...

  9. Symbol.iterator 和 for of

    Symbol.iterator 和 for of 是es6的新特性 可以为对象设置 自己的迭代器 首先介绍我们的for of var arr = [1,2,3,8,33] for (var i of ...

  10. ES6中的迭代器、Generator函数以及Generator函数的异步操作

    最近在写RN相关的东西,其中涉及到了redux-saga ,saga的实现原理就是ES6中的Generator函数,而Generator函数又和迭代器有着密不可分的关系.所以本篇博客先学习总结了ite ...

随机推荐

  1. 新手入门:python的pip安装(二)

    pip的安装以及使用pip安装包 —–安装python的时候勾选了下载pip,不知道为什么没下载.然后就偷懒想着需要哪个包再单独去下载就好了,然后!!!每个包都会出点小问题,导致我这个初学者有三天不想 ...

  2. 一文学会 TypeScript 的 82% 常用知识点(下)

    一文学会 TypeScript 的 82% 常用知识点(下) 前端专栏 2019-11-23 18:39:08     都已经 9021 年了,TypeScript(以下简称 TS)作为前端工程师不得 ...

  3. IT兄弟连 Java语法教程 流程控制语句 分支结构语句5

    5  switch-case条件语句 Java中的第二种分支控制语句时switch语句,switch语句提供了多路支持,因此可以使程序在多个选项中进行选择.尽管一系列嵌套if语句可以执行多路测试,然而 ...

  4. CentOS 7 firewalld详解,添加删除策略

    一.CentOS7中firewall防火墙 修改防火墙配置文件之前,需要对之前防火墙[/etc/firewalld/zones/public.xml]做好备份 重启防火墙后,需要确认防火墙状态和防火墙 ...

  5. spring-boot-starter-web排除自带的logback依赖

    <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring- ...

  6. Spring框架的相关介绍

    Spring是一个开源轻量级的框架,它的核心是控制反转(IOC)和面向切面编程(AOP). 作为业务层框架的spring能够很好地整合表现层跟持久层. IOC:将类的创建和依赖关系写到配置文件里,可以 ...

  7. centos查找文件及文件内容

    1.查找文件 find / -name 'filename' 2.查找文件夹(目录) find / -name 'path' -type d 3.查找内容 find . | xargs grep -r ...

  8. 总结了Python中的22个基本语法

    "人生苦短,我用Python".Python编程语言是最容易学习.并且功能强大的语言.只需会微信聊天.懂一点英文单词即可学会Python编程语言.但是很多人声称自己精通Python ...

  9. H5 移动端 键盘遮挡焦点元素解决方案

    前言 最近在做 webapp,遇到了很多移动端兼容的问题,其中一个问题就是:输入框触发 focus 后,键盘弹出,然后遮住了输入框. 然后在Android和IOS上,这个问题的表现形式不一样,而原生键 ...

  10. C# Dictionary增加的方法

    1.简单的函数,实现Dictionary如果有就替换,没有就增加的功能. /// <summary>        /// Dictionary增加的方法        /// </ ...