JavaScript 映射器 array.flatMap()

目录
  • 1. 更加智能的映射器
  • 2. array.flatMap()
  • 3. 总结

前言：

array.map() 是一个非常有用的映射函数：它接收一个数组和一个映射函数，然后返回一个新的映射数组。

然而，有一个替代 array.map()的方法：array.flatMap()(从ES2019开始可用)。这个方法给了我们映射的能力，但也可以在生成的映射数组中删除甚至添加新的项目。

1. 更加智能的映射器

有一个数字数组，我们要如何创建一个新的数组，使用每个数字加倍?

使用array.map()函数是一个好方法。

const numbers = [0, 3, 6];
const doubled = numbers.map(n => n * 2);
console.log(doubled); // logs [0, 6, 12]

numbers.map(number => 2 * number) 将 number 数组映射到一个新的数组，其中每个数字都被翻倍。

对于需要一对一映射的情况，也就是说，映射后的数组与原始数组的项数相同，array.map()的效果非常好。

但如果我们需要将一个数组的数字翻倍，同时跳为0的项，该怎么办?

直接使用 array.map() 是不可能的，因为该方法总是创建一个映射的数组，其项数与原数组相同。但是我们可以使用 array.map()和 array.filter() 的组合。

const numbers = [0, 3, 6];
const doubled = numbers
  .filter(n => n !== 0)
  .map(n => n * 2);
console.log(doubled); // logs [6, 12]

array.map()和 array.filter() 可以解决问题，但有没有更简短的方法?

必须滴。使用 array.flatMap() 方法，只需调用一个方法就可以执行映射和删除项目。

const numbers = [0, 3, 6];
const doubled = numbers.flatMap(number => {
  return number === 0 ? [] : [2 * number];
});
console.log(doubled); // logs [6, 12]

通过只使用numbers.flatMap()，你可以将一个数组映射到另一个数组，但也可以从映射中跳过某些元素。

接着，我们来更详细地看看 array.flatMap()是如何工作的。

2. array.flatMap()

array.flatMap() 函数接受一个回调函数作为参数并返回一个新的映射数组

const mappedArray = array.flatMap((item, index, origArray) => {
  // ...
  return [value1, value2, ..., valueN];
}[, thisArg]);

回调函数在原数组中的每个iteam上被调用，有3个参数：当前项、索引和原数组。然后，回调函数返回的数组被扁平化了1层，得到的项目被添加到映射的数组中。

此外，该方法还接受第二个可选参数，表示回调内部的 this 值。

使用array.flatmap()最简单的方法是将包含项目的数组扁平化

const arrays = [[2, 4], [6]];
const flatten = arrays.flatMap(item => item);
console.log(flatten); // logs [2, 4, 6]

但是array.flatMap()除了简单的扁平化之外，还可以做更多的事情。通过控制从回调中返回的数组项的数量：

  • 通过返回一个空数组从结果数组中删除该项
  • 通过返回一个带有一个新值的数组 [newValue] 来修改映射的项
  • 通过返回一个包含多个值的数组来添加新项: [newValue1, newValue2, ...]

例如：正如你在上一节中所看到的，可以通过将项目加倍来创建一个新的数组，但同时也要删除 0。

const numbers = [0, 3, 6];
const doubled = numbers.flatMap(number => {
  return number === 0 ? [] : [2 * number];
});
console.log(doubled); // logs [6, 12]

现在，我们来看下它是怎么工作的。

如果当前项为 0，回调函数返回一个空数组 []。这意味着当被扁平化时，空数组[]没有提供任何值。

如果当前迭代项非零，则返回 [2 * number]。当扁平[2 * number]数组时，结果数组中只添加2 * number。

你也可以使用 array.flatMap()来增加映射的数组中的项目数量。

例如，下面的代码片段通过添加两倍和三倍的数字将一个数字数组映射到一个新数组:

const numbers = [1, 4];
const trippled = 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层深处被扁平化，得到的项目被插入到所产生的映射数组中。

