for..of是ES6中引入的新特性,它主要的作用是:循环一个可迭代的对象。

它可以循环遍历,数组、字符串、Set对象等等,先来看两个简单的例子:

遍历字符串

let str = 'Hello'
for (item of str) {
console.log(item) // 会依次打印H e l l o
}

遍历数组

let arr = [1,2,3,4,5]
for(arrItem of arr){
console.log(arrItem) // 会依次打印 1 2 3 4 5
}

遍历对象

let obj = {
x:10,
y:20
}
for(objItem of obj){
console.log(objItem)
}

其实遍历对象的时候,会报一个错误:“Uncaught TypeError: obj is not iterable” ,大概意思就是obj对象是一个不可迭代的对象,或者说它没有迭代器。

怎么办呢?那就给obj添加一个迭代器。

迭代器

接着上面的例子,我们给obj添加一个迭代器

obj[Symbol.iterator] = ()=>{

}

紧接着,我们要在方法里面去写一下迭代规则,就是说,你想怎么去迭代这对象。这个方法需要返回一个next方法,next方法里面,又需要返回一个对象,

并且这个对象里面需要有"done"属性,“done”的值为bool类型的值,它相当于一个条件(或者说是开关),

判断是否需要继续循环,值为true时,跳出循环;值为false继续下一次循环;看个例子:

let obj = {
x:10,
y:20
}
obj[Symbol.iterator] = ()=> {
return {
next(){
return {
done: false,
               value:2
}
}
}
} for(objItem of obj){
console.log(objItem)
}

上面这个例子,第一次循环的时候,返回{done:false,value:2},打印“2”,第二次、第三次.... done的值一直是false,会出现死循环,一直打印“2”,

我们知道,如果要跳出循环,done的值要等于true,所以,我们可以加一些条件,当把对象遍历完毕之后,跳出循环:

let obj = {
x:10,
y:20
}
obj[Symbol.iterator] = ()=> {
let keys = Object.keys(obj) //获取对象的key值
let len = keys.length
let n = 0
return {
next(){
if (n<len){ //继续循环
return {
done: false,
value: obj[keys[n++]] // 每次循环返回的值
}
} else { // 跳出循环
return {
done: true
}
} }
}
}
for(objItem of obj){
console.log(objItem) // 依次打印 10 20
}

总结:常见的循环方法有,for循环、map()、forEach()、filter()等等,可以发现,每个方法都有自己的规则,比如返回值什么的。

那么,我们可以通过迭代器,去自定义循环规则,通过迭代器,返回自己想要的结果。

js中for..of..的使用和迭代器的更多相关文章

  1. [js高手之路] es6系列教程 - 迭代器与生成器详解

    什么是迭代器? 迭代器是一种特殊对象,这种对象具有以下特点: 1,所有对象都有一个next方法 2,每次调用next方法,都会返回一个对象,该对象包含两个属性,一个是value, 表示下一个将要返回的 ...

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

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

  3. 【面试篇】寒冬求职季之你必须要懂的原生JS(中)

    互联网寒冬之际,各大公司都缩减了HC,甚至是采取了“裁员”措施,在这样的大环境之下,想要获得一份更好的工作,必然需要付出更多的努力. 一年前,也许你搞清楚闭包,this,原型链,就能获得认可.但是现在 ...

  4. js 中的yield

    yield是什么 yield是ES6的新关键字,使生成器函数执行暂停,yield关键字后面的表达式的值返回给生成器的调用者.它可以被认为是一个基于生成器的版本的return关键字. yield关键字实 ...

  5. Js中Currying的应用

    Js中Currying的应用 柯里化Currying是把接受多个参数的函数变换成接受一个单一参数的函数,并且返回接受余下的参数且返回结果的新函数的技术,是函数式编程应用. 描述 如果说函数式编程中有两 ...

  6. Js中函数式编程的理解

    函数式编程的理解 函数式编程是一种编程范式,可以理解为是利用函数把运算过程封装起来,通过组合各种函数来计算结果.函数式编程与命令式编程最大的不同其实在于,函数式编程关心数据的映射,命令式编程关心解决问 ...

  7. 5.0 JS中引用类型介绍

    其实,在前面的"js的六大数据类型"文章中稍微说了一下引用类型.前面我们说到js中有六大数据类型(五种基本数据类型 + 一种引用类型).下面的章节中,我们将详细讲解引用类型. 1. ...

  8. 【repost】JS中的异常处理方法分享

    我们在编写js过程中,难免会遇到一些代码错误问题,需要找出来,有些时候怕因为js问题导致用户体验差,这里给出一些解决方法 js容错语句,就是js出错也不提示错误(防止浏览器右下角有个黄色的三角符号,要 ...

  9. JS中给正则表达式加变量

    前不久同事询问我js里面怎么给正则中添加变量的问题,遂写篇博客记录下.   一.字面量 其实当我们定义一个字符串,一个数组,一个对象等等的时候,我们习惯用字面量来定义,例如: var s = &quo ...

随机推荐

  1. 【转载】C#中使用Insert方法往ArrayList集合指定索引位置插入新数据

    ArrayList集合是C#中的一个非泛型的集合类,是弱数据类型的集合类,可以使用ArrayList集合变量来存储集合元素信息,在ArrayList集合操作过程中,可以使用ArrayList集合类的I ...

  2. Vue搭建脚手架1

    Vue2.0搭建Vue脚手架(vue-cli) 此文章参考了网上一些前人的技术分享,自己拿过来总结一下.此文章是基于webpack构建的vue项目,并实现简单的单页面应用.其中利用到的相关技术会简单加 ...

  3. JavaScript 之 offset 、client、scroll

    下面这三组是关于元素大小.位置相关的属性 一.offset 偏移量 1.offsetParent 该属性获取距离当前元素最近的定位父元素,如果没有定位父元素此时是 body 元素 2.offsetLe ...

  4. iOS 关于NavigationController返回的一些笔记

    1.理解NavigationController返回机制 一般NavigationController下的子view只有一层或者有很多层,子view返回最顶层则可以直接用 [self.navigati ...

  5. Docker 安装环境(redis、mongodb、mysql等)

    Docker下载地址 [ https://download.docker.com/win/stable/Docker%20Desktop%20Installer.exe ] 一.创建/启动 redis ...

  6. Docker 0x07: Docke 容器网络

    目录 Docke 容器网络 Container Network Model (CNM) 具体项目中代码对象有哪些 Implementations实现的网络(直接英文版) Libnetwork incl ...

  7. mysql 的 docker image 使用(官方文档节选)

    1.创建一个 mysql 实例: $ docker run --name some-mysql -e MYSQL_ROOT_PASSWORD=my-secret-pw -d mysql:tag 2.创 ...

  8. iis站点设置错误页面返回http状态码为404而不是302或其他

    今天一位客户说网站错误页面返回的状态码是302而不是404,问ytkah要如何处理.这个应该是设置没有正确的原因.我们一步步来排查一下.1.首先打开iis管理器,左侧选择具体的站点,在右侧窗口中点击4 ...

  9. dump array

    <?php //array_dump.php $a=array(); $a[]=1; $a[]=2; $a[]=3; $a[]=4; $a[]='a'; $a[]='b'; $a[]='c'; ...

  10. css实现input文本框的双边框美化

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...