迅速了解一下ES10中Object.fromEntries的用法使用

Object.fromEntries 方法就是 entries 的逆操作，作用是将一个键值对数组转化为一个对象

同样的该方法也已经成为 ES10 中 stage4 提案：

Object.entries

在介绍 fromEntries 之前，回顾一下 entries 的用法。这个方法返回的是对象自身的、可枚举的属性组成的数组：

const obj = { a: '1', b: 2 }
Object.entries(obj)

也可以通过 new Map 构造函数将对象转为 Map：

new Map(Object.entries(obj))
// Map(2) {"a" => "1", "b" => 2}

Object.fromEntries

fromEntries 方法则刚好相反，将数组转为对象：

Object.fromEntries([['a', '1'], ['b', 2]])

当然也可以传入一个 Map 将其转为对象：

const map = new Map().set('a', 1).set('b', 2)

Object.fromEntries(map)

几个注意事项

当传入的参数中有重复出现的 key：

传入给 fromEntries 的参数，如果有重复的 key 出现，后面的会被采用：

Object.fromEntries([['a', '1'], ['a', '2']])

虽然 entries 不支持 symbol 作为 key，但 fromEntries 却可以：

Object.fromEntries([[s, 1]])
Object.entries({ s: 1 })

上述代码效果如下，entreis 接收的对象中如果有 symbol 作为 key 会直接被转换为字符串：

key 为字符串或 symbol 之外的类型会被强制转为字符串：

他可以接收任何类数组，如 Map 等，甚至是有自定义迭代器的对象：

obj = {}
obj[Symbol.iterator] = function* () {
  yield [1, 11]
  yield [2, 22]
  yield [3, 33]
}

console.dir(Object.fromEntries(obj))

最后还有只支持创建对象可遍历的属性

应用：过滤属性

定义一个函数，这个函数第一个参数为对象，另外接收其他几个参数作为需要保留的属性

function foo(obj, ...keys) {
  return Object.fromEntries(Object.entries(obj)
    .filter(([key]) => keys.includes(key))
  )
}

console.table(foo({ name: 'oli', age: '12' }, 'name'))

应用：处理表单

假设我们有这样一组数据：

[{
  name: 'oli',
  age: 12
}, {
  name: 'troy',
  age: 14
}]

如果需要将其填充到 csv、sql 数据库表中，那么只需要如下方法过滤数据：

arr = [{
  name: 'oli',
  age: 12
}, {
  name: 'troy',
  age: 14
}]

obj = Object.fromEntries(
  arr.map(({name, age}) => [name, age])
)

console.table(obj)

数据过滤完毕后就可以很轻松的粘贴到 Excel 表格或方便的存储到数据库中

应用：交换属性和值

function foo(obj) {
  return Object.fromEntries(Object.entries(obj)
    .map(([key, value]) => [value, key])
  )
}

console.table({ name: 'oli', age: '12' })
console.table(foo({ name: 'oli', age: '12' }))

还有其他通过使用数组方法来实现的各种功能，这里就不一一展示了

应用：将 url 查询字符串转为对象

query = Object.fromEntries(new URLSearchParams('foo=bar&baz=qux'))
// {foo: "bar", baz: "qux"}

测试环境

