ES6 一共有 5 种方法可以遍历对象的属性。

(1)for...in

for...in循环遍历对象自身的和继承的可枚举属性(不含 Symbol 属性)。

  1. let obj = {a:1,b:2,c:3}
  2. for (const key in obj) {
  3. console.log(key);
  4. }

(2)Object.keys(obj)

Object.keys返回一个数组,包括对象自身的(不含继承的)所有可枚举属性(不含 Symbol 属性)的键名。

  1. // simple array
  2. var arr = ['a', 'b', 'c'];
  3. console.log(Object.keys(arr)); // console: ['0', '1', '2']
  4.  
  5. // array like object
  6. var obj = { 0: 'a', 1: 'b', 2: 'c' };
  7. console.log(Object.keys(obj)); // console: ['0', '1', '2']
  8.  
  9. // array like object with random key ordering
  10. var anObj = { 100: 'a', 2: 'b', 7: 'c' };
  11. console.log(Object.keys(anObj)); // console: ['2', '7', '100']
  12.  
  13. // getFoo is a property which isn't enumerable
  14. var myObj = Object.create({}, {
  15. getFoo: {
  16. value: function () { return this.foo; }
  17. }
  18. });
  19. myObj.foo = 1;
  20. console.log(Object.keys(myObj)); // console: ['foo']

(3)Object.getOwnPropertyNames(obj)

Object.getOwnPropertyNames返回一个数组,包含对象自身的所有属性(不含 Symbol 属性,但是包括不可枚举属性)的键名。

  1. var arr = ["a", "b", "c"];
  2. console.log(Object.getOwnPropertyNames(arr).sort()); // ["0", "1", "2", "length"]
  3.  
  4. // 类数组对象
  5. var obj = { 0: "a", 1: "b", 2: "c"};
  6. console.log(Object.getOwnPropertyNames(obj).sort()); // ["0", "1", "2"]
  7.  
  8. // 使用Array.forEach输出属性名和属性值
  9. Object.getOwnPropertyNames(obj).forEach(function(val, idx, array) {
  10. console.log(val + " -> " + obj[val]);
  11. });
  12. // 输出
  13. // 0 -> a
  14. // 1 -> b
  15. // 2 -> c
  16.  
  17. //不可枚举属性
  18. var my_obj = Object.create({}, {
  19. getFoo: {
  20. value: function() { return this.foo; },
  21. enumerable: false
  22. }
  23. });
  24. my_obj.foo = 1;
  25.  
  26. console.log(Object.getOwnPropertyNames(my_obj).sort()); // ["foo", "getFoo"]

(4)Object.getOwnPropertySymbols(obj)

Object.getOwnPropertySymbols返回一个数组,包含对象自身的所有 Symbol 属性的键名。

  1. var obj = {};
  2. var a = Symbol("a");
  3. var b = Symbol.for("b");
  4.  
  5. obj[a] = "localSymbol";
  6. obj[b] = "globalSymbol";
  7.  
  8. var objectSymbols = Object.getOwnPropertySymbols(obj);
  9.  
  10. console.log(objectSymbols.length); // 2
  11. console.log(objectSymbols) // [Symbol(a), Symbol(b)]
  12. console.log(objectSymbols[0]) // Symbol(a)

(5)Reflect.ownKeys(obj)

Reflect.ownKeys返回一个数组,包含对象自身的(不含继承的)所有键名,不管键名是 Symbol 或字符串,也不管是否可枚举。

Reflect.ownKeys方法返回一个数组,包含了参数对象的所有属性。这个数组的属性次序是这样的,首先是数值属性210,其次是字符串属性ba,最后是 Symbol 属性。

  1. Reflect.ownKeys({ [Symbol()]:0, b:0, 10:0, 2:0, a:0 })
  2. // ['2', '10', 'b', 'a', Symbol()]
  1. Reflect.ownKeys({z: 3, y: 2, x: 1}) // [ "z", "y", "x" ]
  2. Reflect.ownKeys([]) // ["length"]
  3.  
  4. let sym = Symbol.for('comet')
  5. let sym2 = Symbol.for('meteor')
  6. let obj = {[sym]: 0, 'str': 0, '773': 0, '0': 0,
  7. [sym2]: 0, '-1': 0, '8': 0, 'second str': 0}
  8. Reflect.ownKeys(obj)
  9. // [ "0", "8", "773", "str", "-1", "second str", Symbol(comet), Symbol(meteor) ]
  10. // Indexes in numeric order,
  11. // strings in insertion order,
  12. // symbols in insertion order

以上的 5 种方法遍历对象的键名,都遵守同样的属性遍历的次序规则。

  • 首先遍历所有数值键,按照数值升序排列。
  • 其次遍历所有字符串键,按照加入时间升序排列。
  • 最后遍历所有 Symbol 键,按照加入时间升序排列。
  • 更多对象方法可参考:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object

