详解for...in和for...of的区别
1 前言
for...in
和for...of
都是JavaScript
中遍历数据的方法,让我们来了解一下他们的区别。
2,for...in
for...in
是为遍历对象属性而构建的,它以任意顺序遍历一个对象的除Symbol
以外的可枚举属性,可用break
或者throw
跳出
语法:
for (variable in object) {
// 在此执行代码
}
例子:
let obj = {
name: '张三',
age: 18
}
for(let item in obj) {
console.log(item)
}
// 输出 name age
在JavaScript
中,数组也是对象的一种,所以数组也是可以使用for...in
遍历
let arr = ['a', 'b', 'c']
for(let item in arr) {
console.log(item)
}
// 输出 0 1 2
3,for...of
for...of
语句在可迭代对象上创建一个迭代循环,调用自定义迭代钩子,并为每个不同属性的值执行语句(包括Array
,Map
,Set
,String
,TypedArray
,arguments
等等,不包括Object
),可用break
或者throw
跳出。
语法:
for (variable of 可迭代对象) {
// 操作语句
}
例子:
let arr = ['a', 'b', 'c']
let obj = {
name: '张三',
age: 18,
sex: '男'
}
for (let i of arr) {
console.log(i)
}
// 输出 a b c
for (let i of obj) {
console.log(i)
}
// 报错 obj is not iterable (obj不是可迭代的)
4,区别
无论是for...in
还是for...of
都是迭代一些东西。它们之间的主要区别在于它们的迭代方式
-
for...in
语句以任意顺序迭代对象的可枚举属性 -
for...of
语句遍历可迭代对象定义要迭代的数据
下面列出遍历Array
时候,for...in
和for...of
的区别:
let arr = ['a', 'b', 'c']
Array.prototype.ufo = '张三'
for(let item in arr) {
console.log(item)
}
// 输出 0 1 2 ufo
for(let item of arr) {
console.log(item)
}
// 输出 a b c
上例,通过Array.prototype
添加了ufo
属性,由于继承和原型链,所以arr
也继承了ufo
属性,属于可枚举属性,所以for...in
会遍历出来,而for...of
则不会。
如果看了觉得有帮助的,我是@上进的鹏多多,欢迎 点赞 关注 评论;END
公众号
往期文章
- 使用nvm管理node.js版本以及更换npm淘宝镜像源
- 超详细!Vue-Router手把手教程
- vue中利用.env文件存储全局环境变量,以及配置vue启动和打包命令
- 微信小程序实现搜索关键词高亮
- 超详细!Vue的九种通信方式
- 超详细!Vuex手把手教程
个人主页
接受失败,但不选择放弃!