Hi FE !
Ai
git
前端面试题
前端小tip
  • vite
  • webpack
npm
  • vue2
  • vue3
react
GitHub
Ai
git
前端面试题
前端小tip
  • vite
  • webpack
npm
  • vue2
  • vue3
react
GitHub
  • S003-数组扁平化★

S003-数组扁平化★

// 源数组:[1, [2, [3, [4, 5]]]]
// 降维后数组:[1, 2, 3, 4, 5]
let arr1 = []
function flutten(arr) {
  for(let i in arr) {
    if(typeof arr[i] === 'object') {
      arr1.concat(flutten(arr[i]))
    }else {
      arr1.push(arr[i])
    }
  }
  return arr1;
}

1.数组遍历 + 递归

function flutten(arr) {
  let res = [];
  arr.map(item => {
      if(Array.isArray(item)) {
        res = res.concat(flutten(item))
      } else {
        res.push(item)
      }
    })
    return res;
}

递归

function flat(arr) {
  const isDeep = arr.some(item => item instanceof Array)
  if(!isDeep) {
    return arr
  }

  const res = Array.prototype.concat.apply([],arr)
  return flat(res)
}

const res = flat( [1,2,[3,4],5])
console.log(res)

2.join + split + map (适用于里面都是数字的)

function flutten(arr) {
  arr.join(',').split(',').map(item => {
      return Number(item)
    })
}

3.toSting + split + map (适用于里面都是数字的)

function flutten(arr) {
  arr.toString().split(',').map(item => {
      return Number(item)
    })
}

4.扩展运算符

function flutten(arr) {
  while(arr.some(item => Array.isArray(item))) {
    arr = [].concat(...arr)
  }
  return arr
}

5.reduce

function flutten(arr) {
  return arr.reduce((result,item) => {
      return result.concat(Array.isArray(item)?flutten(item):item)
    },[])
}

6.正则

let result = JSON.parse('[' + JSON.stringify(arr).replace(/\[|\]/g,'') + ']')

7.使用flat


let result = arr.flat(Infinity)


这里我们详细说一下es6 新增的方法flat
>es6提供的新方法flat(depth)
let a = [1,[2,3]];
a.flat(); // [1,2,3]
a.flat(1); //[1,2,3]
flat(depth) 方法中的参数depth,代表展开嵌套数组的深度,默认是1

>所以我们可以添加参数1,或者直接调用flat()来对2维数组进行扁平化,如果我们可以提前知道数组的维度,对这个数组进行扁平化处理,参数depth的值就是数组的维度减一。

>let a = [1,[2,3,[4,[5]]]];
a.flat(4-1); // [1,2,3,4,5]  a是4维数组
其实还有一种更简单的办法,无需知道数组的维度,直接将目标数组变成1维数组。depth的值设置为Infinity。

>let a = [1,[2,3,[4,[5]]]];
a.flat(Infinity); // [1,2,3,4,5]  a是4维数组

这个方法里面flat性能是最好的。

Edit this page
最近更新: 2025/10/17 02:02
Contributors: qdleader
qdleader
本站总访问量 129823次 | 本站访客数 12人