码迷,mamicode.com
首页 > 其他好文 > 详细

for...in和Object.keys的区别

时间:2021-06-04 19:11:44      阅读:0      评论:0      收藏:0      [点我收藏+]

标签:需要   inf   ima   src   info   prot   aaa   prope   property   

现有对象obj和空对象copy,想将obj的每一项都复制到copy对象中

let obj = {
  name:‘aaa‘,
  age: 18
}

let copy = {}
  • 方法1:使用for...in...
for(let key in obj){
  copy[key] = obj[key]
}
console.log(copy)

输出结果: 技术图片

  • 方法2:使用Object.keys
Object.keys(obj).forEach(key => {
  copy[key] = obj[key]
})
console.log(copy)

输出结果: 技术图片

目前看来,两者没什么区别是吧,都能遍历对象,接下来让我们改一下obj,在obj的原型上加个sex属性,再分别使用两种遍历方式

let obj = {
  name:‘aaa‘,
  age: 18
}

let copy = {}

obj.__proto__.sex = 1
  • 方法1:使用for...in...
for(let key in obj){
  copy[key] = obj[key]
}
console.log(copy)

输出结果: 技术图片 可以看到,对象原型上的sex属性也被遍历了

  • 方法2:使用Object.keys
Object.keys(obj).forEach(key => {
  copy[key] = obj[key]
})
console.log(copy)

输出结果: 技术图片 可以看到,对象原型上的sex属性没有被遍历,只遍历了对象的自身属性

所以说,for...in...会遍历对象原型上的属性,而Object.keys只会遍历对象自身的属性,不会去遍历对象原型上的属性

上述例子,如果依然要使用for...in...来遍历对象,怎么才能避免遍历原型上的属性呢,这里需要使用对象的hasOwnProperty方法

for(let key in obj){
  if(obj.hasOwnProperty(key)){
    copy[key] = obj[key]
  }
}
console.log(copy)

输出结果: 技术图片

for...in和Object.keys的区别

标签:需要   inf   ima   src   info   prot   aaa   prope   property   

原文地址:https://www.cnblogs.com/zoo-x/p/14847729.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!