ES6遍历对象方法
ES6 一共有 5 种方法可以遍历对象的属性。
(1)for...in
for...in循环遍历对象自身的和继承的可枚举属性(不含 Symbol 属性)。
let obj = {a:1,b:2,c:3}
for (const key in obj) {
console.log(key);
}
(2)Object.keys(obj)
Object.keys返回一个数组,包括对象自身的(不含继承的)所有可枚举属性(不含 Symbol 属性)的键名。
// simple array
var arr = ['a', 'b', 'c'];
console.log(Object.keys(arr)); // console: ['0', '1', '2'] // array like object
var obj = { 0: 'a', 1: 'b', 2: 'c' };
console.log(Object.keys(obj)); // console: ['0', '1', '2'] // array like object with random key ordering
var anObj = { 100: 'a', 2: 'b', 7: 'c' };
console.log(Object.keys(anObj)); // console: ['2', '7', '100'] // getFoo is a property which isn't enumerable
var myObj = Object.create({}, {
getFoo: {
value: function () { return this.foo; }
}
});
myObj.foo = 1;
console.log(Object.keys(myObj)); // console: ['foo']
(3)Object.getOwnPropertyNames(obj)
Object.getOwnPropertyNames返回一个数组,包含对象自身的所有属性(不含 Symbol 属性,但是包括不可枚举属性)的键名。
var arr = ["a", "b", "c"];
console.log(Object.getOwnPropertyNames(arr).sort()); // ["0", "1", "2", "length"] // 类数组对象
var obj = { 0: "a", 1: "b", 2: "c"};
console.log(Object.getOwnPropertyNames(obj).sort()); // ["0", "1", "2"] // 使用Array.forEach输出属性名和属性值
Object.getOwnPropertyNames(obj).forEach(function(val, idx, array) {
console.log(val + " -> " + obj[val]);
});
// 输出
// 0 -> a
// 1 -> b
// 2 -> c //不可枚举属性
var my_obj = Object.create({}, {
getFoo: {
value: function() { return this.foo; },
enumerable: false
}
});
my_obj.foo = 1; console.log(Object.getOwnPropertyNames(my_obj).sort()); // ["foo", "getFoo"]
(4)Object.getOwnPropertySymbols(obj)
Object.getOwnPropertySymbols返回一个数组,包含对象自身的所有 Symbol 属性的键名。
var obj = {};
var a = Symbol("a");
var b = Symbol.for("b");
obj[a] = "localSymbol";
obj[b] = "globalSymbol";
var objectSymbols = Object.getOwnPropertySymbols(obj);
console.log(objectSymbols.length); // 2
console.log(objectSymbols) // [Symbol(a), Symbol(b)]
console.log(objectSymbols[0]) // Symbol(a)
(5)Reflect.ownKeys(obj)
Reflect.ownKeys返回一个数组,包含对象自身的(不含继承的)所有键名,不管键名是 Symbol 或字符串,也不管是否可枚举。
Reflect.ownKeys方法返回一个数组,包含了参数对象的所有属性。这个数组的属性次序是这样的,首先是数值属性2和10,其次是字符串属性b和a,最后是 Symbol 属性。
Reflect.ownKeys({ [Symbol()]:0, b:0, 10:0, 2:0, a:0 })
// ['2', '10', 'b', 'a', Symbol()]
Reflect.ownKeys({z: 3, y: 2, x: 1}) // [ "z", "y", "x" ]
Reflect.ownKeys([]) // ["length"]
let sym = Symbol.for('comet')
let sym2 = Symbol.for('meteor')
let obj = {[sym]: 0, 'str': 0, '773': 0, '0': 0,
[sym2]: 0, '-1': 0, '8': 0, 'second str': 0}
Reflect.ownKeys(obj)
// [ "0", "8", "773", "str", "-1", "second str", Symbol(comet), Symbol(meteor) ]
// Indexes in numeric order,
// strings in insertion order,
// symbols in insertion order
以上的 5 种方法遍历对象的键名,都遵守同样的属性遍历的次序规则。
- 首先遍历所有数值键,按照数值升序排列。
- 其次遍历所有字符串键,按照加入时间升序排列。
- 最后遍历所有 Symbol 键,按照加入时间升序排列。
- 更多对象方法可参考:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object
ES6遍历对象方法的更多相关文章
- ES6新增对象方法的访问描述符:get(只读)、set(只写)
Es6新增对象方法的访问描述符:get(只读).set(只写),可以直接使用,一般用于数据监听,用途类似于vue.$watch. var obj = { a:1, get bar() { return ...
- es6 javascript对象方法Object.assign()
es6 javascript对象方法Object.assign() 2016年12月01日 16:42:34 阅读数:38583 1 基本用法 Object.assign方法用于对象的合并,将源对象 ...
- js es6遍历对象的6种方法(应用中推荐前三种)
javaScript遍历对象总结 1.for … in 循环遍历对象自身的和继承的可枚举属性(循环遍历对象自身的和继承的可枚举属性(不含Symbol属性).). 2.使用Object.keys ...
- JavaScript遍历对象方法总结
前言 本篇内容将按照下图展开: 遍历Object Object最常见的遍历方法方法就是使用for...in...,但其有一定的局限性,比如只能遍历可枚举属性.虽然Object无法直接使用for循环和f ...
- es6 javascript对象方法Object.assign() 对象的合并复制等
Object.assign方法用于对象的合并,将源对象( source )的所有可枚举属性,复制到目标对象( target ). 详细使用稳步到前辈: http://blog.csdn.net/qq_ ...
- js中遍历对象(5种)和遍历数组(6种)的方法总结(转载)
一.遍历对象方法 1.for...in遍历输出的是对象自身的属性以及原型链上可枚举的属性(不含Symbol属性),原型链上的属性最后输出说明先遍历的是自身的可枚举属性,后遍历原型链上的 eg: var ...
- es6五种遍历对象属性的方法 - 表格整理
ES6 一共有5种方法可以遍历对象的属性. (1)for...in for...in循环遍历对象自身的和继承的可枚举属性(不含 Symbol 属性). (2)Object.keys(obj) Obje ...
- ES6之6种遍历对象属性的方法
ES6之6种遍历对象属性的方法 for ... in 循环遍历对象自身的和继承的可枚举属性(不含Symbol属性). Obejct.keys(obj),返回一个数组,包括对象自身的(不含继承的)所有可 ...
- JavaScript遍历对象4种方法和遍历数组的3种方式 代码
//遍历对象 4种方法 //Object.keys(obj).forEach() console.log("keys...遍历</br>") var obj1 = { ...
随机推荐
- HTML在网页上不能显示图片问题
我遇到的问题是写了一个HTML程序,结果在网页上面不能显示,原因是图片路径放置错了. 修改前代码: <!DOCTYPE html> <html> <head> &l ...
- php文件加密(screw方式)
1.上传已经生成好的执行文件. 2.上传扩展文件到目录: /usr/lib64/php/modules 3.上传配置文件到目录: /etc/php.d 4.执行 ./screw a.php 生成加密后 ...
- HTML 网页开发、CSS 基础语法——五. 编辑器
- RabbitMQ3.9.7在CentOS7中的安装搭建
1.概述 RabbitMQ 是目前很流行的消息中间件之一,可靠性非常好,能简单的实现高可用.负载均衡. 今天我们先来聊一下 RabbitMQ 3.9.7 版本在 CentOS7 中的安装. 2.安装R ...
- 2021“MINIEYE杯”中国大学生算法设计超级联赛(8)(1002,1004,1006,1009)
前言 依旧是白嫖账号,只打了一些题/kk 正题 1002 Buying Snacks 题目大意 \(n\)个物品,每个可以买一次也可以不买,如果买需要选择\(1/2\)块钱的,然后也可以相邻两个一起买 ...
- MySQL表空间回收的正确姿势
不知道大家有没有遇到这样的一种情况,线上业务在MySQL表上做增删改查操作,随着时间的推移,表里面的数据越来越多,表数据文件越来越大,数据库占用的空间自然也逐渐增长 为了缩小磁盘上表数据文件占用的空间 ...
- 【DP】Educational DP Contest
这份 dp 题单的最后几题好难 orz. 前面的题比较简单,所以我会选取一些题来讲,其它的直接看代码理解吧 qwq. 传送门: https://atcoder.jp/contests/dp 全部 AC ...
- The Data Way Vol.2 | 做个『单纯』的程序员还真不简单
关于「The Data Way」 「The Data Way」是由 SphereEx 公司出品的一档播客节目.这里有开源.数据.技术的故事,同时我们关注开发者的工作日常,也讨论开发者的生活日常:我们聚 ...
- 关于 Binomial Coefficient is Fun
题目传送门 Solution 应该这个做法不是很常见吧. 我们设 \(f_{i,j}\) 表示前面 \(i\) 个数,选出的数和为 \(j\) 的贡献之和.因为我们有以下式子: \[\sum_{i=a ...
- 洛谷3195 [HNOI2008]玩具装箱TOY(斜率优化+dp)
qwq斜率优化好题 第一步还是考虑最朴素的\(dp\) \[dp=dp[j]+(i-j-1+sum[i]-sum[j])^2 \] 设\(f[i]=sum[i]+i\) 那么考虑将上述柿子变成$$dp ...