侧边栏壁纸
博主头像
woku博主等级

成功的路上并不拥挤

  • 累计撰写 50 篇文章
  • 累计创建 13 个标签
  • 累计收到 3 条评论

flatMap

woku
2021-11-21 / 0 评论 / 0 点赞 / 49 阅读 / 1,772 字

基本概况

Array.prototype.flatMap 出现在ES2020

相当于flat(扁平化) + map

比如我们要讲数组['123','456'] 变为 ['1','2','3','4','5','6']

var arr = ['123','456'] 

第一步:

var newArr = arr.map(function(item) {
    return item.split('')
})
console.log(newArr) 

img此时返回的数组是二维数组

第二步:将二维数组扁平化

var flatArr = newArr.flat()
console.log(flatArr)

flatMap :flat+map

效率更高:使用flatMap当retrun的时候已经在做扁平化操作了,使用之前的方法是对整个数组遍历完之后再进行操作。

var arr = ['123','456'] 
var newArr = arr.flatMap(function(item) {
    return item.split('')
})
console.log(newArr)

我们来看下newArr和arr是否是指向同一个地址呢?

var arr = ['123','456'] 
var newArr = arr.flatMap(function(item) {
    return item.split('')
})
console.log(newArr === arr)  // false

说明返回值返回一个新的数组

参数

  • 第一个:回调函数

​ 参数:1.当前遍历的元素 2.当前遍历元素在数组中的下标 3.数组本身

  • 第二个:执行 callback 函数时 使用的this 值

在非严格模式下,this默认指向window

严格模式下,this是undefined

var arr = ['123','456'] 
var newArr = arr.flatMap(function(item) {
    console.log(this)
},{'a':1})
console.log(newArr)

第二个参数传入了,那么回调函数中的this指向{'a':1}这个对象

操作数组项

首先看一下单纯使用map

var arr = [1,2,3,4]
var newArr =  arr.map(function(item,index) {
    return [item,item + 1]
})
console.log(newArr)

打印的结果就是一个二维数组

img

如果我们使用flatMap将二维数组扁平化

var arr = [1,2,3,4]
var newArr =  arr.flatMap(function(item,index) {
    return [item,item + 1]
})
console.log(newArr)  //  [1, 2, 2, 3, 3, 4, 4, 5]

再继续看下面场景:

一个数组:[0,1,-2,3,-4,4] ,当该项是负数的时候,将这一项与前面的一项相加,并在这一项后面增加一项描述

数值1+数值2=XXX

var arr = [0,1,-2,3,-4,4]
var newArr =  arr.map(function(item,index) {
    if(item > 0 && index >= 1) {
        return [item,`${item} + ${arr[index - 1]} = ${item + arr[index - 1]}`]
    }else {
        return item
    }
})
console.log(newArr)

polyfill

Array.prototype.myFlatMap = function(cb) {
    if(typeof cb !== 'function') {
        throw new TypeError('callback must be a function')
    }
    var arr = this,
    arg2 = arguments[1],
    res = [],
    item
    for(var i = 0; i < arr.length; i++) {
       item =  cb.apply(arg2,[JSON.parse(JSON.stringify(arr[i])),i,arr])
       item && res.push(item)
    }
    return res.flat()
}
var arr = [1,2,3,4]
var newArr =  arr.myFlatMap(function(item,index) {
    return [item,item + 1]
})
console.log(newArr)
0

评论区