作者：DmitriPavlutin译者：FrontendXiaozhi来源：dmitripavlutin有梦想，有干货，微信搜【大千世界】凌晨关注这个洗碗的洗碗智慧.本文已收录到GitHubhttps://github.com/qq449245884/xiaozhi，里面有完整的测试站点、资料和我的一线厂商访谈系列文章。array.map()是一个非常有用的映射函数：它接受一个数组和一个映射函数，并返回一个新的映射数组。但是，array.map()有一个替代方法：array.flatMap()（自ES2019起可用）。这种方法使我们能够映射，但也可以删除甚至添加新项目到生成的映射数组中。1.更聪明的映射器有一个数字数组，我们如何创建一个每个数字加倍的新数组？使用array.map()函数是一个好方法。常量数字=[0,3,6];constdoubled=numbers.map(n=>n*2);控制台日志（加倍）；//logs[0,6,12]地址：https://jsfiddle.net/dmitri_p...numbers.map(number=>2*number)将数字数组映射到一个新数组，其中每个数字都加倍。对于需要一对一映射的情况，即映射数组与原始数组具有相同数量的项目，array.map()工作得很好。但是，如果我们需要在跳过0项的同时将数组的数量加倍怎么办？直接使用array.map()是不可能的，因为该方法总是创建一个映射数组，其项目数与原始数组相同。但是我们可以结合使用array.map()和array.filter()。常量数字=[0,3,6];constdoubled=numbers.filter(n=>n!==0).map(n=>n*2);控制台日志（加倍）；//logs[6,12]示例地址：https://jsfiddle.net/dmitri_p...array.map()和array.filter()可以解决问题，但是有没有更短的方法呢？一定。使用array.flatMap()方法，只需要一次方法调用即可执行映射和删除项目。常量数字=[0,3,6];常量加倍=数字。flatMap(number=>{returnnumber===0?[]:[2*number];});安慰。日志（加倍）；//logs[6,12]示例地址：https://jsfiddle.net/dmitri_p...通过仅使用numbers.flatMap()，您可以将一个数组映射到另一个数组，但您也可以跳过某些元素。接下来，让我们更详细地了解array.flatMap()的工作原理。2.array.flatMap()array.flatMap()函数接受一个回调函数作为参数并返回一个新的映射数组constmappedArray=array.flatMap((item,index,origArray)=>{//...return[value1,value2,...,valueN];}[,thisArg]);回调函数在原始数组中的每个项目上调用，具有3个参数：当前项目、索引和原始数组。然后，将回调函数返回的数组展平1级，并将结果项添加到映射数组中。此外，该方法接受第二个可选参数，表示回调中的this值。使用array.flatmap()的最简单方法是展平包含项目的数组constarrays=[[2,4],[6]];constflatten=arrays.flatMap(item=>item);控制台日志（展平）；//logs[2,4,6]示例地址：https://jsfiddle.net/dmitri_p...但是array.flatMap()可以做的不仅仅是简单的扁平化。通过控制从回调返回的数组项的数量：通过返回一个空数组从结果数组中删除项通过返回一个具有新值[newValue]的数组通过返回一个包含多个值数组的数组来修改映射项添加新项目：[newValue1,newValue2,...]例如，正如您在上一节中看到的，可以通过将项目加倍创建一个新数组，但也可以删除零。常量数字=[0,3,6];常量加倍=数字。flatMap(number=>{returnnumber===0?[]:[2*number];});安慰。日志（加倍）；//logs[6,12]现在，让我们看看它是如何工作的。如果当前项为0，则回调函数返回一个空数组[]。这意味着空数组[]在展平时不提供任何值。如果当前迭代项不为零，则返回[2*number]。展平[2*number]数组时，只会将2*number添加到结果数组中。您还可以使用array.flatMap()来增加映射数组中的项目数。例如，以下代码片段通过添加双数和三数将一个数字数组映射到一个新数组：constnumbers=[1,4];consttripled=numbers.flatMap(number=>{return[number,2*number,3*number];});console.log(trippled);//logs[1,2,3,4,8,12]示例地址：https://jsfiddle.net/dmitri_p...3:总结如果你想将一个数组映射成一个新数组，但同时控制要向新映射数组中添加多少项，那么array.flatMap()方法是一个好方法。array.flatMap(callback)的回调函数使用3个参数调用：当前迭代的项目、索引和原始数组。然后将从回调函数返回的数组展平1层深，并将生成的项目插入到生成的映射数组中。~最后，我是耍玩儿，新的一年我们一起洗洗洗刷吧！！！！！！代码部署后可能存在的bug，无法实时获知。事后为了解决这些bug，花费了大量的时间在日志调试上。顺便推荐一个好用的bug监控工具Fundebug。原文：https://dmitripavltin.com/jav...交流有梦想，有干货，微信搜索【大千世界】关注这位凌晨还在洗碗的洗碗智者。本文GitHubhttps://github.com/qq44924588...已收录，有完整的测试站点、资料和我的一线厂商访谈系列文章。
