Several ways to use JS to achieve array flattening

数组扁平化的方式

什么是数组扁平化？

数组扁平化：Refers to converting a multidimensional array into a one-dimensional array.

例：Flatten the following array.

const arr = [1, [2, 3, [4, 5]]] // ---> [ 1, 2, 3, 4, 5 ]

1.使用flat()

flat() 方法是ES10提出的,It recursively traverses the array to a specified depth,并将所有元素与遍历到的子数组中的元素合并为一个新数组返回.（flat意为“水平的;平坦的”）

const result1 = arr.flat(Infinity) // Specifies that the depth is infinite
console.log(result1) // [ 1, 2, 3, 4, 5 ]

const result2 = arr.flat(1) // 指定深度为1
console.log(result2) // [ 1, 2, 3, [ 4, 5 ] ]

const result3 = arr.flat(2) // 指定深度为2
console.log(result3) // [ 1, 2, 3, 4, 5 ]

2.使用正则

• The array elements obtained by the following methods will be turned into strings,不建议使用;

  const result1 = JSON.stringify(arr).replace(/\[|\]/g, '').split(',')
  console.log(result1) // [ '1', '2', '3', '4', '5' ] Array elements are all turned into strings
  

• The above methods are optimized;

  const result2 = JSON.parse('[' + JSON.stringify(arr).replace(/\[|\]/g, '') + ']')
  console.log(result2) // [ 1, 2, 3, 4, 5 ]
  

3.使用reduce()+concat()

使用reduceGet the current value and the previous value of the array,Determines whether the current value is an array,初始值设置为[],然后使用concat进行数组合并.

• reduce()方法：对数组中的每个元素执行一个由您提供的reducer函数(升序执行),将其结果汇总为单个返回值.

• concat()方法：用于合并两个或多个数组.此方法不会更改现有数组,而是返回一个新数组.

function flatten(arr) {
    
  return arr.reduce((pre, current) => {
    
    return pre.concat(Array.isArray(current) ? flatten(current) : current)
  }, [])
}

const result = flatten(arr)
console.log(result) // [ 1, 2, 3, 4, 5 ]

4.使用函数递归

循环遍历数组,Recursive processing is performed when an array element is found,Finally convert the array to a one-dimensional array.

const result = []
function exec(arr) {
    
  arr.forEach(item => {
    
    if (Array.isArray(item)) {
    
      exec(item)
    } else {
    
      result.push(item)
    }
  })
}

exec(arr)
console.log(result) // [ 1, 2, 3, 4, 5 ]

5.使用扩展运算符+concat()

ES6The newly introduced spread operator can reduce the dimensionality of arrays（One dimension reduction at a time）,Loop to determine whether there is an array,进行concat合并.

• some()方法：测试数组中是不是至少有1个元素通过了被提供的函数测试（它返回的是一个Boolean类型的值）.

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

  return arr
}

const result = flatten(arr)
console.log(result) // [ 1, 2, 3, 4, 5 ]