Object.keys(),Object.values(),Object.entries()

Object.keys()

ES5 引入了Object.keys()方法,返回一个数组,成员是参数对象自身的(不含继承的)所有可遍历(enumerable)属性的键名。

  1. var obj = { foo: 'bar', baz: 42 };
  2. Object.keys(obj)
  3. // ["foo", "baz"]

ES2017引入了跟Object.keys()配套的Object.values()Object.create(),作为遍历一个对象的补充手段,供for...of循环使用。

  1. let {keys, values, entries} = Object;
  2. let obj = { a: 1, b: 2, c: 3 };
  3. for (let key of keys(obj)) {
  4. console.log(key); // 'a', 'b', 'c'
  5. }
  6. for (let value of values(obj)) {
  7. console.log(value); // 1, 2, 3
  8. }
  9. for (let [key, value] of entries(obj)) {
  10. console.log([key, value]); // ['a', 1], ['b', 2], ['c', 3]
  11. }

Object.values()

Object.values()方法返回一个数组,成员是参数对象自身的(不含继承的)所有可遍历(enumerable)属性的键值。

  1. const obj = { foo: 'bar', baz: 42 };
  2. Object.values(obj)
  3. // ["bar", 42]

返回数组的成员顺序,与本章的《属性的遍历》部分介绍的排列规则一致。

  1. const obj = { 100: 'a', 2: 'b', 7: 'c' };
  2. Object.values(obj)
  3. // ["b", "c", "a"]

上面代码中,属性名为数值的属性,是按照数值大小,从小到大遍历的,因此返回的顺序是bca

Object.values()只返回对象自身的可遍历属性。

  1. const obj = Object.create({}, {p: {value: 42}});
  2. Object.values(obj) // []

上面代码中,Object.create()方法的第二个参数添加的对象属性(属性p),如果不显式声明,默认是不可遍历的,因为p的属性描述对象的enumerable默认是falseObject.values()不会返回这个属性。只要把enumerable改成trueObject.values()就会返回属性p的值。

  1. const obj = Object.create({}, {p:
  2. {
  3. value: 42,
  4. enumerable: true
  5. }
  6. });
  7. Object.values(obj) // [42]

Object.values()会过滤属性名为 Symbol 值的属性。

  1. Object.values({ [Symbol()]: 123, foo: 'abc' });
  2. // ['abc']

如果Object.values()方法的参数是一个字符串,会返回各个字符组成的一个数组。

  1. Object.values('foo')
  2. // ['f', 'o', 'o']

上面代码中,字符串会先转成一个类似数组的对象。字符串的每个字符,就是该对象的一个属性。因此,Object.values()返回每个属性的键值,就是各个字符组成的一个数组。

如果参数不是对象,Object.values()会先将其转为对象。由于数值和布尔值的包装对象,都不会为实例添加非继承的属性。所以,Object.values()会返回空数组。

  1. Object.values(42) // []
  2. Object.values(true) // []

Object.entries()

Object.create()方法返回一个数组,成员是参数对象自身的(不含继承的)所有可遍历(enumerable)属性的键值对数组。

  1. const obj = { foo: 'bar', baz: 42 };
  2. Object.entries(obj)
  3. // [ ["foo", "bar"], ["baz", 42] ]

除了返回值不一样,该方法的行为与Object.values()基本一致。

如果原对象的属性名是一个 Symbol 值,该属性会被忽略。

  1. Object.entries({ [Symbol()]: 123, foo: 'abc' });
  2. // [ [ 'foo', 'abc' ] ]

上面代码中,原对象有两个属性,Object.create()只输出属性名非 Symbol 值的属性。将来可能会有Reflect.ownEntries()方法,返回对象自身的所有属性。

Object.create()的基本用途是遍历对象的属性。

  1. let obj = { one: 1, two: 2 };
  2. for (let [k, v] of Object.entries(obj)) {
  3. console.log(
  4. `${JSON.stringify(k)}: ${JSON.stringify(v)}`
  5. );
  6. }
  7. // "one": 1
  8. // "two": 2

Object.create()方法的另一个用处是,将对象转为真正的Map结构。

  1. const obj = { foo: 'bar', baz: 42 };
  2. const map = new Map(Object.entries(obj));
  3. map // Map { foo: "bar", baz: 42 }

自己实现Object.create()方法,非常简单。

  1. // Generator函数的版本
  2. function* entries(obj) {
  3. for (let key of Object.keys(obj)) {
  4. yield [key, obj[key]];
  5. }
  6. }
  7. // 非Generator函数的版本
  8. function entries(obj) {
  9. let arr = [];
  10. for (let key of Object.keys(obj)) {
  11. arr.push([key, obj[key]]);
  12. }
  13. return arr;
  14. }

