es6 Object.keys(),Object.values(),Object.entries()
Object.keys(),Object.values(),Object.entries()
Object.keys()
ES5 引入了Object.keys()
方法,返回一个数组,成员是参数对象自身的(不含继承的)所有可遍历(enumerable)属性的键名。
var obj = { foo: 'bar', baz: 42 };
Object.keys(obj)
// ["foo", "baz"]
ES2017引入了跟Object.keys()
配套的Object.values()
和Object.create()
,作为遍历一个对象的补充手段,供for...of
循环使用。
let {keys, values, entries} = Object;
let obj = { a: 1, b: 2, c: 3 };
for (let key of keys(obj)) {
console.log(key); // 'a', 'b', 'c'
}
for (let value of values(obj)) {
console.log(value); // 1, 2, 3
}
for (let [key, value] of entries(obj)) {
console.log([key, value]); // ['a', 1], ['b', 2], ['c', 3]
}
Object.values()
Object.values()
方法返回一个数组,成员是参数对象自身的(不含继承的)所有可遍历(enumerable)属性的键值。
const obj = { foo: 'bar', baz: 42 };
Object.values(obj)
// ["bar", 42]
返回数组的成员顺序,与本章的《属性的遍历》部分介绍的排列规则一致。
const obj = { 100: 'a', 2: 'b', 7: 'c' };
Object.values(obj)
// ["b", "c", "a"]
上面代码中,属性名为数值的属性,是按照数值大小,从小到大遍历的,因此返回的顺序是b
、c
、a
。
Object.values()
只返回对象自身的可遍历属性。
const obj = Object.create({}, {p: {value: 42}});
Object.values(obj) // []
上面代码中,Object.create()
方法的第二个参数添加的对象属性(属性p
),如果不显式声明,默认是不可遍历的,因为p
的属性描述对象的enumerable
默认是false
,Object.values()
不会返回这个属性。只要把enumerable
改成true
,Object.values()
就会返回属性p
的值。
const obj = Object.create({}, {p:
{
value: 42,
enumerable: true
}
});
Object.values(obj) // [42]
Object.values()
会过滤属性名为 Symbol 值的属性。
Object.values({ [Symbol()]: 123, foo: 'abc' });
// ['abc']
如果Object.values()
方法的参数是一个字符串,会返回各个字符组成的一个数组。
Object.values('foo')
// ['f', 'o', 'o']
上面代码中,字符串会先转成一个类似数组的对象。字符串的每个字符,就是该对象的一个属性。因此,Object.values()
返回每个属性的键值,就是各个字符组成的一个数组。
如果参数不是对象,Object.values()
会先将其转为对象。由于数值和布尔值的包装对象,都不会为实例添加非继承的属性。所以,Object.values()
会返回空数组。
Object.values(42) // []
Object.values(true) // []
Object.entries()
Object.create()
方法返回一个数组,成员是参数对象自身的(不含继承的)所有可遍历(enumerable)属性的键值对数组。
const obj = { foo: 'bar', baz: 42 };
Object.entries(obj)
// [ ["foo", "bar"], ["baz", 42] ]
除了返回值不一样,该方法的行为与Object.values()
基本一致。
如果原对象的属性名是一个 Symbol 值,该属性会被忽略。
Object.entries({ [Symbol()]: 123, foo: 'abc' });
// [ [ 'foo', 'abc' ] ]
上面代码中,原对象有两个属性,Object.create()
只输出属性名非 Symbol 值的属性。将来可能会有Reflect.ownEntries()
方法,返回对象自身的所有属性。
Object.create()
的基本用途是遍历对象的属性。
let obj = { one: 1, two: 2 };
for (let [k, v] of Object.entries(obj)) {
console.log(
`${JSON.stringify(k)}: ${JSON.stringify(v)}`
);
}
// "one": 1
// "two": 2
Object.create()
方法的另一个用处是,将对象转为真正的Map
结构。
const obj = { foo: 'bar', baz: 42 };
const map = new Map(Object.entries(obj));
map // Map { foo: "bar", baz: 42 }
自己实现Object.create()
方法,非常简单。
// Generator函数的版本
function* entries(obj) {
for (let key of Object.keys(obj)) {
yield [key, obj[key]];
}
}
// 非Generator函数的版本
function entries(obj) {
let arr = [];
for (let key of Object.keys(obj)) {
arr.push([key, obj[key]]);
}
return arr;
}
es6 Object.keys(),Object.values(),Object.entries()相关推荐
- laravel-集合对象的销毁forget,重组values(),pluck ()方法
1.通过集合的键来移除掉集合中的一个项目: $collection = collect(['name' => 'taylor', 'framework' => 'laravel']);$c ...
- java中RIGHT的值_java循环遍历, reduce(),reduceRight()方法和Object,keys遍历对象的属性...
最近几年,随着高新技术的不断出现,各种编程软件也开始进入到人们的视野当中.今天就来为大家说一下java编程语言的基础知识,也就是java循环遍历, reduce(),reduceRight()方法和O ...
- es6 遍历数组对象获取所有的id_ES6对象遍历Object.keys()方法
[Object.keys()] ES5 引入了Object.keys()方法,返回一个数组,成员是参数对象自身的(不含继承的)所有可遍历(enumerable)属性的键名var obj = { foo ...
- Object.keys()、Object.values()、Object.entries()的用法
一.Object.keys(obj) 参数:要返回其枚举自身属性的对象 返回值:一个表示给定对象的所有可枚举属性的字符串数组 处理对象,返回可枚举的属性数组 let person = {name:&q ...
- Reflect.ownKeys()与Object.keys()区别 以及 JS中的可枚举属性与不可枚举属性
代码test1: var obj = {} Object.defineProperty(obj, 'method1', {value: function () {alert("Non enu ...
- Object.keys()
1.Object.keys(),返回一个所有元素为字符串的数组,其元素来自于从给定的object上面可直接枚举的属性.这些属性的顺序与手动遍历该对象属性时的一致. // 简单数组 var arr = ...
- for in、for of、forEach、Object.keys(obj)、Object.getOwnPropertyNames(obj)的区别、优缺点和使用场景
先做一个测试题: const arr = [1, 2, 3] arr.name = 'name' // 不要这么做,只是为了测试 Array.prototype.test = function () ...
- 用一个月面试了 大厂,中厂,小厂的总结|2021 年中总结
推荐:两年前端程序媛从0到18k的逆袭之路 | 2021年中总结 image.png 求点赞+求分享+求评论,哦耶!!!(基本工资有一部分花在付费学习上) (文末有彩蛋...).一个朋友,面试的小哥, ...
- 一个月面试大厂,中厂,小厂的总结|2021 年中总结
一个朋友,面试的小哥,每天早晨六点起床学习,三本两年多经验拿了年包 50w 的 offer.某大佬: 你看很多,校招24k白菜价,谁又拿了大厂的offer.你会发现,他们不但学历高,而且都十分的努力. ...
- hexo(sakura)给博客增添侧边栏(回到顶部,跳转评论,深色模式,播放音乐)Valine-1.4.4新版本尝鲜+个性制定(表情包、qq头像、UI样式)
文章目录 hexo(sakura)给博客增添侧边栏(回到顶部,跳转评论,深色模式,播放音乐) 原理 直接使用 Valine-1.4.4新版本尝鲜+个性制定(表情包.qq头像.UI样式) 总结 本文全是 ...
最新文章
- CF Educational Round 23 F.MEX Queries
- 可扩展性的builder模式的构建方法
- 现在,用音频也能指挥GAN生成图像了
- Redis-学习笔记02【Redis命令操作】
- 壊小子的学习【日常阅读篇】(三)常规学习类图书
- 微软发布IoT应用现状报告:88%国内企业已使用IoT;技术人才仍为最大需求;三分之一企业死于构想阶段...
- sqlmap的篡改绕过WAF
- 关于序列化的 10 几个问题,你肯定不知道
- 启动提示archlinux中virtualbox无法运行问题解决
- python数据库定时更新脚本——(一)GitPython拉取代码
- JavaScript 02
- python编写linux巡检脚本_python结合shell脚本实现简单的日常集中巡检
- mybatis java 帅帅 2021年5月17日20:36:25
- mysql建表语句转oracle_求大神将该MySQL建表语句改为oracle的,感激不尽。
- talentq测试题库rb_talentq测试题目拐
- php中strpos什么意思,PHP使用strpos()和strrpos()定位文本
- 有利于排名的网页标题和描述创作
- Amazon 邮箱大全
- IntelliJ IDEA 2018版本操作总结(长期更新)
- Java代码实现字符串压缩和解压缩