美文网首页
JS数组扁平化的5种方法

JS数组扁平化的5种方法

作者: 欢欣的膜笛 | 来源:发表于2021-03-17 20:18 被阅读0次
[1, [2, 3], [[3, 4, 2], 1], 5, [3]] => [1, 2, 3, 3, 4, 2, 1, 5, 3]
[1, ['2', 3], [2], '2', 4] => [1, "2", 3, 2, "2", 4]
  1. 递归
    循环数组,判断 arr[i] 是否是数组,是数组的话再次调用此函数。

    const flatten = (arr) => {
        let res = []
        arr.forEach(item => {
            if (Array.isArray(item)) {
                res = res.concat(flatten(item))
            } else {
                res.push(item)
            }
        })
        return res
    }
    
  2. reduce() 方法
    reduce() 接收一个函数作为累加器,数组中的每个值(从左到右)开始缩减,最终计算为一个值。
    语法:array.reduce(function(total, currentValue, currentIndex, arr), initialValue),接收四个参数,前两个必填,total 初始值,计算结束后的返回值;currentValue 当前元素;currentIndex 当前元素索引;arr 元素所属数组对象;initialValue,累加器初始值。

    // 求数组的各项值相加的和
    arr.reduce((total, item)=> total + item, 0)
    
    const flatten = (arr) => {
        return arr.reduce((pre, next) => {
            return pre.concat(Array.isArray(next) ? flatten(next) : next);
        }, [])
    }
    
  3. toString & split
    调用数组的toString方法,将数组变为字符串然后再用split分割还原为数组,但是此方法会改变数据类型。慎用!!!

    // split之后是字符串 再转一下数字
    const flatten = (arr) => arr.toString().split(',').map(item => +item)
    
  4. ES6 flat()
    flat(n)将每一项的数组偏平化,n默认是1,表示扁平化深度,Infinity无限次,flat() 会跳过空格,返回新数组不改变原数组。

    const flatten = (arr) => arr.flat(Infinity)
    
  5. ES6 扩展运算符 ...
    es6的扩展运算符能将二维数组变为一维,故仍需遍历。

    const flatten = (arr) => {
        while (arr.some(item => Array.isArray(item))) {
            arr = [].concat(...arr) // 给原数组重新赋值
        }
        return arr
    }
    

相关文章

  • 数组扁平化-2019-12-17

    数组扁平化 总结 有5种方法:2013 递归 or toString() 2018 flat()其它的还有 so...

  • JS数组扁平化的5种方法

    递归循环数组,判断 arr[i] 是否是数组,是数组的话再次调用此函数。const flatten = (arr)...

  • 5种方式实现数组扁平化

    5种方式实现数组扁平化 数组扁平化概念 数组扁平化是指将一个多维数组变为一维数组 实现 1. reduce 遍历数...

  • js实现数组扁平化

    js实现数组扁平化 数组的扁平化,就是将一个嵌套多层的数组array(嵌套可以是任何层数)转换为只有一层的额数组。...

  • 数组扁平化

    数组扁平化的概念 数组扁平化是指将一个多维数组变为一维数组 [1, [2, 3, [4, 5]]] ------...

  • js数组与对象常用操作方法

    一、Js相关数组操作 数组去除相同的 数组添加数数据 数组反转 打乱数组排序 取数组的前几个 数组扁平化 遍历对象...

  • 2021-04-06

    数组扁平化 已知数组var arr = [[1, 3, 2, 1],[5, 3, 4, 8, 5, 6, 5],[...

  • 封装常用数组操作函数

    1. 数组扁平化 方法一 : 递归迭代数组 方法二 : 通过js原生 falt方法展开数组 方法三 通过正则...

  • js数组扁平化和数组去重处理(对比)

    数组扁平化(多维数组)(es6) 数组去重 (es6) 数组去重(es5)

  • js 数组扁平化实现的多种方法

    方法① 效果:不管数组嵌套多少层,都转化为一维数组。 方法② 效果:不管数组嵌套多少层,都转化为一维数组。 方法③...

网友评论

      本文标题:JS数组扁平化的5种方法

      本文链接:https://www.haomeiwen.com/subject/yyeecltx.html