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 相关文章推荐
JavaScript 学习小结(适合新手参考)
Jul 30 Javascript
IE FF OPERA都可用的弹出层实现代码
Sep 29 Javascript
js判断一个元素是否为另一个元素的子元素的代码
Mar 21 Javascript
控制页面按钮在后台执行期间不重复提交的JS方法
Jun 24 Javascript
动态创建按钮的JavaScript代码
Jan 29 Javascript
原生js实现查询天气小应用
Dec 09 Javascript
javascript容错处理代码(屏蔽js错误)
Jan 20 Javascript
canvas绘制的直线动画
Jan 23 Javascript
JavaScript正则替换HTML标签功能示例
Mar 02 Javascript
vue 解决路由只变化参数页面组件不更新问题
Nov 05 Javascript
JavaScript实现简单的计算器
Jan 16 Javascript
webpack5 联邦模块介绍详解
Jul 08 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
Flash空降上海 化身大魔王接受挑战
2020/03/02 星际争霸
解决163/sohu/sina不能够收到PHP MAIL函数发出邮件的问题
2009/03/13 PHP
php操作xml
2013/10/27 PHP
[原创]PHP实现字节数Byte转换为KB、MB、GB、TB的方法
2017/08/31 PHP
juqery 学习之五 文档处理 包裹、替换、删除、复制
2011/02/11 Javascript
html中的input标签的checked属性jquery判断代码
2012/09/19 Javascript
javascript+HTML5的Canvas实现Lab单车动画效果
2015/08/07 Javascript
微信小程序  checkbox组件详解及简单实例
2017/01/10 Javascript
canvas轨迹回放功能实现
2017/12/20 Javascript
jQuery中复合选择器简单用法示例
2018/03/31 jQuery
JS对象与json字符串相互转换实现方法示例
2018/06/14 Javascript
angularJs中跳转到指定的锚点实例($anchorScroll)
2018/08/31 Javascript
Angular父子组件通过服务传参的示例方法
2018/10/31 Javascript
通过实例了解Javascript柯里化流程
2020/03/03 Javascript
Vue 使用typescript如何优雅的调用swagger API
2020/09/01 Javascript
浅谈JavaScript 声明提升
2020/09/14 Javascript
解决vue侦听器watch,调用this时出现undefined的问题
2020/10/30 Javascript
python生成随机验证码(中文验证码)示例
2014/04/03 Python
python简单实现基数排序算法
2015/05/16 Python
Python中的下划线详解
2015/06/24 Python
Python中模块string.py详解
2017/03/12 Python
Python对文件和目录进行操作的方法(file对象/os/os.path/shutil 模块)
2017/05/08 Python
浅谈Python中的全局锁(GIL)问题
2019/01/11 Python
python的set处理二维数组转一维数组的方法示例
2019/05/31 Python
解决python多行注释引发缩进错误的问题
2019/08/23 Python
TensorFlow实现打印每一层的输出
2020/01/21 Python
scrapy redis配置文件setting参数详解
2020/11/18 Python
canvas 基础之图像处理的使用
2020/04/10 HTML / CSS
Vuori官网:运动服装的终级表现
2021/01/27 全球购物
华为python面试题
2016/05/03 面试题
高中生自我评价个人范文
2013/11/09 职场文书
《小松树和大松树》教学反思
2014/02/20 职场文书
派出所副所长四风问题个人整改措施思想汇报
2014/10/13 职场文书
2015年物流客服工作总结
2015/07/27 职场文书
清洁工工作总结
2015/08/11 职场文书
2016年幼儿园教师师德承诺书
2016/03/25 职场文书