ECMAScript建议：Array.prototype。{Flat，flatMap}

ECMAScript创新

读者好，哈勃。 我提请您注意一件有趣的事 即将出现 已经出现在ECMAScript标准中。 它已经可用。 差不多 在所有浏览器中以及所有功能上。 这项创新只是糖包装，可以通过您自己的方式解决，我也将向您展示。 但是这种糖将使我们编写更少的代码，因为我们非常喜欢它。 因此，基本函数被添加到数组中，在这种情况下，其中有2个，这将使我们能够将多级数组扩展为一个或多个嵌套级。 是的，是的，正如他们所说的那样

ECMAScript建议：Array.prototype。{Flat，flatMap}

该提案曾经被称为Array.prototype.flat {ten，Map} 。 它具有舞台状态。 3 TC39的 4，即已经 应聘者 已完成 我认为值得分心，谈论这个非常重要的TC39和标准，熟悉的人可以跳过此讨论。 所以：

JavaScript标准及其准备方式。

ECMAScript

ECMAScript是由ECMA International开发和维护的标准。 它在1997年6月由Ecma大会通过。更具体地说， ECMAScript是ECMA-262标准，称为ECMAScript语言规范。 该标准是基于Netscape的Brendan Aich和Microsoft JScript解释器基于JavaScript的原始版本创建的，但此后有了显着发展。

JavaScript是ECMAScript规范的实现。 这意味着随着规范具有新的草稿或已发布的版本，浏览器和框架（例如Node.js）的开发人员应始终实现新功能。 为此，对这些浏览器和框架用来解释和执行JavaScript代码的引擎进行了更改。

为什么需要规格？ 不同的浏览器使用不同的JavaScript引擎，例如Chrome中的V8，Firefox中的SpiderMonkey等。 用JavaScript编写时，您希望所有环境中的所有引擎都能够完全相同地解析和执行代码。 没有标准化的规范，这些引擎中的任何一个都可以随意执行JavaScript，这显然不是很好。

TC39

Ecma国际技术委员会39 （又名TC39）是一个非常聪明的人的委员会，顺便说一句，它与一群参与者相关联，也很聪明。 他们大约每两个月都会在委员会会议上聚集一堂，并讨论预先准备的问题清单。
经过讨论和达成共识， TC39的目标是维护和更新先前提到的ECMAScript规范。 这包括语言语法，语义，库以及该语言所基于的相关技术。

此过程由TC39定义。 一切都始于扩展或更改规范的功能草案。 这些草稿通常来自开发者社区或TC39成员本身。 如果该提案有价值，那么该草案将成为正式提案的状态。

然后，在从构思到发布的过程中，该提案经历了几个特定阶段。 他们的编号从零到四个男性程序员 ：

[“Strawman”, “Proposal”, “Draft”, “Candidat”, “Finished”] 

进行任何下一步都需要TC39批准。 如果该提案已进入第4阶段，则可以预期它将被纳入ECMA-262标准规范的下一个正式发行版本中，并且最终将出现在运行JavaScript的环境中。 您可以从文档本身了解有关此过程的更多信息。

有关该标准介绍的所有现有建议可在github上找到
好吧，现在让我们更进一步...

Array.prototype.flat

flat（）方法返回一个新数组，

 var newArray = arr.flat(depth); 

其中将嵌套在数组下的所有元素递归“提升”到指定的深度级别。

一个例子：

 const arr1 = [1, 2, [3, 4]]; arr1.flat(); //? [1, 2, 3, 4] const arr2 = [1, 2, [3, 4, [5, 6]]]; arr2.flat(); //? [1, 2, 3, 4, [5, 6]] const arr3 = [1, 2, [3, 4, [5, 6]]]; arr3.flat(2); //? [1, 2, 3, 4, 5, 6] 

还有一个副作用，它删除了未定义的数组元素

一个例子：

 const arr4 = [1, 2, , 4, 5]; arr4.flat(); //? [1, 2, 4, 5] 

标题自己做

我们使用reduce和concat

一个例子：

 const arr1 = [1,2,3,[1,2,3,4, [2,3,4]]]; function flattenDeep(arr1) { return arr1.reduce((acc, val) => Array.isArray(val) ? acc.concat(flattenDeep(val)) : acc.concat(val), []); } flattenDeep(arr1); //? [1, 2, 3, 1, 2, 3, 4, 2, 3, 4] 

Array.prototype.flatMap

flatMap（）方法首先对每个元素应用一个函数，然后将结果转换为平面结构并将其放置在新数组中。 这与map函数相同，随后使用depth参数为1的flat函数，但是flatMap通常很有用，因为它的工作效率更高。

 var new_array = arr.flatMap(function callback(currentValue[, index[, array]]) { // return element for new_array }[, thisArg]) 

callback产生新数组元素的函数需要三个参数：

1. currentValue要处理的数组的当前元素。
2. index （可选）-要在数组中处理的项目的索引。
3. array （可选）-要遍历的数组。
   thisArg （可选）-调用回调函数时用作此值。
   返回值-一个新数组，其每个元素都是回调函数的结果，并被“提升”到级别1。

例如：

 [ { x: 1, y: 2 }, { x: 3, y: 4 }, { x: 5, y: 6 } ].flatMap(c => [cx, cy]) //? [1, 2, 3, 4, 5, 6] // or const orders = [ { orderId: 42, items: [ {name: 'soap', price: 1.99}, {name: 'shampoo', price: 4.99} ] }, { orderId: 1337, items: [ {name: 'toothpaste', price: 5.59}, {name: 'toothbrush', price: 8.99} ] } ]; orders.flatMap(i => i.items.map(i => i.name)); //? ["soap", "shampoo", "toothpaste", "toothbrush"] 

标题自己做

 var arr1 = [1, 2, 3, 4]; arr1.reduce((acc, x) => acc.concat([x * 2]), []); // [2, 4, 6, 8] 

结论

请记住，此功能之所以被添加到语言中是有原因的。 来自TC39的聪明人这样做的原因是提高了语言质量，抽象性，可用性等。 提前了解这些创新，当它们在各个地方正式发布并获得支持时，您可以立即开始工作，而不会浪费时间。 您还可以将自己定位为组织中的JavaScript专家，能够提供可以改进代码和产品本身的新语言功能。

ps：在撰写本文时：），提案移至阶段4
Array.prototype.{flat,flatMap}到第4阶段，根据2019.01.29 TC39