es6 Object.keys(),Object.values(),Object.entries()相关推荐

  1. laravel-集合对象的销毁forget,重组values(),pluck ()方法

    1.通过集合的键来移除掉集合中的一个项目: $collection = collect(['name' => 'taylor', 'framework' => 'laravel']);$c ...

  2. java中RIGHT的值_java循环遍历, reduce(),reduceRight()方法和Object,keys遍历对象的属性...

    最近几年,随着高新技术的不断出现,各种编程软件也开始进入到人们的视野当中.今天就来为大家说一下java编程语言的基础知识,也就是java循环遍历, reduce(),reduceRight()方法和O ...

  3. es6 遍历数组对象获取所有的id_ES6对象遍历Object.keys()方法

    [Object.keys()] ES5 引入了Object.keys()方法,返回一个数组,成员是参数对象自身的(不含继承的)所有可遍历(enumerable)属性的键名var obj = { foo ...

  4. Object.keys()、Object.values()、Object.entries()的用法

    一.Object.keys(obj) 参数:要返回其枚举自身属性的对象 返回值:一个表示给定对象的所有可枚举属性的字符串数组 处理对象,返回可枚举的属性数组 let person = {name:&q ...

  5. Reflect.ownKeys()与Object.keys()区别 以及 JS中的可枚举属性与不可枚举属性

    代码test1: var obj = {} Object.defineProperty(obj, 'method1', {value: function () {alert("Non enu ...

  6. Object.keys()

    1.Object.keys(),返回一个所有元素为字符串的数组,其元素来自于从给定的object上面可直接枚举的属性.这些属性的顺序与手动遍历该对象属性时的一致. // 简单数组 var arr = ...

  7. for in、for of、forEach、Object.keys(obj)、Object.getOwnPropertyNames(obj)的区别、优缺点和使用场景

    先做一个测试题: const arr = [1, 2, 3] arr.name = 'name' // 不要这么做,只是为了测试 Array.prototype.test = function () ...

  8. 用一个月面试了 大厂,中厂,小厂的总结|2021 年中总结

    推荐:两年前端程序媛从0到18k的逆袭之路 | 2021年中总结 image.png 求点赞+求分享+求评论,哦耶!!!(基本工资有一部分花在付费学习上) (文末有彩蛋...).一个朋友,面试的小哥, ...

  9. 一个月面试大厂,中厂,小厂的总结|2021 年中总结

    一个朋友,面试的小哥,每天早晨六点起床学习,三本两年多经验拿了年包 50w 的 offer.某大佬: 你看很多,校招24k白菜价,谁又拿了大厂的offer.你会发现,他们不但学历高,而且都十分的努力. ...

  10. hexo(sakura)给博客增添侧边栏(回到顶部,跳转评论,深色模式,播放音乐)Valine-1.4.4新版本尝鲜+个性制定(表情包、qq头像、UI样式)

    文章目录 hexo(sakura)给博客增添侧边栏(回到顶部,跳转评论,深色模式,播放音乐) 原理 直接使用 Valine-1.4.4新版本尝鲜+个性制定(表情包.qq头像.UI样式) 总结 本文全是 ...

最新文章

  1. CF Educational Round 23 F.MEX Queries
  2. 可扩展性的builder模式的构建方法
  3. 现在,用音频也能指挥GAN生成图像了
  4. Redis-学习笔记02【Redis命令操作】
  5. 壊小子的学习【日常阅读篇】(三)常规学习类图书
  6. 微软发布IoT应用现状报告:88%国内企业已使用IoT;技术人才仍为最大需求;三分之一企业死于构想阶段...
  7. sqlmap的篡改绕过WAF
  8. 关于序列化的 10 几个问题,你肯定不知道
  9. 启动提示archlinux中virtualbox无法运行问题解决
  10. python数据库定时更新脚本——(一)GitPython拉取代码
  11. JavaScript 02
  12. python编写linux巡检脚本_python结合shell脚本实现简单的日常集中巡检
  13. mybatis java 帅帅 2021年5月17日20:36:25
  14. mysql建表语句转oracle_求大神将该MySQL建表语句改为oracle的,感激不尽。
  15. talentq测试题库rb_talentq测试题目拐
  16. php中strpos什么意思,PHP使用strpos()和strrpos()定位文本
  17. 有利于排名的网页标题和描述创作
  18. Amazon 邮箱大全
  19. IntelliJ IDEA 2018版本操作总结(长期更新)
  20. Java代码实现字符串压缩和解压缩

热门文章

  1. Maven入门学习,安装及创建项目
  2. python xlrd模块
  3. 杭电ACM--2004成绩转换
  4. 数据结构 之 图的存储和遍历
  5. Linux学习笔记 文件服务Vsftp详细介绍
  6. PowerDesigner逆向工程,从数据库导出PDM(包括采坑记录)
  7. 服务器数据库带宽费开票项目,服务器带宽和访问数据库速度
  8. php函数 chm,php函数手册chm最新
  9. 一篇图像识别的科普文
  10. weblogic-开发模式转变为生产模式生产模式转变为开发模式