美文网首页
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
      }
      

    相关文章

      网友评论

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

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