for in 循环详解

for…i 循环的作用

​​for...in​​​ 语句以任意顺序迭代一个对象的除 ​​Symbol​​ 以外的可枚举属性，包括继承的可枚举属性。

• ​​for...in​​ 是为遍历对象属性而构建的，不建议与数组一起使用
• 在处理有​​key-value​​​ 数据，用于获取对接的​​key​​，也就是获取键值
• 只遍历可枚举属性。像​​Array​​​ 和​​Object​​​ 使用内置构造函数所创建的对象都会继承自​​Object.prototype​​​ 和​​String.prototype​​ 的不可枚举属性，这种是无法遍历的

语法：​​for (variable in object)​​

• ​​variable​​​：在每次迭代时，​​variable​​ 会被赋值为不同的属性名。
• ​​object​​​：非​​Symbol​​ 类型的可枚举属性被迭代的对象。

使用示例

遍历一个带有 ​​Symbol​​ 的对象

const obj = {
  a: 'a',
  b: 'b',
  c: 'c',
  [Symbol('a')]: '我是 symbol',
}

for (let key in obj) {
  console.log('obj.' + key + ' = 我是' + obj[key])
}

结果如图：​​Symbol​​ 并没有出现在遍历的结果当中

遍历带有不可枚举的属性

如下面的代码所示，我们在 ​​obj​​​ 上加了两个属性，​​enumerableTrue​​​ 可枚举，​​notEnumerableTrue​​ 不可枚举

const obj = {
  a: 'a',
  b: 'b',
  c: 'c',
  [Symbol('a')]: '我是 symbol',
}

Object.defineProperty(obj, 'enumerableTrue', {
  value: 'enumerableTrue',
  enumerable: true
})

Object.defineProperty(obj, 'notEnumerableTrue', {
  value: 'not-enumerableTrue',
  enumerable: false
})

for (let key in obj) {
  console.log('obj.' + key + ' = 我是' + obj[key])
}

结果如图所示：​​notEnumerableTrue​​ 不可枚举的属性，没有在遍历的结果中

继承的枚举示例

如下代码，我们创建了一个构造函数 ​​TestProtoType​​​，并在其中声明了一个 ​​name​​​ 属性，并将 ​​TestProtoType​​​ 构造函数的原型绑定到了 ​​obj​​ 对象

const obj = {
  a: 'a',
  b: 'b',
  c: 'c',
  [Symbol('a')]: '我是 symbol',
}

Object.defineProperty(obj, 'enumerableTrue', {
  value: 'enumerableTrue',
  enumerable: true
})

Object.defineProperty(obj, 'notEnumerableTrue', {
  value: 'not-enumerableTrue',
  enumerable: false
})

function TestProtoType () {
  this.name = 'wfly'
}

TestProtoType.prototype = obj

const testProtoTypeObj = new TestProtoType();

for (let key in testProtoTypeObj) {
  console.log('testProtoTypeObj.' + key + ' = 我是' + testProtoTypeObj[key])
}

console.log('=======');

for (let key in testProtoTypeObj) {
  if (testProtoTypeObj.hasOwnProperty(key)) {
    console.log('testProtoTypeObj.' + key + ' = 我是' + testProtoTypeObj[key])
  }
}

console.log(testProtoTypeObj);

结果如图所示：对构造函数的实例进行遍历时，会输出其原型上的可枚举属性。如果只想输出是对象本身的使用 ​​hasOwnProperty​​ 即可

遍历数组

使用 ​​for in​​​ 去遍历数组，得到的 ​​key​​​ 就是数组的索引 ​​index​​。

const arr = [{ name: 'wfly' }, { name: 'fnn' }]
for (let key in arr) {
  console.log('obj.' + key + ' = 我是' + JSON.stringify(arr[key]))
}

for…in 如何中断循环

在 ​​for in​​​ 中可以使用 ​​break​​​ 或者 ​​continue​​​ 去中断循环，不可以直接用 ​​return​​ 去中断循环

const obj = {
  a: 'a',
  b: 'b',
  c: 'c',
  [Symbol('a')]: '我是 symbol',
}

// 循环中断
for (let key in obj) {
  if (key === 'b') {
    break
  }
  console.log('obj.' + key + ' = 我是' + obj[key])
}

console.log('=============');

for (let key in obj) {
  if (key === 'b') {
    continue
  }
  console.log('obj.' + key + ' = 我是' + obj[key])
}

console.log('=============');

return 中断

​​return​​ 不能直接中断循环，必须放在函数中

function test () {
  const obj = {
    a: 'a',
    b: 'b',
    c: 'c',
    [Symbol('a')]: '我是 symbol',
  }
  for (let key in obj) {
    if (key === 'b') {
      return
    }
    console.log('obj.' + key + ' = 我是' + obj[key])
  }
}

test()