在 ECMAScript 2019（ES10）中，引入了两个新的方法 Object.fromEntries 和 Array.prototype.flat。这两个方法在前端开发中非常有用，本文将对它们进行详细的解析和说明，以帮助您更好地学习和使用它们。
Object.fromEntries
Object.fromEntries 方法接受一个数组（或可迭代对象），并返回一个对象，该对象由数组中的键值对组成。每个键值对都是由一个数组或可迭代对象中的两个值组成，一个是键名，一个是相应的值。例如，下面的代码片段演示了如何使用 Object.fromEntries 将一个数组转换为对象：
----- --- - --------- -------- ------- ---- ---------- --------- ----- --- - ------------------------ ----------------- -- - ----- ------- ---- --- ------- ------ -
这个例子中，arr 数组包含了三个数组元素，每个数组元素都是键值对。使用 Object.fromEntries 将 arr 数组转换为对象，得到了一个具有相同键值对的对象，它们对应的键名和值来自原始数组的元素。
Object.fromEntries 在实际开发中非常有用，它可以将从后端接收到的数据转换为前端可用的对象，或者将抽象的数据结构转换为具体的对象。
Array.prototype.flat
Array.prototype.flat 方法可以将一个多维数组“扁平化”为一个一维数组。它接受一个整数作为参数，表示要扁平化的维度数。如果没有传递参数，则默认扁平化一维数组。例如，下面的代码片段演示了如何使用 Array.prototype.flat 操作符将嵌套数组扁平化：
----- --- - --- -- --- -- --- ----- ------------------------ -- --- -- -- -- --- --- ------------------------- -- --- -- -- -- -- --
上面的例子展示了如何将“ arr ”数组扁平化。第一次调用 flat() 方法默认会转化成一维数组，因此得到的结果为 [1, 2, 3, 4, [5, 6]]。而第二次调用 flat() 方法时，将嵌套数组全都连成一起，得到的结果为 [1, 2, 3, 4, 5, 6]。
Array.prototype.flat 在实际开发中也非常有用。例如，在使用表单提交数据时，表单数据通常是嵌套的，可以使用 flat() 方法将其变为平面结构，以便于后续处理。
示例代码
下面是一个将 Object.fromEntries 和 Array.prototype.flat 结合使用的示例代码。这个示例演示了如何从 API 中接收嵌套数组的数据，并将其转换为扁平化的对象数组。
----- ----- - - ----- ------- ------ ---- -------- ---- ---------- ------ ----- ------- --------------- ---- ------ ---- --------- ------ ----- ------ --------- ---- ---------- ---- ------- ----- -- ----- ------ - --------------- ----- -------- -- - ----- ------- - --------------- ------- -- ----------------- -- -- - - -- - -------------- ------ - --- ----- ------- -- --------- --- ----- ------- -- -- - ------ - --- ----- -------- ------------------- -- --- --------------------
以上示例展示了如何将“users”数组转换为具有以下结构的对象数组：[{id, name, average}]。在这个过程中，用到了 Object.fromEntries 方法将数组数据转换成对象，用到了 Array.prototype.flat 方法将嵌套数组扁平化。最后，对新生成的具体的对象进行了加工并计算了平均值，并将其转换成新的数组。
结论
在本文中，我们详细解析了 Object.fromEntries 和 Array.prototype.flat 两个方法，它们在前端开发中非常有用，并包含了相应的学习和指导意义。在实际的开发中，了解这些常用的方法可以极大地提高我们的代码效率，避免不必要的错误和浪费。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/670b4ca7d91dce0dc88940dd