for...in与for...of的区别

当前位置：知识管理交流 →『技术文档交流』

admin

2024年7月29日 1:20 本文热度 300

for...in与for...of都是循环语句，二者的区别是什么，分别对应什么使用场景呢？

遍历范围
遍历的值
遍历顺序
适用场景

遍历范围

for...in：可遍历对象的可枚举属性（enumerable=true），包括自身的与继承的；

const test = {  key1: 'value1',  key2: 'value2',  key3: 'value3'}for(const key in test) {  console.log('key：', key)}

输出：

若将key2置为不可枚举：

const test = {  key1: 'value1',  key2: 'value2',  key3: 'value3'}Object.defineProperty(test, 'key2', {  enumerable: false})for(const key in test) {  console.log('key：', key)}

输出：

for...of：用于遍历可迭代对象；

例1：数组

const test = [1, 2, 3]for(const value of test) {  console.log('value：', value)}

输出：

例2：字符串

const test = 'hello'for(const value of test) {  console.log('value：', value)}

输出：

遍历的值

for...in：遍历对象的键名（例子同上）；

for...of：遍历对象的键值（访问对象的Symbol.iterator属性）（例子同上）；

遍历顺序

for...in：遍历顺序是不确定的，会先遍历对象的整数属性，然后的遍历顺序依赖于对象属性的插入顺序；

for...of：遍历顺序依赖于对象迭代器定义的顺序，通常是元素插入的顺序。

适用场景

for...in：适用于遍历对象的属性，若用于遍历数组时需谨慎，因为也会遍历到原型链上的可枚举属性（见此篇文章）；

for...of：适用于遍历数组、字符串、Map等具有迭代器的可迭代对象，不可用于遍历普通对象，因为普通对象没有内置的迭代器；

遍历普通对象时：

const test = {  key1: 'value1',  key2: 'value2',  key3: 'value3'}for(const value of test) {  console.log('value：', value)}

输出：

查看普通对象的Symbol.iterator：

const test = {  key1: 'value1',  key2: 'value2',  key3: 'value3'}console.log(test[Symbol.iterator])

输出：

可见，普通对象没有内置迭代器。

查看字符串的Symbol.iterator：

const test = 'hello'console.log(test[Symbol.iterator])

输出：

可见，字符串是具有迭代器的可迭代对象。

该文章在 2024/7/29 18:03:31 编辑过

关键字查询

区别

正在查询...

点晴ERP是一款针对中小制造业的专业生产管理软件系统,系统成熟度和易用性得到了国内大量中小企业的青睐。

点晴PMS码头管理系统主要针对港口码头集装箱与散货日常运作、调度、堆场、车队、财务费用、相关报表等业务管理，结合码头的业务特点，围绕调度、堆场作业而开发的。集技术的先进性、管理的有效性于一体，是物流码头及其他港口类企业的高效ERP管理信息系统。

点晴WMS仓储管理系统提供了货物产品管理,销售管理,采购管理,仓储管理,仓库管理,保质期管理,货位管理,库位管理,生产管理,WMS管理系统,标签打印,条形码,二维码管理,批号管理软件。

点晴免费OA是一款软件和通用服务都免费，不限功能、不限时间、不限用户的免费OA协同办公管理系统。