js中for..of..的使用和迭代器
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..的使用和迭代器的更多相关文章
- [js高手之路] es6系列教程 - 迭代器与生成器详解
什么是迭代器? 迭代器是一种特殊对象,这种对象具有以下特点: 1,所有对象都有一个next方法 2,每次调用next方法,都会返回一个对象,该对象包含两个属性,一个是value, 表示下一个将要返回的 ...
- [js高手之路] es6系列教程 - 迭代器,生成器,for...of,entries,values,keys等详解
接着上文[js高手之路] es6系列教程 - 迭代器与生成器详解继续. 在es6中引入了一个新的循环结构for ....of, 主要是用来循环可迭代的对象,那么什么是可迭代的对象呢? 可迭代的对象一般 ...
- 【面试篇】寒冬求职季之你必须要懂的原生JS(中)
互联网寒冬之际,各大公司都缩减了HC,甚至是采取了“裁员”措施,在这样的大环境之下,想要获得一份更好的工作,必然需要付出更多的努力. 一年前,也许你搞清楚闭包,this,原型链,就能获得认可.但是现在 ...
- js 中的yield
yield是什么 yield是ES6的新关键字,使生成器函数执行暂停,yield关键字后面的表达式的值返回给生成器的调用者.它可以被认为是一个基于生成器的版本的return关键字. yield关键字实 ...
- Js中Currying的应用
Js中Currying的应用 柯里化Currying是把接受多个参数的函数变换成接受一个单一参数的函数,并且返回接受余下的参数且返回结果的新函数的技术,是函数式编程应用. 描述 如果说函数式编程中有两 ...
- Js中函数式编程的理解
函数式编程的理解 函数式编程是一种编程范式,可以理解为是利用函数把运算过程封装起来,通过组合各种函数来计算结果.函数式编程与命令式编程最大的不同其实在于,函数式编程关心数据的映射,命令式编程关心解决问 ...
- 5.0 JS中引用类型介绍
其实,在前面的"js的六大数据类型"文章中稍微说了一下引用类型.前面我们说到js中有六大数据类型(五种基本数据类型 + 一种引用类型).下面的章节中,我们将详细讲解引用类型. 1. ...
- 【repost】JS中的异常处理方法分享
我们在编写js过程中,难免会遇到一些代码错误问题,需要找出来,有些时候怕因为js问题导致用户体验差,这里给出一些解决方法 js容错语句,就是js出错也不提示错误(防止浏览器右下角有个黄色的三角符号,要 ...
- JS中给正则表达式加变量
前不久同事询问我js里面怎么给正则中添加变量的问题,遂写篇博客记录下. 一.字面量 其实当我们定义一个字符串,一个数组,一个对象等等的时候,我们习惯用字面量来定义,例如: var s = &quo ...
随机推荐
- 【转载】C#中使用Insert方法往ArrayList集合指定索引位置插入新数据
ArrayList集合是C#中的一个非泛型的集合类,是弱数据类型的集合类,可以使用ArrayList集合变量来存储集合元素信息,在ArrayList集合操作过程中,可以使用ArrayList集合类的I ...
- Vue搭建脚手架1
Vue2.0搭建Vue脚手架(vue-cli) 此文章参考了网上一些前人的技术分享,自己拿过来总结一下.此文章是基于webpack构建的vue项目,并实现简单的单页面应用.其中利用到的相关技术会简单加 ...
- JavaScript 之 offset 、client、scroll
下面这三组是关于元素大小.位置相关的属性 一.offset 偏移量 1.offsetParent 该属性获取距离当前元素最近的定位父元素,如果没有定位父元素此时是 body 元素 2.offsetLe ...
- iOS 关于NavigationController返回的一些笔记
1.理解NavigationController返回机制 一般NavigationController下的子view只有一层或者有很多层,子view返回最顶层则可以直接用 [self.navigati ...
- Docker 安装环境(redis、mongodb、mysql等)
Docker下载地址 [ https://download.docker.com/win/stable/Docker%20Desktop%20Installer.exe ] 一.创建/启动 redis ...
- Docker 0x07: Docke 容器网络
目录 Docke 容器网络 Container Network Model (CNM) 具体项目中代码对象有哪些 Implementations实现的网络(直接英文版) Libnetwork incl ...
- mysql 的 docker image 使用(官方文档节选)
1.创建一个 mysql 实例: $ docker run --name some-mysql -e MYSQL_ROOT_PASSWORD=my-secret-pw -d mysql:tag 2.创 ...
- iis站点设置错误页面返回http状态码为404而不是302或其他
今天一位客户说网站错误页面返回的状态码是302而不是404,问ytkah要如何处理.这个应该是设置没有正确的原因.我们一步步来排查一下.1.首先打开iis管理器,左侧选择具体的站点,在右侧窗口中点击4 ...
- dump array
<?php //array_dump.php $a=array(); $a[]=1; $a[]=2; $a[]=3; $a[]=4; $a[]='a'; $a[]='b'; $a[]='c'; ...
- css实现input文本框的双边框美化
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...