您现在的位置是:首页 > Javascript
当前栏目
for of 和 for in 的区别
2023-03-31 10:43:08 时间
for of 和 for in 的区别
1.共性
for of
和 for in
都是用来遍历的属性
2.区别
for...in
语句用于遍历数组或者对象的属性(对数组或者对象的属性进行循环操作)。for in
得到对对象的key
或数组,字符串的下标for of
和forEach
一样,是直接得到值for of
不能用于对象
1.两者对比例子(遍历对象)
const obj = {
a: 1,
b: 2,
c: 3
}
for (let i in obj) {
console.log(i) //输出 : a b c
}
for (let i of obj) {
console.log(i) //输出: Uncaught TypeError: obj is not iterable 报错了
}
说明: for in
和 for of
对一个obj对象
进行遍历,for in 正常的获取了对象的 key值,分别打印 a、b、c,而 for of却报错了。
2.两者对比例子(遍历数组)
const arr = ['a', 'b', 'c']
// for in 循环
for (let i in arr) {
console.log(i) //输出 0 1 2
}
// for of
for (let i of arr) {
console.log(i) //输出 a b c
}
3.特点
①. for in
特点
- for … in 循环返回的值都是数据结构的 键值名(即下标)。
- 遍历对象返回的对象的key值,遍历数组返回的数组的下标(key)。
- for … in 循环不仅可以遍历数字键名,还会遍历原型上的值和手动添加的其他键。
- 特别情况下, for … in 循环会以看起来任意的顺序遍历键名
- for in 的
常规属性
和排序属性
在ECMAScript规范中定义了 「数字属性
应该按照索引值⼤⼩
升序排列,字符串属性
根据创建时的顺序
升序排列。」在这⾥我们把对象中的数字属性称为「排序属性」
,在V8中被称为 elements,字符串属性就被称为「常规属性」
, 在V8中被称为 properties。
function Foo() {
this[100] = 'test-100'
this[1] = 'test-1'
this["B"] = 'bar-B'
this[50] = 'test-50'
this[9] = 'test-9'
this[8] = 'test-8'
this[3] = 'test-3'
this[5] = 'test-5'
this["A"] = 'bar-A'
this["C"] = 'bar-C'
}
var bar = new Foo()
for(key in bar){
console.log(`index:${key} value:${bar[key]}`)
}
//输出:
index:1 value:test-1
index:3 value:test-3
index:5 value:test-5
index:8 value:test-8
index:9 value:test-9
index:50 value:test-50
index:100 value:test-100
index:B value:bar-B
index:A value:bar-A
index:C value:bar-C
总结一句: for in 循环特别适合遍历对象。
①. for of
特点
- for of 循环用来获取一对键值对中的值,而 for in 获取的是 键名
- 一个数据结构只要部署了 Symbol.iterator 属性, 就被视为具有 iterator接口, 就可以使用 for of循环。
- for of 不同与 forEach, 它可以与 break、continue和return 配合使用,也就是说 for of 循环可以随时退出循环。
相关文章
- TiDB Binlog 组件正式开源
- 使用Visual Studio Code对Node.js进行断点调试
- 推荐!数据可视化的十种优秀JavaScript图表库
- Node.js在复杂集成场景下占据统治地位的五个理由
- 玩转Node.js单元测试
- Node.js中内存泄漏分析
- Angular对React:一场关于Web开发者支持率的史诗对决
- 热点推荐:什么是后端开发?
- 谈谈Spring boot 启动层面的开发
- 使用NodeJS将文件或图像上传到服务器
- 编写React组件的最佳实践
- JavaScript MV*框架最值得关注的七个亮点
- 前端开发指南:如何利用PHP Cake框架构建应用
- 基于React与Vue后,移动开源项目Weex如何定义未来
- NodeJS和C++之间的类型转换
- jQuery中的常用到的三十九个技巧
- 官宣|Google Developers中国网站发布!
- NodeJS和C++之间的类型转换
- .NET Core首例Office开源跨平台组件(NPOI Core)
- 如何写出漂亮的React组件