集团主站
欢迎来到成都达内官方网站!达内—美国上市公司 亿元级外企IT培训企业!
成都it培训哪家好
成都it培训哪家好
全国服务监督电话:15023458194  |   联系客服   |
当前位置:主页 > 培训课程 > web前端 >

成都前端培训课程:JS遍历对象的几种方法

发布者: 成都达内     浏览次数:     发布时间:2020-06-16 15:04:16

几天前一个小伙伴问我 Object.getOwnPropertyNames() 是干什么用的,平时还真没有使用到这个方法,一时不知如何回答,从方法名称来分析,应该是返回的是对象自身属性名组成的数组。...

  几天前一个小伙伴问我 Object.getOwnPropertyNames() 是干什么用的

  平时还真没有使用到这个方法,一时不知如何回答

  从方法名称来分析,应该是返回的是对象自身属性名组成的数组

  那和 Object.keys() 方法不就一样了吗

  感觉事情并不这么简单,于是我仔细看了一下这几种遍历对象的方法的区别

  成都前端培训课程:JS遍历对象的几种方法

  for in

  for in 循环是最基础的遍历对象的方式,它还会得到对象原型链上的属性

  // 创建一个对象并指定其原型,bar 为原型上的属性

  const obj = Object.create({

  bar: 'bar'

  })

  // foo 为对象自身的属性

  obj.foo = 'foo'

  for (let key in obj) {

  console.log(obj[key]) // foo, bar

  }

  可以看到对象原型上的属性也被循环出来了

  在这种情况下可以使用对象的 hasOwnProperty() 方法过滤掉原型链上的属性

  for (let key in obj) {

  if (obj.hasOwnProperty(key)) {

  console.log(obj[key]) // foo

  }

  }

  这时候原型上的 bar 属性就被过滤掉了

  Object.keys

  Object.keys() 是 ES5 新增的一个对象方法,该方法返回对象自身属性名组成的数组,它会自动过滤掉原型链上的属性,然后可以通过数组的forEach() 方法来遍历

  Object.keys(obj).forEach((key) => {

  console.log(obj[key]) // foo

  })

  另外还有 Object.values() 方法和 Object.entries() 方法,这两方法的作用范围和 Object.keys() 方法类似,因此不再说明

  for in 循环和 Object.keys() 方法都不会返回对象的不可枚举属性

  如果需要遍历不可枚举的属性,就要用到前面提到的 Object.getOwnPropertyNames() 方法了

  Object.getOwnPropertyNames

  Object.getOwnPropertyNames() 也是 ES5 新增的一个对象方法,该方法返回对象自身属性名组成的数组,包括不可枚举的属性,也可以通过数组的 forEach 方法来遍历

  // 创建一个对象并指定其原型,bar 为原型上的属性

  // baz 为对象自身的属性并且不可枚举

  const obj = Object.create({

  bar: 'bar'

  }, {

  baz: {

  value: 'baz',

  enumerable: false

  }

  })

  obj.foo = 'foo'

  // 不包括不可枚举的 baz 属性

  Object.keys(obj).forEach((key) => {

  console.log(obj[key]) // foo

  })

  // 包括不可枚举的 baz 属性

  Object.getOwnPropertyNames(obj).forEach((key) => {

  console.log(obj[key]) // baz, foo

  })

  ES2015 新增了 Symbol 数据类型,该类型可以作为对象的键,针对该类型 ES2015 同样新增了 Object.getOwnPropertySymbols() 方法

  Object.getOwnPropertySymbols

  Object.getOwnPropertySymbols() 方法返回对象自身的 Symbol 属性组成的数组,不包括字符串属性

  Object.getOwnPropertySymbols(obj).forEach((key) => {

  console.log(obj[key])

  })

  什么都没有,因为该对象还没有 Symbol 属性

  // 给对象添加一个不可枚举的 Symbol 属性

  Object.defineProperties(obj, {

  [Symbol('baz')]: {

  value: 'Symbol baz',

  enumerable: false

  }

  })

  // 给对象添加一个可枚举的 Symbol 属性

  obj[Symbol('foo')] = 'Symbol foo'

  Object.getOwnPropertySymbols(obj).forEach((key) => {

  console.log(obj[key]) // Symbol baz, Symbol foo

  })

  Reflect.ownKeys

  Reflect.ownKeys() 方法是 ES2015 新增的静态方法,该方法返回对象自身所有属性名组成的数组,包括不可枚举的属性和 Symbol 属性

  Reflect.ownKeys(obj).forEach((key) => {

  console.log(obj[key]) // baz, foo, Symbol baz, Symbol foo

  })

  对比

  成都前端培训课程:JS遍历对象的几种方法

  成都前端培训课程:结论

  这其中只有 for in 循环会得到对象原型链上的属性,其它方法都只适用于对象自身的属性

  ES 语言后续添加的新特性不会对以前的代码产生副作用,比如在 ES2015 之前就存在的 for in 循环,Object.keys() 和 Object.getOwnPropertyNames() 是肯定不会返回 Symbol 属性的

