关于 for in 和 for of

118 阅读1分钟

for in

先说作用: 可以遍历数组和对象,会遍历出对象的自身属性 和 原型上的属性 支持 break。代码如下:

function P() {
  this.name = 'huazui'
}
P.prototype = {}

Object.defineProperties(P.prototype, {
  constructor: {
    value: P,
    enumerable: true
  },
  say:{
    value:  () => { console.log('hi') },
    enumerable: true
  },
  age:{
    value: 20,
    enumerable: false
  } 
})

for (const key in new P()) {
  // 就会遍历出 name constructor say
  console.log(key)
}

所以一般在用这个语法的时候会配合上 hasOwnProperty

  • hasOwnProperty: 判断对象自身属性中是否具有指定的属性(注意是自身属性)
const p = new P()
for (const key in p) {
  if (p.hasOwnProperty(key)) {
    console.log(key)  // 打印结果就是 name 了   
  }
}

for of

for of 只关心集合本身元素,不可以遍历对象(后面说怎么让他可以遍历对象), 可以遍历 数组 set map 这种结构 也支持break语法;

如果使对象 也支持 for of 语法

首先需要知道 为什么一个数据结构可以使用 for of 来遍历,其实就是这个数据存在一个叫 Symbol.iterator 的方法, 也就是下面这个东东。且这个方法需要是一个 generator 函数, 代码如下:

1647680758(1).png

const obj = {
  name: 'tom',
  age: 20
}

obj[Symbol.iterator] = function *demo() {
  for (const key in this) {
    yield key;
  }
}

that is all;