【译】关于Object.fromEntries

栏目: JavaScript · 发布时间: 5年前

内容简介:原文:v8.dev/features/ob…作者:Mathias Bynens翻译:前端小白

原文:v8.dev/features/ob…

作者:Mathias Bynens

翻译:前端小白

Object.fromEntries 是javascript Object 对象新增的一个非常实用的方法。在解释它的功能之前,我们先了解下已经存在的 Object.entries API

Object.entries

Object.entries 已经出现一段时间了,

浏览器支持(了解更多):

【译】关于Object.fromEntries

对于对象中的每个键值对, Object.entries 提供一个数组,其中第一个元素是键,第二个元素是值。

Object.entriesfor-of 结合起来特别有用,因为它使您能够非常优雅地遍历对象中的所有键值对

const entries = Object.entries(object);
// → [['x', 42], ['y', 50]]

for (const [key, value] of entries) {
  console.log(`The value of ${key} is ${value}.`);
}
// Logs:
// The value of x is 42.
// The value of y is 50.
复制代码

但是,到目前为止还没有一个简单的方法,可以从 entries 得到和它相对应的 object

Object.fromEntries

Object.fromEntries 这个新的API实现了与 Object.entries 相反的操作。这使得根据对象的 entries 很容易得到 object

const object = { x: 42, y: 50 };
const entries = Object.entries(object);
// → [['x', 42], ['y', 50]]

const result = Object.fromEntries(entries);
// → { x: 42, y: 50 }
复制代码

一个常见的用法就是转换对象。现在可以通过遍历它的 entries ,然后使用您可能已经熟悉的数组方法来实现这一点

const object = { x: 42, y: 50, abc: 9001 };
const result = Object.fromEntries(
  Object.entries(object)
    .filter(([ key, value ]) => key.length === 1)
    .map(([ key, value ]) => [ key, value * 2 ])
);
// → { x: 84, y: 100 }
复制代码

在上面例子中,我们对对象进行过滤,得到长度为1的 key ,即 xy ,而不是 abc 。然后通过 map 得到更新后的键值对。在本例中,我们将每个值乘以2,使其翻倍。最终的结果是一个新对象,只有属性x和y,以及新值。

Objects vs. maps

JavaScript还支持Map,这通常是比常规对象更合适的数据结构。所以当你可以完全控制的代码时,你可以使用映射而不是对象。然而,作为开发人员,您并不总是能够选择哪种形式。有时,您正在操作的数据来自外部API或库函数,这些函数提供对象而不是映射。

Object.entries 使从 objectsmaps 非常简单

const object = { language: 'JavaScript', coolness: 9001 };

// Convert the object into a map:
const map = new Map(Object.entries(object));
复制代码

反过来也同样有用:当你的代码使用 map ,你也可能需要在某个时候序列化您的数据,例如将其转换为JSON以发送API请求。或者,您可能需要将数据传递给另一个库,该库期望对象而不是映射。在这些情况下,您需要基于映射数据创建一个对象。 Object.fromEntries 使其变得很简单

// Convert the map back into an object:
const objectCopy = Object.fromEntries(map);
// → { language: 'JavaScript', coolness: 9001 }
复制代码

Object.entriesObject.fromEntries 这两个方法让我们很容易在 mapsobjects 之间相互转换

警告:小心数据丢失

当将映射转换为像上面例子中那样的普通对象时,有一个隐含的假设,即每个键都是惟一字符串化的。如果这个假设不成立,就会发生数据丢失

const map = new Map([
  [{}, 'a'],
  [{}, 'b'],
]);
Object.fromEntries(map);
// → { '[object Object]': 'b' }
// Note: the value 'a' is nowhere to be found, since both keys
// stringify to the same value of '[object Object]'.
复制代码

所以在我们使用 Object.fromEntries 或者其他方法将 map 转换为 object 之前,确保 map 的键产生唯一的 toString 结果。


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

PHP高级开发技术与应用

PHP高级开发技术与应用

曹铁群、孙一江、张永学 / 清华大学出版社 / 2002-5-1 / 32.00

作为一本介绍PHP高级开发技术的书籍,本书并不像一般介绍PHP语言的书籍那样讲述大量的语法规则,罗列大量的函数,而是着眼于PHP在Web中的实际应用,特别是PHP对最新技术的支持,比如WAP技术、XML技术等。 本书涉及到的内容主要有:高级环境配置、高级语法和应用、正则表达式、面向对象技术、高级图像技术、用PHPLIB实现模板的处理、用PHPDoc实现文档的自动生成、PHP与组件技术、PH......一起来看看 《PHP高级开发技术与应用》 这本书的介绍吧!

JSON 在线解析
JSON 在线解析

在线 JSON 格式化工具

html转js在线工具
html转js在线工具

html转js在线工具