想要尝试的童鞋，需要下载 chrome 测试版，保证 chrome 浏览器版本要大于 73:

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • ES10 特性的完整指南小结

    本篇文章主要介绍了ES10 特性的完整指南,分享给大家,具体如下: ES10 还只是一个草案.但是除了 Object.fromEntries 之外,Chrome 的大多数功能都已经实现了,为什么不早点开始探索呢?当所有浏览器都开始支持它时,你将走在前面,这只是时间问题. 在新的语言特性方面,ES10 不如 ES6 重要,但它确实添加了一些有趣的特性(其中一些功能目前还无法在浏览器中工作: 2019/02/21) 在 ES6 中,箭头函数无疑是最受欢迎的新特性,在 ES10 中会是什么呢? Big

  • 迅速了解一下ES10中Object.fromEntries的用法使用

    Object.fromEntries 方法就是 entries 的逆操作,作用是将一个键值对数组转化为一个对象 同样的该方法也已经成为 ES10 中 stage4 提案: Object.entries 在介绍 fromEntries 之前,回顾一下 entries 的用法.这个方法返回的是对象自身的.可枚举的属性组成的数组: const obj = { a: '1', b: 2 } Object.entries(obj) 也可以通过 new Map 构造函数将对象转为 Map: new Map(

  • js中Object.create实例用法详解

    1.用Object.create()方法创建新对象,并使用现有对象提供新对象的proto. 2.提供两个参数,第一个是新创建的原型对象,第二个是为新创建的对象添加属性的对象. 实例 // father 对象 let father = { name: 'father', friend: ['abby', 'bob'] } // 生成新实例对象 child1 let child1 = Object.create(father) // 更改值类型属性 child1.name = '修改了name' c

  • JavaScript中Object.prototype.toString方法的原理

    在JavaScript中,想要判断某个对象值属于哪种内置类型,最靠谱的做法就是通过Object.prototype.toString方法. var arr = []; console.log(Object.prototype.toString.call(arr)) //"[object Array]" 本文要讲的就是,toString方法是如何做到这一点的,原理是什么. ECMAScript 3 在ES3中,Object.prototype.toString方法的规范如下: 15.2.

  • 详谈Java中Object类中的方法以及finalize函数作用

    Object是所有类的父类,任何类都默认继承Object. 一.Object类中的方法 1．clone方法 保护方法,实现对象的浅复制,只有实现了Cloneable接口才可以调用该方法,否则抛出CloneNotSupportedException异常. 主要是JAVA里除了8种基本类型传参数是值传递,其他的类对象传参数都是引用传递,我们有时候不希望在方法里讲参数改变,这是就需要在类中复写clone方法. 2．getClass方法 final方法,获得运行时类型. 3．toString方法 该方法

  • Java中Object toString方法简介_动力节点Java学院整理

    一.Object类介绍  Object类在Java里面是一个比较特殊的类,JAVA只支持单继承,子类只能从一个父类来继承,如果父类又是从另外一个父类继承过来,那他也只能有一个父类,父类再有父类,那也只能有一个,JAVA为了组织这个类组织得比较方便,它提供了一个最根上的类,相当于所有的类都是从这个类继承,这个类就叫Object.所以Object类是所有JAVA类的根基类,是所有JAVA类的老祖宗.所有的类,不管是谁,都是从它继承下来的. 二.toString方法介绍  一个字符串和另外一种类型连接

  • jquery中object对象循环遍历的方法

    一个朋友问对象如何转为数组,当我问他为啥要转得时候,他告诉我,数组可以用js循环遍历,而对象则不可以.其实呢,对象同样可以循环遍历的啊.不用转换也可以循环!说明你对js或者jquery的某些操作不是很熟练!在这里我简单介绍一下! 案例 我们看如下对象: var data={ 张三:69, 李四:72, 王五:90, 二麻子:88, 前端博客:100, haorooms : 98, 王大壮:99 } 假如上面是后台返回的一个key,一个是value的对象(这种对象相信大家经常遇到吧!),现在要把这

  • JavaScript中object和Object的区别(详解)

    JavaScript中object和Object的区别(详解)

    JavaScript中object和Object有什么区别,为什么用typeof检测对象,返回object,而用instanceof 必须要接Object呢 这个问题和我之前遇到的问题非常相似,我认为这里有两个问题需要解决,一个是运算符new的作用机制,一个是function关键字和Funtion内置对象之间的区别.看了一些前辈的博客和标准,这里帮提问者总结一下. 1.new new运算符的作用是创建一个对象实例.这个对象可以是用户自定义的,也可以是带构造函数的一些系统自带的对象.如果 new

  • Java 中Object的wait() notify() notifyAll()方法使用

    Java 中Object的wait() notify() notifyAll()方法使用 一.前言 对于并发编程而言,除了Thread以外,对Object对象的wati和notify对象也应该深入了解其用法,虽然知识点不多. 二.线程安全基本知识 首先应该记住以下基本点,先背下来也无妨: 同一时间一个锁只能被一个线程持有 调用对象的wait()和notify()前必须持有它 三.wait()和notify()理解 3.1 wait()和notify()方法简介 wait()和notify()都是

  • JS中Object对象的原型概念基础

    JS中Object对象的原型概念基础

    对象概念 在 javascript 中, 一切引用类型均为对象. 如 function Foo () {} 中,Foo本身就是一个对象的引用. 创建对象方式 字面量方式 new 构造函数函数声明 Object.create 字面量对象 javascript语言级别快速创建对象的实例 var obj = {foo: 'foo', bar: 'bar'}; // Object对象字面量 var obj2 = [obj, 'foo', 'bar']; // Array数组字面量 var obj3 =

  • .NET Core中Object Pool的多种用法详解

    前言 复用,是一个重要的话题,也是我们日常开发中经常遇到的,不可避免的问题. 举个最为简单,大家最为熟悉的例子,数据库连接池,就是复用数据库连接. 那么复用的意义在那里呢? 简单来说就是减少不必要的资源损耗. 除了数据库连接,可能在不同的情景或需求下,还会有很多其他对象需要进行复用,这个时候就会有所谓的 Object Pool(对象池). 小伙伴们应该也自己实现过类似的功能,或用ConcurrentBag,或用ConcurrentQueue,或用其他方案. 这也里分享一个在微软文档中的实现 Ho

随机推荐