到此这篇关于JavaScript 映射器array.flatMap()的文章就介绍到这了,更多相关JavaScript 映射器内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 详解JavaScript之Array.reduce源码解读

    前言 reduce(...)方法对数组中的每个元素执行一个由您提供的reducer函数(升序执行),将其结果汇总为单个返回值(累计作用) 此方法接受两个参数:callback(...)(必选).initialValue(可选). callback(...)接受4个参数:Accumulator (acc) (累计器).Current Value (cur) (当前值).Current Index (idx) (当前索引).Source Array (src) (源数组). 注意点: 1.callb

  • JavaScript Array.flat()函数用法解析

    在过去的几年中,已经将许多有用的功能添加到Javascript Array全局对象中,这些功能为开发人员在编写可用于数组的代码时提供了多种选择.这些功能提供了许多优点,其中最值得注意的是,虽然在过去的一段时间里,开发人员必须实现自己的复杂逻辑来执行各种数组操作,但现在这些新功能已经不再需要这种自制的实现.本文将探讨的有用功能之一是 flat() 函数. JavaScript的Array.flat()函数深入探讨 功能概述 flat() 函数提供了将一组数组项串联成一个全新的数组并在函数完成后返回

  • javascript Array.prototype.slice使用说明

    除了正常用法,slice 经常用来将 array-like 对象转换为 true array. 名词解释:array-like object – 拥有 length 属性的对象,比如 { 0: 'foo', length: 1 }, 甚至 { length: 'bar' }. 最常见的 array-like 对象是 arguments 和 NodeList. 查看 V8 引擎 array.js 的源码,可以将 slice 的内部实现简化为: 复制代码 代码如下: function slice(s

  • js中Array.forEach跳出循环的方法实例

    js中Array.forEach跳出循环的方法实例

    目录 forEach()方法 js中 Array.forEach如何跳出循环 解决方式: 总结 forEach()方法 语法:array.forEach(callback(currentvalue,index,arr) ,thisValue) 其中 callback为数组中每个元素执行的函数,该函数可接受1-3个参数: currentvalue参数表示数组的当前元素项,必须的参数 index参数表示的当前元素下标,可选参数 arr参数表示当前元素所属的数组,可选参数 thisValue表示执行回

  • JavaScript 映射器 array.flatMap()

    目录 1. 更加智能的映射器 2. array.flatMap() 3. 总结 前言: array.map() 是一个非常有用的映射函数:它接收一个数组和一个映射函数,然后返回一个新的映射数组. 然而,有一个替代 array.map()的方法:array.flatMap()(从ES2019开始可用).这个方法给了我们映射的能力,但也可以在生成的映射数组中删除甚至添加新的项目. 1. 更加智能的映射器 有一个数字数组,我们要如何创建一个新的数组,使用每个数字加倍? 使用array.map()函数是

  • JavaScript装饰器函数(Decorator)实例详解

    JavaScript装饰器函数(Decorator)实例详解

    本文实例讲述了JavaScript装饰器函数(Decorator).分享给大家供大家参考,具体如下: 装饰器函数(Decorator)用于给对象在运行期间动态的增加某个功能,职责等.相较通过继承的方式来扩充对象的功能,装饰器显得更加灵活,首先,我们可以动态给对象选定某个装饰器,而不用hardcore继承对象来实现某个功能点.其次:继承的方式可能会导致子类繁多,仅仅为了增加某一个单一的功能点,显得有些多余了. 下面给出几个常用的装饰器函数示例,相关代码请查看github. 1 动态添加onload

  • PHP面向对象之领域模型+数据映射器实例(分析)

    这里要说明一下 因为本人比较懒 博客中相关文章的内容更多的是对<深入PHP面向对象.模式与实践>一书中代码的整理和简单注解方便自己日后复习和参考, 对相关内容感兴趣的初学的朋友建议请先阅读原文.此处的内容只能当成一种学习的补充和参考.谢谢! 因原书中领域模型+数据映射器的示例代码是连贯在一起的 所以这里就整理在一起了. 简单介绍一下我的看法,从数据库操作的角度看领域模型主要是操作数据表中的单条记录的而数据映射器是操作整个数据表的数据的. 按原文的解释数据映射器是一个负责将数据库数据映射到对象的

  • 详解Java的MyBatis框架与Spring框架整合中的映射器注入

    MyBatis-Spring允许你在Service Bean中注入映射器.当使用映射器时,就像调用DAO那样来调用映射器就可以了,但是此时你就不需要进行任何DAO实现的编码,因为MyBatis会为你进行. 使用注入的映射器,你的代码就不会出现任何MyBatis-Spring依赖和MyBatis依赖.在我们的应用中有这样一个简单的映射器.你也应该知道映射器仅仅是一个接口: public interface UserMapper { User getUser(String userId); } 这是

  • MyBatis 引入映射器的方法

    mybatis引入映射器分为三种方式 1. 文件路径引入映射器 <mappers> <mapper resource="com/test/model/LoginLogMapper.xml"/> </mappers> 用包名引入映射器 <mappers> <package name="com.test.model"/> </mappers> 用类注册引入映射器 <mappers> &l

  • 数据排序谁最快(javascript中的Array.prototype.sort PK 快速排序)

    但是让我感到意外的是,下面有个网友回复说,javascript中的Array本身的sort方法才是最快的,比快速排序算法都快,当时看到了很是郁闷,因为当时花了好长时间在排序算法上,居然忘记了Array本身的sort方法 不过javascript中内置的sort方法真的比快速排序算法还快吗? 哈哈,测试一下不就知道了 先说一下我测试的环境 1,我的测试环境是IE6.0和firefox2.0 2,每种算法有很多种不同的实现方法,下面测试中我选择上面网友实现的快速排序算法,只是把内嵌函数搬到了外面 3

  • Javascript访问器属性实例分析

    本文实例分析了Javascript 访问器属性的用法,分享给大家供大家参考.具体分析如下: 这个和构造函数的意思有点像,但功能又不同,他可以让两个属性建立关联,通过修改一个属性来改变另一个属性. 复制代码 代码如下: var book = {     _year:2004,     edition: 1 }; Object.defineProperty(book, "year", {     get: function() {         return this._year;   

  • JavaScript中利用Array和Object实现Map的方法

    本文实例讲述了JavaScript中利用Array和Object实现Map的方法.分享给大家供大家参考.具体如下: 昨天突然看到以前别人用JavaScript实现的Map感觉很不错,但是发现有个别方法有问题,顺便完善了下,添加了 remove .indexOf .values.clear等方法. /** * @author blune68 * @version 0.1, 07/27/12 * */ function Map(){ this.keys = new Array(); this.dat

  • JavaScript中的Array 对象（数组对象）

     1.创建Array对象方法: --->var arr = [1,2,3];//简单的定义方法 此时可以知道 arr[0] == 1; arr[1] == 2; arr[2] == 3; --->new Array(); var arr = new Array();//定义一个没有任何内容的数组对象,然后以下面的方式为其赋值 arr[0] = "arr0"; arr[1] = "arr1"; arr[2] = "arr2"; ---&

  • JavaScript 调试器简介

    但是仅从调试的角度来说,这些调试器的功能是完全够用的.其实我更需要的不是一个 JavaScript IDE,而是一个 JavaScript 重构工具,这样可以使我快速地对 JavaScript 组件进行重构,比使用 UltraEdit 进行查找/替换的原始方法效率会提高很多,而且更加安全.其实任何一种没有重构工具的语言的开发效率都是没有办法和 Java 这样的语言(有 Eclipse.IDEA 等等强大的重构工具)相提并论的.共产主义尚未实现,这确实是现实,但是并不意味着我们就一定要等待,就没有

随机推荐