javascript遍历对象的五种方式实例代码

2022-04-15 680
目录
  • 准备
  • 五种武器
    • for…in
    • Object.keys
    • Object.getOwnPropertyNames
    • Object.getOwnPropertySymbols
    • Reflect.ownKeys
  • 总结
    • 扩展
      • Object.values
      • Object.entries
      • hasOwnProperty
      • propertyIsEnumerable
    • 总结

      准备

      先来准备一个测试对象obj。

      代码清单1

      var notEnum = Symbol("继承不可枚举symbol");
      var proto = {
          [Symbol("继承可枚举symbol")]: "继承可枚举symbol",
          name: "继承可枚举属性"
      };
      // 不可枚举属性
      Object.defineProperty(proto, "age", {
          value: "继承不可枚举属性"
      });
      // 不可枚举symbol属性
      Object.defineProperty(proto, notEnum, {
          value: "继承不可枚举symbol"
      });
      
      var obj = {
          job1: "自有可枚举属性1",
          job2: "自有可枚举属性2",
          [Symbol("自有可枚举symbol")]: "自有可枚举symbol"
      };
      // 继承
      Object.setPrototypeOf(obj, proto);
      // 不可枚举属性
      Object.defineProperty(obj, "address", {
          value: "自有不可枚举属性"
      });
      // 不可枚举symbol属性
      var ownNotEnum = Symbol("自有不可枚举symbol");
      Object.defineProperty(obj, ownNotEnum, {
          value: "自有不可枚举symbol"
      });
      

      五种武器

      for…in

      这个是对象遍历界的老兵了,通过这种方式可以遍历对象自身及继承的所有可枚举属性(不包括Symbol类型)。

      代码清单2

      for(var attr in obj){
          console.log(attr,"==",obj[attr]);
      }
      /*
      job1 == 自有可枚举属性1
      job2 == 自有可枚举属性2
      name == 继承可枚举属性
      */
      

      Object.keys

      获取对象自身所有可枚举属性(不包括Symbol类型)组成的数组

      代码清单3

      Object.keys(obj).map((attr)=>{
          console.log(attr,"==",obj[attr]);
      });
      /*
      job1 == 自有可枚举属性1
      job2 == 自有可枚举属性2
      */
      

      Object.getOwnPropertyNames

      获取对象自身所有类型为非Symbol的属性名称(包括不可枚举)组成的数组

      代码清单4

      Object.getOwnPropertyNames(obj).map((attr)=>{
          console.log(attr,"==",obj[attr]);
      });
      /*
      job1 == 自有可枚举属性1
      job2 == 自有可枚举属性2
      address == 自有不可枚举属性
      */
      

      Object.getOwnPropertySymbols

      获取对象自身所有类型为Symbol的属性名称(包括不可枚举)组成的数组

      代码清单5

      Object.getOwnPropertySymbols(obj).map((attr)=>{
          console.log(attr,"==",obj[attr]);
      });
      /*
      Symbol(自有可枚举symbol) == 自有可枚举symbol
      Symbol(自有不可枚举symbol) == 自有不可枚举symbol
      */
      

      Reflect.ownKeys

      获取一个对象的自身的所有(包括不可枚举的和Symbol类型)的属性名称组成的数组

      代码清单6

      Reflect.ownKeys(obj).map((attr)=>{
          console.log(attr,"==",obj[attr]);
      });
      /*
      job1 == 自有可枚举属性1
      job2 == 自有可枚举属性2
      address == 自有不可枚举属性
      Symbol(自有可枚举symbol) '==' '自有可枚举symbol'
      Symbol(自有不可枚举symbol) '==' '自有不可枚举symbol'
      */
      

      总结

      武器库的说明书,根据需要选择合适的武器吧。

      api 操作 自身属性 不可枚举属性 继承属性 Symbol属性
      for…in 遍历 yes no yes no
      Object.keys 返回属性数组 yes no no no
      Object.getOwnPropertyNames 返回非Symbol属性数组 yes yes no no
      Object.getOwnPropertySymbols 返回Symbol属性数组 yes yes no yes
      Reflect.ownKeys 返回属性数组 yes yes no yes

      五种武器里最牛的就是Reflect.ownKeys了,无论Symbol还是不可枚举通吃, 简直就是Object.getOwnPropertyNames和Object.getOwnPropertySymbols合体的效果。

      扩展

      Object.values

      获取对象自身所有可枚举属性(不包括Symbol类型)的值组成的数组

      代码清单7

      Object.values(obj).map((val)=>{
          console.log(val);
      });
      /*
      自有可枚举属性1
      自有可枚举属性2
      */
      

      Object.entries

      获取对象自身所有可枚举属性(不包括Symbol类型)的键值对数组

      代码清单7

      Object.entries(obj).map((val)=>{
          console.log(val);
      });
      /*
      [ 'job1', '自有可枚举属性1' ]
      [ 'job2', '自有可枚举属性2' ]
      */
      

      hasOwnProperty

      检测一个对象自身属性中是否含有指定的属性,返回boolean

      引用自MDN: JavaScript 并没有保护 hasOwnProperty 属性名,因此某个对象是有可能存在使用这个属性名的属性,所以直接使用原型链上的 hasOwnProperty 方法

      代码清单8

      for(var attr in obj){
          if(Object.prototype.hasOwnProperty.call(obj,attr)){
              console.log("自有属性::",attr);
          }else{
              console.log("继承属性::",attr);
          }
      }
      /*
      自有属性:: job1
      自有属性:: job2
      继承属性:: name
      */
      

      propertyIsEnumerable

      检测一个属性在指定的对象中是否可枚举,返回boolean

      代码清单9

      Reflect.ownKeys(obj).map((attr) => {
          if (Object.prototype.propertyIsEnumerable.call(obj, attr)) {
              console.log("可枚举属性::", attr);
          } else {
              console.log("不可枚举属性::", attr);
          }
      });
      /*
      可枚举属性:: job1
      可枚举属性:: job2
      不可枚举属性:: address
      可枚举属性:: Symbol(自有可枚举symbol)
      不可枚举属性:: Symbol(自有不可枚举symbol)
      */
      

      参考

      MDN Object

      总结

      到此这篇关于javascript遍历对象的五种方式的文章就介绍到这了,更多相关javascript遍历对象内容请搜索NICE源码以前的文章或继续浏览下面的相关文章希望大家以后多多支持NICE源码!

      免责声明:
      1、本网站所有发布的源码、软件和资料均为收集各大资源网站整理而来;仅限用于学习和研究目的,您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。 不得使用于非法商业用途,不得违反国家法律。否则后果自负!

      2、本站信息来自网络,版权争议与本站无关。一切关于该资源商业行为与www.niceym.com无关。
      如果您喜欢该程序,请支持正版源码、软件,购买注册,得到更好的正版服务。
      如有侵犯你版权的,请邮件与我们联系处理(邮箱:skknet@qq.com),本站将立即改正。

      NICE源码网 JavaScript javascript遍历对象的五种方式实例代码 https://www.niceym.com/18382.html

      常见问题
      • 请您联系网站客服QQ,79024519,将第一时间处理您的问题,咨询请提供会员ID以及资源编号!
      查看详情
      • 本站发布的压缩包如遇需要解压密码请尝试本站域名:www.niceym.com (通常为小写,如不对可试试大写) 或者:niceym.com 如遇无法解压,请您提供资源编号发送给本站客服!
      查看详情