(责任编辑:范老师)
最新开班
  • 成都Java培训班
    免费试听名额发放中...
  • 成都C++培训班
    免费试听名额发放中...
  • 成都PHP培训班
    免费试听名额发放中...
  • 成都网络工程培训班
    免费试听名额发放中...
  • 成都Unity3D培训班
    免费试听名额发放中...
  • 成都大数据培训班
    免费试听名额发放中...
  • 成都uid培训班
    免费试听名额发放中...
  • 成都会计培训班
    免费试听名额发放中...
  • 成都Python培训班
    免费试听名额发放中...
  • 成都嵌入式培训班
    免费试听名额发放中...
  • 成都web培训班
    免费试听名额发放中...
  • 成都软件测试培训班
    免费试听名额发放中...
在线留言
提交

校区地址:成都市锦江区东大街紫东楼端35号明宇金融广场19楼1906室

联系电话:15023458194

公交路线:芷泉街(18路;21路;43路;48路;104路;152路;335路 ) 地铁路线:东门大桥站(地铁2号线)

校区地址:成都市高新区奥克斯广场蜀锦路209号一楼商铺

联系电话:15023458194

公交路线:益州大道锦城大道口(18路;21路;43路;48路;104路;152路;335路 ) 地铁路线:孵化园(地铁1号线)

校区地址:成都锦江区东大街芷泉街229号东方广场C座3楼303

联系电话:15023458194

公交路线:芷泉街(188路;115路;515路;236路;505路;501路;84路 ) 地铁路线:东门大桥站(地铁2号线)

校区地址:成都市武侯区佳灵路3号红牌楼广场2号写字楼11楼1115号

联系电话:15023458194

公交路线:红牌楼东(11路;92路;100路;111路;139路;g28路;快速公交K1/K2) 地铁路线:红牌楼站(地铁3号线)

校区地址:成都市锦江区红星路二段70号四川日报大厦502-2

联系电话:15023458194

公交路线:市二医院站(6路;49路;102路;5路;37路;g92路;) 地铁路线:地铁市二医院(地铁3号线)

校区地址:成都市锦江区东大街芷泉段229号东方广场C座16层

联系电话:15023458194

公交路线:芷泉街(18路;21路;43路;48路;104路;152路;335路 ) 地铁路线:东门大桥站(地铁2号线)

校区地址:四川省成都市武侯区高新科技孵化园9号园区E座7楼

联系电话:15023458194

公交路线:益州大道锦城大道口(18路;21路;43路;48路;104路;152路;335路 ) 地铁路线:孵化园(地铁1号线)

校区地址:成都市高新区奥克斯广场B座1708

联系电话:15023458194

公交路线:益州大道锦城大道口(18路;21路;43路;48路;104路;152路;335路 ) 地铁路线:孵化园(地铁1号线)

了解达内动态
关注成都达内教育公众号

首页 | 关于达内 | 课程中心 | 专家师资 | 视频教程 | 学员空间 | 校企合作 | 新闻资讯 | 就业指导 | 网站地图

2016-2025 达内时代科技集团有限公司 版权所有 京ICP证8000853号-56