for in 和 for of 的区别

141 阅读1分钟

遍历Object

for-of

var obj = {
  a: 1,
  b: [],
  c: function () {}
};
for (var key of obj) {
   console.log(key);
}
// 出错:
// Uncaught TypeError: obj is not iterable

for-in

var obj = {
  a: 1,
  b: [],
  c: function () {}
};
for (var key in obj) {
   console.log(key);
}
// 结果是:
// a
// b
// c

遍历数组

for-in

var arr = [3, 5, 7];
for (var i in arr) {
   console.log(i);
}
// 结果是:
// 0
// 1
// 2

for-of

var arr = [3, 5, 7];
for (var i of arr) {
   console.log(i);
}
// 结果是:
// 3
// 5
// 7

总结

  • for-of 无法遍历 不可迭代对象
  • 可迭代对象包括: Array,Map,Set,String,TypedArray,arguments等等

  • for-of 遍历的是值,for-in遍历的是key
  • 遍历其他可迭代对象

    Map

    for-of

    let iterable = new Map([["a", 1], ["b", 2], ["c", 3]]);
     
    for (let entry of iterable) {
      console.log(entry);
    }
    // ["a", 1]
    // ["b", 2]
    // ["c", 3]
    

    for-in

    let iterable = new Map([["a", 1], ["b", 2], ["c", 3]]);
     
    for (let entry in iterable) {
      console.log(entry);
    }
    // 啥都不输出
    

    Set

    for-of

    let iterable = new Set([1, 1, 2, 2, 3, 3]);
     
    for (let value of iterable) {
      console.log(value);
    }
    // 1
    // 2
    // 3
    

    for-in

    let iterable = new Set([1, 1, 2, 2, 3, 3]);
     
    for (let value in iterable) {
      console.log(value);
    }
    // 啥都不输出
    

    小结

    for in遍历的是数组的索引(即键名),而for of遍历的是数组元素值

    for in总是得到对象的key或数组、字符串的下标

    for of总是得到对象的value或数组、字符串的值