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

99 阅读1分钟

for...in...

  1. 获取对象的键名,获取不到键值
  2. 所有可枚举的属性
  3. 可以中途跳出循环
var arr = ['a', 'b', 'c', 'd'];
    arr.foo = "a"
for (let a in arr) {  
    console.log(a); // 0 1 2 3 foo
}

for...of...

  1. 获取对象的键值
  2. 只能返回具有数字索引的属性,后面手动添加进去的属性不生效
  3. 可以中途跳出循环
var arr = ['a', 'b', 'c', 'd'];
arr.foo = "a"

for (let a of arr) {
  console.log(a); // a b c
}

for...of...不能循环普通对象,但是可以改造一下

var obj = {
    a:'1',
    b:'2'
};

for (let key of Object.keys(obj) ) {
  console.log(key+":"+obj[key]); // a b c
}

其他遍历语法

  1. for()
  2. forEach()
  • 无法中途跳出循环
  1. for...in...
  • 可以获取键名
  • 如果键名为数字,这种方式遍历出来的键名为字符串
  • 还会遍历手动添加的其他键。包括原型上的键
  1. for...of... :可以算作最优解决方案了