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. element-ui Upload 上传获取当前选择的视频时长

    <el-upload class="upload-demo" ref="vidos" :action="URL+'/api/post/file' ...

  2. JavaScript 之 String 对象

    String 对象 之前学习的是 基本数据类型 String 类型,现在讨论的是 String对象(包装类型). String的特点:字符串的不可变性. var str = 'abc'; str = ...

  3. jq 实现切换菜单选中状态

    点击导航菜单,切换选中状态 效果: 思路:首先获取选中的URL,再通过正则判断是否相同,相同就加上相应的属性,不相同就去除相应的属性. html代码 <div class="layui ...

  4. Appium的测试简单流程

    1.环境的搭建:jdk,SDK,appium,手机模拟器(夜神模拟器) 2.appium的运作流程图: 图中的流程步骤简单来说是: 1.测试脚本写入appium: 2.appium创建连接,将脚本利用 ...

  5. php根据二维数组中的某一元素相等,另一个元素相加

    二维数组:$taskData Array ( [0] => Array ( [area] => 1 [winsFlag] => 7 [count] => 3 ) [1] =&g ...

  6. Emmagee的基本使用

    Emmagee的基本使用 注意:目前最新版本为2.5.1:由于谷歌限制仅支持安卓7.0以下版本: 一.Emmagee介绍 Emmagee是一个简单易上手的Android性能监测工具,主要用于监测单个A ...

  7. HTML那些标签已废弃,被代替

    表单:cellpadding,cellspacing属性:已废弃, 替代者: table { border-collapse:collapse; } table, td, th { border:1p ...

  8. php单例型(singleton pattern)

    搞定,吃饭 <?php /* The purpose of singleton pattern is to restrict instantiation of class to a single ...

  9. 开发基础之牛逼哄哄的 Lambda 表达式,简洁优雅就是生产力

    什么是Lambda? 我们知道,对于一个Java变量,我们可以赋给其一个“值”. 如果你想把“一块代码”赋给一个Java变量,应该怎么做呢? 比如,我想把右边那块代码,赋给一个叫做aBlockOfCo ...

  10. destoon系统开发-最新利用浏览器的cookie 做历史浏览记录

      注意: 代码 放在要显示的为 (一般放在详情页),注意本教程不入库,直接利用浏览器的 cookie 缓存判断    <!--历史浏览记录 S--> <div class=&quo ...