翼度科技»论坛 编程开发 JavaScript 查看内容

JS中的for in和for of

6

主题

6

帖子

18

积分

新手上路

Rank: 1

积分
18
在JavaScript中, for...in 和 for...of 都是用于迭代循环的结构:
 
1. for...in 循环:
for...in 循环主要用于遍历对象的可枚举属性。这种循环不仅遍历对象自身的属性,还会遍历原型链上的可枚举属性。它的语法如下:
  1. for (variable in object) {
  2.   // 执行的代码
  3. }
复制代码
其中 variable 是属性名, object 是要遍历的对象。
注意:虽然 for...in 循环也可以用于遍历数组,但这并不推荐,因为它会遍历数组的所有可枚举属性,包括非索引属性和原型链上的属性。
 
示例:
  1. const obj = { a: 1, b: 2, c: 3 };
  2. for (const key in obj) {
  3.   console.log( ${key}: ${obj[key]} );
  4. }
  5. // 输出:
  6. // a: 1
  7. // b: 2
  8. // c: 3
复制代码
 

2.   for...of 循环:
for...of 循环用于遍历可迭代对象(例如数组、字符串、Map、Set等),这是ES6引入的新特性。它的语法如下:
  1. for (variable of iterable) {
  2.   // 执行的代码
  3. }
复制代码
其中 variable 是每次迭代时的当前元素, iterable 是要遍历的可迭代对象。
 
示例:
  1. const arr = [1, 2, 3];
  2. for (const value of arr) {
  3.   console.log(value);
  4. }
  5. // 输出:
  6. // 1
  7. // 2
  8. // 3
复制代码
 
 
  for...in 和 for...of 循环在JavaScript中具有不同的使用场景,它们之间的主要区别如下:
1.  遍历对象:
-    for...in :适用于遍历对象的可枚举属性,包括原型链上的属性。它会遍历对象自身的属性以及继承自原型链的可枚举属性。这对于处理对象属性时非常有用。
-    for...of :不适用于普通对象,因为它们不是可迭代的。如果需要遍历对象属性,建议使用 for...in 循环。
2.  遍历数组:
-    for...in :虽然可以用于遍历数组,但并不推荐。因为 for...in 会遍历所有可枚举属性,包括非索引属性和原型链上的属性。这可能导致意外的结果和性能问题。
-    for...of :推荐用于遍历数组,因为它只遍历数组的元素,不会遍历非索引属性或原型链上的属性。
3.  遍历其他可迭代对象(例如字符串、Map、Set):
-    for...in :不适用于遍历这些可迭代对象。
-    for...of :可以遍历这些可迭代对象,如字符串、Map、Set等。
4.  性能:
-    for...in :由于需要遍历对象的原型链,可能导致性能较差。
-    for...of :遍历可迭代对象时,性能较好。
 
总结:
-   使用 for...in 循环遍历对象的可枚举属性(包括原型链上的属性)。
-   使用 for...of 循环遍历可迭代对象,如数组、字符串、Map、Set等。
-   在处理数组时,尽量避免使用 for...in 循环,以防止意外的结果和性能问题。
 
在实际应用中,根据数据类型和所需操作来选择合适的循环结构。同时,还可以考虑使用其他迭代方法,如数组的 forEach 、 map 、 filter 等高阶函数。

来源:https://www.cnblogs.com/ronaldo9ph/p/17332209.html
免责声明:由于采集信息均来自互联网,如果侵犯了您的权益,请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容,谢谢合作!

举报 回复 使用道具