当前位置: 首页 > Web前端 > HTML

更好的地图函数flatMap

时间:2023-03-28 19:50:13 HTML

更智能的JavaScript映射器:array.flatMap()原文:https://dmitripavlutin.com/ja...array.map()mapper函数,并返回一个新的映射数组。但是,还有一个替代方案array.map():(array.flatMap()自ES2019起可用)。此方法使您能够在生成的映射数组中映射并删除甚至添加新项目。1.更聪明的映射器有一个数字数组,你如何创建一个包含双倍项目的新数组?使用array.map()函数是个好主意:constnumbers=[0,3,6];constdoubled=numbers.map(n=>n*2);控制台日志(加倍);//logs[0,6,12]numbers.map(number=>2*number)将数组数字映射到一个新数组,其中每个数字都加倍。对于需要一对一映射的情况,这意味着映射数组将具有与原始数组相同数量的项目,array.map()效果很好。但是,如果您需要将数组的大小加倍并从映射中跳过零怎么办?直接使用array.map()是不可能的,因为该方法总是创建一个映射数组,其项目数与原始数组相同。但是您可以结合使用array.map()和array.filter():constnumbers=[0,3,6];constdoubled=numbers.filter(n=>n!==0).map(n=>n*2);控制台日志(加倍);//logs[6,12]双数组现在包含条目乘以数字2,并且也不包含任何零。好的,array.map()结合了array.filter()用于映射和过滤数组。但是有更短的方法吗?是的!多亏了array.flatMap()方法,您可以通过一次方法调用来执行映射和删除项目。以下是如何使用array.flatMap()返回一个包含双项的新映射数组,同时过滤掉零:constnumbers=[0,3,6];constdoubled=numbers.flatMap(number=>{returnnumber===0?[]:[2*number];});控制台日志(加倍);//logs[6,12]通过仅使用numbers.flatMap()可以将一个数组映射到另一个数组,但也可以跳过映射中的某些元素。让我们更详细地了解array.flatMap()是如何工作的。2.array.flatMap()array.flatMap()函数接受一个回调函数作为参数并返回一个新的映射数组:constmappedArray=array.flatMap((item,index,origArray)=>{//...return[value1,value2,...,valueN];}[,thisArg]);回调函数在原始数组中的每个itam上调用,具有3个参数:当前项、索引和原始数组。然后将回调返回的数组展平1级深,并将生成的项目添加到映射数组中。此外,该方法接受第二个可选参数,指示回调中的this值。使用array.flatMap()的最简单方法是将包含项目的数组展平为数组:constarrays=[[2,4],[6]];constflatten=arrays.flatMap(item=>item);console.log(flatten);//日志[2,4,6]包含上面示例数组中的数字数组:[[2,4],[6]]。调用arrays.flatMap(item=>item)将数组展平为[2,4,6]。但是array.flatMap()可以做的不仅仅是简单的扁平化。通过控制从回调返回的数组项的数量,您可以:通过返回一个空数组[]从结果数组中移除项通过返回一个具有一个新值[newValue]的数组来修改映射项或者返回一个具有多个值的数组Array添加[newValue1,newValue2,...]新项目:。例如,正如您在上一节中看到的,您可以通过将项目加倍来创建一个新数组,但您也可以删除零0:constnumbers=[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]3.结论array.flatMap()如果你想将一个数组映射到一个新的数组方法是要走的路,但您也可以控制要添加到新映射数组的项目数。回调函数array.flatMap(callback)使用3个参数调用:当前迭代项、索引和原始数组。然后将从回调函数返回的数组在1级深度展平,并将生成的项目插入到生成的映射数组中。请注意,如果您只想将单个项目映射到单个新值,请尝试改用标准array.map()。