2023.28 forEach 、for ... in 、for ... of有什么区别
大家好,我是wo不是黄蓉,今年学习目标从源码共读开始,希望能跟着若川大佬学习源码的思路学到更多的东西。
forEach 、for ... in 、for ... of有什么区别
forEach 数组提供的方法,只能遍历数组
遍历数组:for...in
key
返回数组下标;for...of
key
返回值;
遍历对象:for...in
key
返回对象的键;for...of
遍历对象报错,提示没有实现person对象不可迭代;
iterable
什么是可迭代对象?
简单来说就是可以使用for...of
遍历的对象,也就是实现了[Symbol.iterator]
迭代和循环有什么区别?
遍历强调把整个数据依次全部取出来,是访问数据结构的所有元素;
迭代虽然也是一次取出数据,但是并不保证取多少,需要调用next
方法才能获取数据,不保证把所有的数据取完,是遍历的一种形式。
有哪些对象是可迭代对象呢?
原生的可迭代对象 set map nodelist arguments 数组 string
迭代器是针对某个对象的,有些对象是自己继承了Symbol.Iterator,也可以实现自己的迭代器,必须要实现一个next方法,返回内容
{value:any,done:boolean}
实现对象的迭代器
如果要实现迭代器,需要实现[Symbol.Iterator]
是一个函数,这个函数返回一个迭代器
// let arr = ['a', 'b', 'c']
let person = {
name: 'a',
age: 18,
myIterator: function () {
var nextIndex = 0
return {
next: () => {
const array = Object.values(this)
return nextIndex < array.length
? { value: array[nextIndex ], done: false }
: { value: undefined, done: true }
}
}
}
}
let myIterator = person.myIterator()
console.log(person.myIterator())//{ next: [Function: next] }
console.log(myIterator.next())//{ value: 'a', done: false }
console.log(myIterator.next())//{ value: 18, done: false }
console.log(myIterator.next())//{ value: [Function: myIterator], done: false }
console.log(myIterator.next())//{ value: undefined, done: true }
{ value: undefined, done: true }
按道理实现了迭代器该对象就会变为可迭代对象了,可以使用for..of
遍历
但是执行后发现还是会提示Person不是可迭代的,是因为for..of
只能遍历实现了[Symbol.iterator]
接口的的对象,因此我们写的方法名要使用[Symbol.iterator]
修改后:
let person = {
name: 'a',
age: 18,
[Symbol.iterator]: function () {
var nextIndex = 0
return {
next: () => {
const array = Object.values(this)
return nextIndex < array.length
? { value: array[nextIndex ], done: false }
: { value: undefined, done: true }
}
}
}
}
//for..in
for (let key in person) {
console.log(key, person[key])
}
//for...of
for (let key of person) {
console.log(key)
}
//打印结果
name a
age 18
a
18
什么时候会用迭代器?
应用场景:可以参考阮一峰老师列举的例子
js语法:for ... of 展开运算符 yield 解构赋值
创建对象时:new map new set new weakmap new weakset
一些方法的调用:promise.all promise.race array.from
for in 和for of 迭代器、生成器(generator)
迭代器中断:
迭代器中定义return
方法在迭代器提前关闭时执行,必须返回一个对象
break return throw 在迭代器的return 方法中可以捕获到
let person = {
name: 'a',
age: 18,
[Symbol.iterator]: function () {
var nextIndex = 0
return {
next: () => {
const array = Object.values(this)
return nextIndex < array.length
? { value: array[nextIndex ], done: false }
: { value: undefined, done: true }
},
return: () => {
console.log('结束迭代')
return { done: true }
}
}
}
}
//for...of
for (let key of person) {
console.log(key)
if (key === 'a') break
}
//打印结果
a
结束迭代
结束:下节讲生成器
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhgahbeh
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
怎样阻止微信小程序自动打开
PHP中文网 06-13 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01