for-in 和 for-of

date
Dec 27, 2023
slug
for-in-vs-for-of
status
Published
tags
Interview
summary
for in vs for of
type
Post

一、 for...in

说明：

for...in 语句以任意顺序迭代一个对象的 [ 除Symbol 以外的] 可枚举属性，包括继承的可枚举属性。
这里重点突出任意顺序和继承的可枚举属性， 任意顺序表明for... in 不适合迭代一个关注索引顺序的Array。
针对原型上的可枚举属性，for...in 也可以将其遍历出来，如下：
var triangle = { a: 1, b: 2, c: 3 };

function ColoredTriangle() {
  this.color = "red";
}

ColoredTriangle.prototype = triangle;

var obj = new ColoredTriangle();

for (var prop in obj) {
    console.log(`obj.${prop} = ${obj[prop]}`);
}

//obj.color = red
//obj.a = 1
//obj.b = 2
//obj.c = 3

for (var prop in obj) {
  if (obj.hasOwnProperty(prop)) {
    console.log(`obj.${prop} = ${obj[prop]}`);
  }
}

// Output:
// "obj.color = red"
可以使用hasOwnProperty 方法来判断当前属性是否存在当前对象上，这样过滤掉继承的可枚举属性。
如果使用for... in 遍历数组，则获取的是数组的索引：
let arr = [3,4,5,,6,7]

for(const a in arr){
	console.log(a, arr[a])
}
 //0 3
 //1 4
 //2 5
 //4 6
 //5 7

⚠️注意

使用for...in 迭代一个不能迭代的数据类型时，for...in 并不会报错，也不会阻止后续代码的运行。
let arr = 123
for(const a in arr){
	console.log(a, arr[a])
}
console.log('后续代码执行')

// 后续代码执行

二、 for...of

说明：

for...of 语句在可迭代对象上创建一个迭代循环，调用自定义迭代钩子，并为每个不同属性的值执行语句。
for...of 能够遍历的都是可迭代对象，可迭代对象包括Array,Map, Set, String, arguments对象等等。一个对象实现了可迭代协议，它就是一个可迭代对象。可迭代对象有一个[Symbol.iterator] 函数属性，这个属性返回一个带有next 函数属性的对象。
for...of 迭代的本质就是调用可迭代对象[Symbol.iterator]函数生成的对象的next 方法。它和for...in迭代对象是完全不一样的。
如果使用for...of 迭代一个非可迭代对象，则会报错：xxx is not iterable, 表示当前对象不是一个可迭代对象。

© xk_wan 2021 - 2024