08 ES6的for...of和for...in的区别

在JavaScript中，for...in 和 for...of 是两种不同的循环结构，它们分别在不同的ECMAScript版本中被引入，并且具有不同的用途和特性。

for...in 循环（ES5）

for...in 是ECMAScript 5（ES5）中引入的，用于遍历对象的可枚举属性和数组的索引。它提供了一种方式来获取对象的键或数组的索引。

• 遍历数组：使用 for...in 遍历数组时，循环会提供数组的索引，而不是元素值。这意味着你可以通过索引来访问数组中的元素。

var arr = ['海绵宝贝', '天线把把', '宝宝巴士'];
for (var index in arr) {
    console.log(index); // 输出数组的索引：0, 1, 2
    console.log(arr[index] + '你好'); // 通过索引访问元素并输出
}

• 遍历对象：使用 for...in 遍历对象时，循环会提供对象的键，你可以通过键来访问对象的值。

var obj = { name: '海绵宝宝', age: 12, gender: '男' };
for (var key in obj) {
    console.log(obj[key]); // 输出对象的值
}

for...of 循环（ES6）

for...of 是ECMAScript 2015（ES6）中引入的，专门用于遍历可迭代对象的元素，如数组、字符串、Map、Set等。它提供了一种更直接的方式来获取元素值。

• 遍历数组：使用 for...of 遍历数组时，循环直接提供数组的元素值，而不需要使用索引。

var arr = ['海绵宝包', '天线包包', '宝宝巴士'];
for (var value of arr) {
    console.log(value, 'value'); // 直接输出数组的元素
}

• 遍历对象：for...of 不能直接用于遍历对象，因为对象不是可迭代的。尝试这样做会导致错误。

var obj = { name: '海绵宝宝', age: 12, gender: '男' };
for (var value of obj) {
    console.log(value); // 这将报错，因为对象不是可迭代的
}

相同点和不同点

• 相同点：

  • for...in 和 for...of 都可以用于遍历数组，但 for...in 提供索引，for...of 提供元素值。

• 不同点：

  • for...in 可以遍历对象，提供对象的键。
  • for...of 不能遍历对象，只能遍历可迭代对象，如数组。

结论

for...in 是ES5的特性，适用于遍历对象的键和数组的索引。for...of 是ES6的特性，提供了一种更现代和简洁的方式来遍历可迭代对象的元素。在选择使用哪种循环结构时，应根据你的具体需求和数据类型来决定。