js for in遍历对象_JS中轻松遍历对象属性的几种方式
自身可枚举属性
Object.keys() 方法会返回一个由一个给定对象的自身可枚举属性组成的数组,数组中属性名的排列顺序和使用 for...in 循环遍历该对象时返回的顺序一致 。如果对象的键-值都不可枚举,那么将返回由键组成的数组。
这是合理的,因为大多数时候只需要关注对象自身的属性。
来看看一个对象拥有自身和继承属性的例子,Object.keys()只返回自己的属性键:
let simpleColors = { colorA: 'white', colorB: 'black'};let natureColors = { colorC: 'green', colorD: 'yellow'};Object.setPrototypeOf(natureColors, simpleColors);Object.keys(natureColors); // => ['colorC', 'colorD']natureColors['colorA']; // => 'white'natureColors['colorB']; // => 'black'
Object.setPrototypeOf() 方法设置一个指定的对象的原型 ( 即, 内部[[Prototype]]属性)到另一个对象或 null。
Object.keys(natureColors)返回natureColors对象的自身可枚举属性键:['colorC','colorD']。
natureColors包含从simpleColors原型对象继承的属性,但是Object.keys()函数会跳过它们。
Object.values() 和 Object.entries() 也都是返回一个给定对象自身可枚举属性的键值对数组
// ...Object.values(natureColors); // => ['green', 'yellow']Object.entries(natureColors);// => [ ['colorC', 'green'], ['colorD', 'yellow'] ]
现在注意与for..in语句的区别,for..in不仅可以循环枚举自身属性还可以枚举原型链中的属性
// ...let enumerableKeys = [];for (let key in natureColors) { enumerableKeys.push(key);}enumerableKeys; // => ['colorC', 'colorD', 'colorA', 'colorB']
enumerableKeys数组包含natureColors自身属性键: 'colorC'和'colorD'。
另外for..in也遍历了从simpleColors原型对象继承的属性
2. Object.values() 返回属性值
**Object.values()**方法返回一个给定对象自身的所有可枚举属性值的数组,值的顺序与使用for...in循环的顺序相同 ( 区别在于 for-in 循环枚举原型链中的属性 )。
来个例子,使用Object.keys()收集keys,然后通过 key 去对象取对应的值:
let meals = { mealA: 'Breakfast', mealB: 'Lunch', mealC: 'Dinner'};for (let key of Object.keys(meals)) { let mealName = meals[key]; // ... do something with mealName console.log(mealName);}// 'Breakfast' 'Lunch' 'Dinner'
meal是一个普通对象。 使用Object.keys(meals)和枚举的for..of循环获取对象键值。
代码看起来很简单,但是,let mealName = meals[key] 没有多大的必要,可以进一步优化,如下:
let meals = { mealA: 'Breakfast', mealB: 'Lunch', mealC: 'Dinner'};for (let mealName of Object.values(meals)) { console.log(mealName);}// 'Breakfast' 'Lunch' 'Dinner'
因为Object.values(meals)返回数组中的对象属性值,所以可以直接在 for..of 中简化。 mealName直接在循环中赋值。
Object.entries()
**Object.entries()**方法返回一个给定对象自身可枚举属性的键值对数组,其排列与使用 for...in 循环遍历该对象时返回的顺序一致(区别在于 for-in 循环也枚举原型链中的属性)。
Object.entries() 返回键值对数组,如 [ [key1, value1], [key2, value2], ..., [keyN, valueN] ]。
可能直接使用这些键值对不怎么方便,但可以通过数组解构赋值方式访问键和值就变得非常容易,如下所示:
let meals = { mealA: 'Breakfast', mealB: 'Lunch', mealC: 'Dinner'};for (let [key, value] of Object.entries(meals)) { console.log(key + ':' + value);}// 'mealA:Breakfast' 'mealB:Lunch' 'mealC:Dinner'
如上所示,因为 Object.entries()返回一个与数组解构赋值兼容的集合,因此不需要为赋值或声明添加额外的行。
当普通对象要转换成 Map 时Object.entries() 就很有用,因为Object.entries() 返回的格式与Map构造函数接受的格式完全相同:(key,value)。
使用常规的Map构造函数可以将一个二维键值对数组转换成一个Map对象。
来个例子,让人缓缓:
let greetings = { morning: 'Good morning', midday: 'Good day', evening: 'Good evening'};let greetingsMap = new Map(Object.entries(greetings));greetingsMap.get('morning'); // => 'Good morning'greetingsMap.get('midday'); // => 'Good day'greetingsMap.get('evening'); // => 'Good evening'复制代码
Map 对象保存键值对。任何值(对象或者原始值) 都可以作为一个键或一个值。
有趣的是,Map提供了与Object.values()和Object.entries() 等效的方法(只是它们返回Iterators),以便为Map实例提取属性值或键值对:
- Map.prototype.values() 等价于Object.values()
- Map.prototype.entries() 等价于Object.entries()
map是普通对象的改进版本,可以获取 map 的大小(对于普通对象,必须手动获取),并使用任意对象类型作为键(普通对象使用字符串基元类型作为键)。
让我们看看返回.values()和.entries()的map的方法:
// ...[...greetingsMap.values()];// => ['Good morning', 'Good day', 'Good evening'][...greetingsMap.entries()];// => [ ['morning', 'Good morning'], ['midday', 'Good day'], // ['evening', 'Good evening'] ]
注意,greetingsMap.values()和greetingsMap.entries()返回迭代器对象。若要将结果放入数组,扩展运算符…是必要的。
对象属性的顺序
JS 对象是简单的键值映射,因此,对象中属性的顺序是微不足道的, 在大多数情况下,不应该依赖它。
在ES5和早期标准中,根本没有指定属性的顺序。
然而,从ES 6开始,属性的顺序是基于一个特殊的规则的,除非特指按照时间排序。通过两个新方法Object.getOwnPropertyNames和Reflect.ownKeys来编写示例讲解这一属性排序规则。
- 数字:当属性的类型时数字类型时,会按照数字的从大到小的顺序进行排序;
- 字符串:当属性的类型是字符串时,会按照时间的先后顺序进行排序;
- Symbol:当属性的类型是Symbol时,会按照时间的先后顺序进行排序。
如果需要有序集合,建议将数据存储到数组或Set中。
总结
Object.values() 和Object.entries() 是为JS开发人员提供新的标准化辅助函数的另一个改进步骤。
Object.entries()最适用于数组解构赋值,其方式是将键和值轻松分配给不同的变量。 此函数还可以轻松地将纯JS对象属性映射到Map对象中。、
注意,Object.values()和Object.entries()返回数据的顺序是不确定的,所以不要依赖该方式。
作者:前端小智
链接:https://juejin.im/post/5d48c275f265da03b12032a1
js for in遍历对象_JS中轻松遍历对象属性的几种方式相关推荐
- 普通类创建获取session 方式_Springboot系列之RestApi中获取枚举类属性的几种方式...
前言 我们在日常开发中经常会遇到,实体类中的枚举属性,在通过@ResponseBody注解返回到前端后,默认被解析成了枚举对象的name值,当我们需要获取枚举类的详细属性时就会变得非常麻烦,今天给大家 ...
- jQuery过滤器:筛选jquery对象数组中的DOM对象
目录 一.定义: 二.基本过滤器: 一.定义: 过滤器就是过滤条件,对已经定位到jquery对象数组中的DOM对象进行过滤筛选,过滤条件不能独立出现在jquery函数,如果使用则只能出现在选择器后方. ...
- 通过属性值从对象数组中获取JavaScript对象[重复]
本文翻译自:Get JavaScript object from array of objects by value of property [duplicate] This question alr ...
- 二叉树(前序遍历序列、中序遍历序列、后序遍历序列、层次遍历序列、深度、叶子数)
Description 已知二叉树的一个按前序遍历输入的字符序列,如abc,de,g,f, (其中,表示空结点).请建立二叉树,并输出建立二叉树的前序遍历序列.中序遍历序列.后序遍历序列.层次遍历序列 ...
- python中一切都是对象_python中一切皆对象
众所周知python是一款面向对象语言,在python语言中,可以说python的一切皆对象是不会错的.如果你学过java的话,你也会知道java也是一款面向对象语言,但是对比起来,python才是真 ...
- tree traversal (树的遍历) - inorder traversal (中序遍历)
tree traversal (树的遍历) - inorder traversal (中序遍历) 1. tree traversal - 树的遍历 二叉树的遍历 (traversing binary ...
- 前序遍历 (preorder traversal) - 中序遍历 (inorder traversal) - 后序遍历 (postorder traversal)
前序遍历 (preorder traversal) - 中序遍历 (inorder traversal) - 后序遍历 (postorder traversal) 1. 前序遍历 (preorder ...
- 由序列确定二叉树:前序序列和中序序列构造二叉树 后序序列和中序序列构造二叉树 层次遍历序列和中序遍历序列构造二叉树 代码实现(c语言)
下面三种序列可以唯一的构造唯一的一棵二叉树: 前序序列和中序序列构造二叉树 后序序列和中序序列构造二叉树 层次遍历序列和中序遍历序列构造二叉树 #include<stdio.h> #inc ...
- 用数学归纳法证明二叉树的先序遍历序列和中序遍历序列可以唯一确定一颗二叉树
用数学归纳法证明二叉树的先序遍历序列和中序遍历序列可以唯一确定一颗二叉树. 首先说明:思想来自文都考研洪老师.包括逻辑框架的搭建,此篇文章为框架搭建完成后将细节补充完整. 首先,用到的数学的证明思想是 ...
最新文章
- 支付宝app支付对接2(文档和对接注意问题)
- MRP Overview
- Solaris - 使用TAB键自动补全和显示当前用户与目录
- Java并发——Java与多线程
- 基于JAVA+SpringBoot+Mybatis+MYSQL的运动会管理系统
- ofbiz 分开默认数据库
- SpringMVC拦截器-路径语法-略坑
- 遍历树,找出所有叶子路径
- selenium win7+selenium2.0+python环境搭建
- 整理了一些已分类的产品Axure元件库,助力正在找Axure组件库的同学高速成长
- CAM350自动开短路检查教程
- cesium导入kml文件
- 【离散数学】【图论】哈密顿图
- 淘宝闲鱼等电商平台数据采集软件
- 还记得爆火的图解算法吗?现在图解机器学习算法书来了!送书10本!
- h2数据库文件.mv.db
- 随机游走模型 matlab,随机游走matlab程序
- gmail头像,字母头像(如Gmail Android最佳做法)
- 网易云课堂Linux运维在线班英文单词笔记
- 国产“芯”时代 盘点国内十大IC卡制卡企业
热门文章
- 11g cursor_sharing 参数说明
- java实体类的功能_(转载) java实体类的作用
- popwindow弹窗
- mysql 创建删除表_mysql创建删除表的的详细解析
- 基于JAVA+SpringMVC+MYSQL的酒店旅游管理系统
- 基于JAVA+Servlet+JSP+MYSQL的个人博客系统
- http://blog.sina.com.cn/s/blog_4aae007d0100inxi.html
- Android接收短信
- mysql+join的原理,Mysql连接join查询原理知识点
- SPSS数据分析之描述性统计、区间估计与假设检验【操作详解】