js中的in和of循环

在JavaScript中，in 和 of 是两个用于循环和遍历的不同操作符，但它们的使用场景和含义有所不同。

in 操作符

in 操作符用于检查对象是否包含某个属性。它返回一个布尔值，表明对象自身属性中（不包括原型链中的属性）是否具有指定的属性。

const obj = { a: 1, b: 2, c: 3 };

if ('a' in obj) {
  console.log('obj 包含属性 a'); // 输出：obj 包含属性 a
}

if ('d' in obj) {
  console.log('obj 包含属性 d');
} else {
  console.log('obj 不包含属性 d'); // 输出：obj 不包含属性 d
}

虽然 in 可以用于遍历对象的属性，但它通常不是遍历对象属性的首选方法，因为它不保证属性的顺序。通常，我们会使用 for...in 循环来遍历对象的属性。

const obj = { a: 1, b: 2, c: 3 };

for (const key in obj) {
  console.log(key, obj[key]); // 遍历并输出属性名和属性值
}

需要注意的是，for...in 循环也会枚举其原型链上的属性。如果你只想遍历对象自身的属性，你可以使用 Object.prototype.hasOwnProperty() 方法来过滤掉原型链上的属性。

of 操作符

of 操作符与 for...of 循环一起使用，用于遍历可迭代对象（如数组、Map、Set、字符串、TypedArray、函数的 arguments 对象等等）的值。

const arr = [1, 2, 3];

for (const value of arr) {
  console.log(value); // 输出数组的每个元素
}

const str = 'hello';

for (const char of str) {
  console.log(char); // 输出字符串的每个字符
}

const map = new Map([['a', 1], ['b', 2]]);

for (const [key, value] of map) {
  console.log(key, value); // 输出Map的每个键值对
}

for...of 循环直接提供可迭代对象中的值，而不是像 for...in 那样提供键名。这使得 for...of 在处理数组和类似集合的数据结构时更加直观和方便。

总结来说，in 主要用于检查对象是否包含某个属性，而 of 主要用于遍历可迭代对象的值。在循环遍历数据时，应该根据数据结构选择合适的方法。