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

成功的路上并不拥挤

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

flat

woku
2021-11-21 / 0 评论 / 0 点赞 / 54 阅读 / 2,318 字

是什么?

数组扁平化-ES2019出来

从多维数组 -> 一维数组

返回一个新数组

怎么用?

参数:flat(deep) 扁平化层级 默认为1

var arr = [1,2,[3,4,[5,6]]]
console.log(arr.flat())

deep的参数默认为1,扁平化往里一层,打印[1,2,3,4,[5,6]]

参数是几,结构深度就是多少,如果是无限深入,那么参数是Infinity

const arr = [1, [2, 3, [4]]]
const newArr = arr.flat(Infinity)
console.log(newArr)

几种特殊参数

  • 如果参数为负数,不做任何处理
var arr = [1,2,[3,4,[5,6]]]
console.log(arr.flat(-1))
  • 如果参数为数字字符串,转成number数字类型
var arr = [1,2,[3,4,[5,6]]]
console.log(arr.flat('1')) // 字符串’1’将转为数字1
  • 参数必须从1开始,如果是0或者false,不做任何处理
var arr = [1,2,[3,4,[5,6]]]
console.log(arr.flat(0))
console.log(arr.flat(false))
  • 如果参数为true,转为数字1进行处理

模拟数组扁平化

浅扁平化

concat - 能将多个数组合并为一个数组

var a = []
a = a.concat(1)
a = a.concat(2)
a = a.concat([3,4])
console.log(a)

function shallowFlat(arr) {
    return arr.reduce(function(prev,cur) {
        return prev.concat(cur)
    },[])
}
console.log(shallowFlat(arr))

深扁平化

  • reduce + concat +递归
var arr = [1, 2, [3, 4, [5]]]
Array.prototype.deepFlat = function () {
    var arr = this,
        deep = arguments[0] == undefined ? 1 : (arguments[0] !== Infinity ? arguments[0] >>> 0 : Infinity)
    return deep > 0 ?
        arr.reduce((prev, cur) => {
            return prev.concat(Array.isArray(cur) ? cur.deepFlat(deep - 1) : cur)
        }, []) :
        arr
}
console.log(arr.deepFlat(Infinity))
  • forEach + push + 递归
Array.prototype.deepFlat = function() {
    var arr = this,
    deep = arguments[0] == undefined ? 1 : (arguments[0] !== Infinity ? arguments[0] >>> 0 : Infinity),
    res = []
    (function _(arr,deep){
        arr.forEach(function(item) {
            if(Array.isArray(item) && deep > 0) {
                _(item,deep - 1)
            }else {
                item !== void 0 && res.push(item) // item !== void表示该项不为empty
            }
        })
    })(arr,deep)
    return res
}
  • for-of + push +递归
Array.prototype.deepFlat = function () {
    var arr = this,
        deep = arguments[0] == undefined ? 1 : (arguments[0] !== Infinity ? arguments[0] >>> 0 : Infinity)
    res = [];
    (function _(arr, deep) {
        for (var item of arr) {
            if (Array.isArray(item) && deep > 0) {
                _(item, deep - 1)
            } else {
                item !== void 0 && res.push(item)
            }
        }
    })(arr, deep)
    return res

}
console.log(arr.deepFlat(2))
  • 栈思想
Array.prototype.deepFlat = function() {
    var arr = this,
        stack = [...arr],
        res = []
    while(stack.length) {
        const popItem = stack.pop()
        if(Array.isArray(popItem)) {
            stack.push(...popItem)
        }else{
            res.push(popItem)
        }
    }
    return res.reverse()
}

栈思想的分析:

对于一个多维数组eg: [1,2,[3,4,[5]]]

stackpopitemres
[1,2,[3,4,[5]]][3,4,[5]]
[1,2,3,4,[5]][5]
[1,2,3,4,5]55
[1,2,3,4]44
[1,2,3]33
[1,2]22
[1]11
[]

最后对res进行数组翻转 [1,2,3,4,5]

  • 纯递归
Array.prototype.deepFlat = function () {
    var arr = this
    res = [];
    (function _(arr) {
        arr.forEach(item => {
            if (Array.isArray(item)) {
                _(item)
            } else {
                res.push(item)
            }
        })
    })(arr)
    return res
}
0

评论区