JavaScript—数组扁平化

小叮当的口袋

2021-10-01 87 阅读1分钟

一、什么是数组扁平化

数组扁平化就是将原先嵌套的数组拆解开来

[1, [2, 3], [4, [5, 6]]] → [1, 2, 3, 4, 5, 6]

二、如何实现数组扁平化

提供四种方法实现数组扁平化
- flat
- forEach
- reduce
- ...拓展运算符

1. flat（es6新增）

参数：无参数时，默认只展开一层，有参数时，参数是几就展开几层

let arr = [1, 2, 3, [4, 5, [6, 7]], 8, 9, 10]
arr.flat(3)

2. forEach

function flatten(arr) {
  const result = [];
  arr.forEach((i) => {
    if (Array.isArray(i))
      result.push(...flatten(i));
    else
      result.push(i);
  })
  return result;
}

3. reduce（es5）

// 只展开一层
var flattened = [[0, 1], [2, 3], [4, 5]].reduce(
 ( acc, cur ) => acc.concat(cur),[]
)

// 展开多层
function flatten(param) {
  return param.reduce((prev, curr) => {
    return prev.concat(
      Array.isArray(curr) ? flatten(curr) : curr
    )
  }, [])
}
let arr = [1, 2, [3, 4, [5, 6]], 7, 8, 9,[10]]
console.log(flatten(arr));

4. 拓展运算符

对数组和 Set 结构进行解构赋值时，会默认调用Symbol.iterator方法展开一层数组
some方法循环数组中的每一个元素，有一个元素为true时返回值为true，否则为false（循环）

// 只展开一层
[].concat(...[1, 2, 3, [4, 5]]);

// 展开多层
function flatten(arr) {
  while (arr.some(item => Array.isArray(item))) {
    arr = [].concat(...arr)
  }
  return arr
}
console.log(flatten([1, 2, 3, [4, 5, [6]], 7, [8]]));

三、总结

数组扁平化实际是当出现多层数组结构时就利用递归思想将嵌套数组展开，直至只有一层数组结构，返回该结果

友情链接：