ES9 新增特性：Object.fromEntries()

ES9 新增特性：Object.fromEntries()

ES9（ECMAScript 2018）是 JavaScript 语言的最新版本，它引入了一些重要的特性，其中之一就是 Object.fromEntries() 方法。本文将深入讲解这个新特性，包括其作用、用法以及示例代码。

作用

Object.fromEntries() 方法的作用是将一个由键-值对数组转换为一个对象。例如，我们有一个二维数组：

const arr = [['name', 'Lucy'], ['age', 18], ['gender', 'female']];

现在我们可以使用 Object.fromEntries() 方法将其转换成一个对象：

const obj = Object.fromEntries(arr);
console.log(obj);
// 输出：{name: "Lucy", age: 18, gender: "female"}

注意：该方法是 ES2019（也称为 ES10）才正式通过的，因此在一些老的浏览器中可能不支持，使用前需要先检查当前环境是否支持该方法。

使用

Object.fromEntries() 方法非常简单，只需传入一个键-值对数组，即可将其转换为一个对象。例如：

const arr = [['a', 1], ['b', 2], ['c', 3]];
const obj = Object.fromEntries(arr);
console.log(obj);
// 输出：{a: 1, b: 2, c: 3}

如果键名是字符串，可以使用对象字面量的方式简化代码：

const arr = [['name', 'Lucy'], ['age', 18], ['gender', 'female']];
const obj = Object.fromEntries(arr);
console.log(obj);
// 输出：{name: "Lucy", age: 18, gender: "female"}

示例代码

以下是一个具体的示例，演示如何使用 Object.fromEntries() 方法：

-- -------------------- ---- -------
----- ----- - ---------------------------------
----- ------ - ----------------------------------
----- ------ - ----------------------------------

-------------------------------- -- -- -
  ----- --- - ----------------------
    --------- -- ----------------
    ----------- ------- -- ------------------------- ----------------------------

  ----- --- - ------------------------
  ------------------ - ------------------- ----- ---
---

上述代码定义了三个变量，分别是 input、button 和 output。它们分别表示 HTML 页面上的输入框、按钮和输出框。当用户点击按钮时，会将输入框中的内容转换为一个对象，并显示在输出框中。

首先，我们使用 input.value 获取用户输入的字符串，该字符串包含多个键-值对，以 & 和 = 分隔。为了将其转换为二维数组，我们使用 split() 方法将其分隔成单个键-值对，然后使用 map() 方法将每个键-值对分隔成两个独立的元素。最后，我们调用 Object.fromEntries() 将二维数组转换为对象。

最后，我们使用 JSON.stringify() 将对象转换为 JSON 格式的字符串，并将其显示在输出框中。

结论

ES9 新增特性 Object.fromEntries() 方法非常实用，可以方便快捷地将键-值对数组转换为对象。只要浏览器支持该方法，在开发过程中就可以大大提高效率。

虽然这个方法非常简单易懂，但是通过学习该方法，我们也可以更深入地了解 JavaScript 中对象的定义和操作，帮助我们更好地理解编程语言的本质。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66fb8a8f44713626015e432f