JS中如何轻松遍历对象属性的方式总结


Posted in Javascript onAugust 06, 2019

自身可枚举属性

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.getOwnPropertyNamesReflect.ownKeys来编写示例讲解这一属性排序规则。

  • 数字:当属性的类型时数字类型时,会按照数字的从大到小的顺序进行排序;
  • 字符串:当属性的类型是字符串时,会按照时间的先后顺序进行排序;
  • Symbol:当属性的类型是Symbol时,会按照时间的先后顺序进行排序。

如果需要有序集合,建议将数据存储到数组或Set中。

总结

Object.values() Object.entries() 是为JS开发人员提供新的标准化辅助函数的另一个改进步骤。

Object.entries()最适用于数组解构赋值,其方式是将键和值轻松分配给不同的变量。 此函数还可以轻松地将纯JS对象属性映射到Map对象中。、

注意,Object.values()Object.entries()返回数据的顺序是不确定的,所以不要依赖该方式。

好了,以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
JQuery打造PHP的AJAX表单提交实例
Nov 03 Javascript
jQuery下通过$.browser来判断浏览器.
Apr 05 Javascript
JS小功能(checkbox实现全选和全取消)实例代码
Nov 28 Javascript
深入理解javascript严格模式(Strict Mode)
Nov 28 Javascript
JavaScript实现常用二级省市级联下拉列表的方法
Mar 25 Javascript
JavaScript数据类型详解
Apr 01 Javascript
javascript变量声明实例分析
Apr 25 Javascript
简单谈谈js的数据类型
Sep 25 Javascript
原生JavaScript实现的简单放大镜效果示例
Feb 07 Javascript
使用Angular CLI生成路由的方法
Mar 24 Javascript
mpvue+vant app搭建微信小程序的方法步骤
Feb 11 Javascript
vue路由教程之静态路由
Sep 03 Javascript
VUE组件中的 Drawer 抽屉实现代码
Aug 06 #Javascript
浅入深出Vue之自动化路由
Aug 06 #Javascript
解决vue单页面修改样式无法覆盖问题
Aug 05 #Javascript
微信小程序3种位置API的使用方法详解
Aug 05 #Javascript
微信小程序 高德地图路线规划实现过程详解
Aug 05 #Javascript
详解将微信小程序接口Promise化并使用async函数
Aug 05 #Javascript
使用apifm-wxapi模块中的问题及解决方法
Aug 05 #Javascript
You might like
如何隐藏你的.php文件
2007/01/04 PHP
php使用google地图应用实例
2014/12/31 PHP
php实现阳历阴历互转的方法
2015/10/28 PHP
Mootools 1.2教程 选项卡效果(Tabs)
2009/09/15 Javascript
基于JQuery实现鼠标点击文本框显示隐藏提示文本
2012/02/23 Javascript
Extjs中RowExpander控件的默认展开问题示例探讨
2014/01/24 Javascript
JQuery插件iScroll实现下拉刷新,滚动翻页特效
2014/06/22 Javascript
js实现可得到不同颜色值的颜色选择器实例
2015/02/28 Javascript
JS实现可缩放、拖动、关闭和最小化的浮动窗口完整实例
2015/03/04 Javascript
js实现缓冲运动效果的方法
2015/04/10 Javascript
ztree获取选中节点时不能进入可视区域出现BUG如何解决
2015/12/03 Javascript
浅析Bootstrip的select控件绑定数据的问题
2016/05/10 Javascript
AngularJS入门教程之路由与多视图详解
2016/08/19 Javascript
jQuery拖拽通过八个点改变div大小
2020/11/29 Javascript
解决webpack打包速度慢的解决办法汇总
2017/07/06 Javascript
js canvas实现简单的图像扩散效果
2020/06/28 Javascript
Vue中的混入的使用(vue mixins)
2018/06/01 Javascript
使用angular-cli webpack创建多个包的方法
2018/10/16 Javascript
clipboard在vue中的使用的方法示例
2018/10/19 Javascript
前端面试知识点目录一览
2019/04/15 Javascript
socket在egg中的使用实例代码详解
2019/05/30 Javascript
package.json各个属性说明详解
2020/03/11 Javascript
原生js 实现表单验证功能
2021/02/08 Javascript
python创建和使用字典实例详解
2013/11/01 Python
Python利用正则表达式匹配并截取指定子串及去重的方法
2015/07/30 Python
Python闭包函数定义与用法分析
2018/07/20 Python
python用requests实现http请求代码实例
2019/10/31 Python
keras 自定义loss层+接受输入实例
2020/06/28 Python
python tkinter实现下载进度条及抖音视频去水印原理
2021/02/07 Python
HTML5时代CSS设置漂亮字体取代图片
2014/09/04 HTML / CSS
西班牙在线光学:Visual-Click
2020/06/22 全球购物
不用游标的SQL语句有哪些
2012/09/07 面试题
晨会主持词
2014/03/17 职场文书
倡议书怎么写?
2019/04/11 职场文书
MySQL子查询中order by不生效问题的解决方法
2021/08/02 MySQL
uniapp开发打包多端应用完整方法指南
2022/12/24 Javascript