ES6遍历对象方法的更多相关文章

  1. ES6新增对象方法的访问描述符:get(只读)、set(只写)

    Es6新增对象方法的访问描述符:get(只读).set(只写),可以直接使用,一般用于数据监听,用途类似于vue.$watch. var obj = { a:1, get bar() { return ...

  2. es6 javascript对象方法Object.assign()

    es6 javascript对象方法Object.assign() 2016年12月01日 16:42:34 阅读数:38583 1  基本用法 Object.assign方法用于对象的合并,将源对象 ...

  3. js es6遍历对象的6种方法(应用中推荐前三种)

        javaScript遍历对象总结 1.for … in 循环遍历对象自身的和继承的可枚举属性(循环遍历对象自身的和继承的可枚举属性(不含Symbol属性).). 2.使用Object.keys ...

  4. JavaScript遍历对象方法总结

    前言 本篇内容将按照下图展开: 遍历Object Object最常见的遍历方法方法就是使用for...in...,但其有一定的局限性,比如只能遍历可枚举属性.虽然Object无法直接使用for循环和f ...

  5. es6 javascript对象方法Object.assign() 对象的合并复制等

    Object.assign方法用于对象的合并,将源对象( source )的所有可枚举属性,复制到目标对象( target ). 详细使用稳步到前辈: http://blog.csdn.net/qq_ ...

  6. js中遍历对象(5种)和遍历数组(6种)的方法总结(转载)

    一.遍历对象方法 1.for...in遍历输出的是对象自身的属性以及原型链上可枚举的属性(不含Symbol属性),原型链上的属性最后输出说明先遍历的是自身的可枚举属性,后遍历原型链上的 eg: var ...

  7. es6五种遍历对象属性的方法 - 表格整理

    ES6 一共有5种方法可以遍历对象的属性. (1)for...in for...in循环遍历对象自身的和继承的可枚举属性(不含 Symbol 属性). (2)Object.keys(obj) Obje ...

  8. ES6之6种遍历对象属性的方法

    ES6之6种遍历对象属性的方法 for ... in 循环遍历对象自身的和继承的可枚举属性(不含Symbol属性). Obejct.keys(obj),返回一个数组,包括对象自身的(不含继承的)所有可 ...

  9. JavaScript遍历对象4种方法和遍历数组的3种方式 代码

    //遍历对象 4种方法 //Object.keys(obj).forEach() console.log("keys...遍历</br>") var obj1 = { ...

随机推荐

  1. javascript 实现php str_pad

    * 查看php.net官方手册 string str_pad ( string $input , int $pad_length [, string $pad_string = " &quo ...

  2. Jmeter导出测试报告

    测试数据概述 jemter导出数据 另存为导出csv文件 命令行导出 测试报告的作用: 反馈结果 复现问题,所以需要写明测试场景.数据

  3. 如何使用jemeter进行性能测试

    下载链接:http://jmeter.apache.org/download_jmeter.cgi 一:如何使用jemeter进行压测 1)稳定性测试就需要长时间运行,其运行时间1天.2天.一周等 2 ...

  4. bzoj#4423-[AMPPZ2013]Bytehattan【并查集】

    正题 题目链接:https://darkbzoj.tk/problem/4423 题目大意 给出一个\(n*n\)的网格图,然后四联通的点之间连接.每次删掉一条边求这条边的两个点是否连通.强制在线. ...

  5. Python3入门系列之-----json与字典转换

    json JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式,易于人阅读和编写 JSON 函数 使用 JSON 函数需要导入 json 库:import js ...

  6. VirtualBox VM 空间瘦身记(vmdk)

    本文地址:https://www.ebpf.top/post/shrink_vbox_vmdk_size 在使用 VirtualBox( VMDK 模式)管理虚拟机的时候,我们经常会遇到一些编译安装场 ...

  7. DL4J实战之一:准备

    欢迎访问我的GitHub https://github.com/zq2599/blog_demos 内容:所有原创文章分类汇总及配套源码,涉及Java.Docker.Kubernetes.DevOPS ...

  8. 题解 GRE Words Revenge

    题目传送门 题目大意 给出 \(m\) 次操作,分别为以下两种操作: 学习一个单词 给出一个段落,查询里面有多少个学过的单词.注意,如果学习过 \(\text{ab,bc}\) ,当前查询段落为 \( ...

  9. CF49E Common ancestor(dp+dp+dp)

    纪念卡常把自己卡死的一次自闭模拟赛 QWQ 一开始看这个题,以为是个图论,仔细一想,貌似可以直接dp啊. 首先,因为规则只有从两个变为1个,貌似可以用类似区间\(dp\)的方式来\(check\)一段 ...

  10. QFNU-ACM 2021.10.09 Rating补题

    A - A CodeForces - 478A 注意点: 和为0时要特判一下. 代码: #include<bits/stdc++.h> using namespace std; int m ...