6 ways to achieve array flattening in js

concept

Array flattening is to convert a multidimensional array into a one-dimensional array

[1,[2,[3,4,5]]] ==> [1,2,3,4,5]

Implementation

Here are 6 ways to flatten arrays in js:

1. Recursive implementation

Ordinary recursive ideas are easy to understand, that is, to traverse one by one through loop recursion, if each item is still an array, then continue to traverse down, and use the method of recursive program to realize each item in the array item connection.

let arr = [1, [2, [3, 4, 5]]];
function flatten(arr) {
    
    
  let result = [];

  for(let i = 0; i < arr.length; i++) {
    
    
    if(Array.isArray(arr[i])) {
    
    
      result = result.concat(flatten(arr[i]));
    } else {
    
    
      result.push(arr[i]);
    }
  }
  return result;
}
console.log(flatten(arr));  //  [1, 2, 3, 4，5]

2. Reduce function iteration

As can be seen from the ordinary recursive function above, in fact, each item of the array is processed, so in fact, reduce can also be used to realize the splicing of the array, thereby simplifying the code of the first method. The modified code is as follows :

let arr = [1, [2, [3, 4]]];
function flatten(arr) {
    
    
    return arr.reduce(function(prev, next){
    
    
        return prev.concat(Array.isArray(next) ? flatten(next) : next)
    }, [])
}
console.log(flatten(arr));//  [1, 2, 3, 4，5]

3. split and toString

The array flattening can be achieved through the two methods of split and toString. Since the array will have a toString method by default, you can directly convert the array into a comma-separated string, and then use the split method to convert the string back into an array. , as shown in the code below:

var arr = [1, [2, [3, 4, 5]]];

function flatten(arr) {
    
    
    arr = arr.toString().split(',');
    var newArr = arr.map((item) => {
    
    
        item = +item
        return item
    })
    return newArr
}

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

4. Implemented through the extension operator

The implementation of this method adopts the method of extension operator and some, which are used together to achieve the purpose of flattening the array:

let arr = [1, [2, [3, 4]]];
function flatten(arr) {
    
    
    while (arr.some(item => Array.isArray(item))) {
    
    
        arr = [].concat(...arr);
    }
    return arr;
}
console.log(flatten(arr)); //  [1, 2, 3, 4，5]

5. Flat in ES6

We can also directly call the flat method in ES6 to flatten the array. The syntax of the flat method: arr.flat ( [depth] )
where depth is the parameter of flat, and depth is the expansion depth of the array that can be passed (default is not filled, the value is 1), that is, expand a layer of array. If the number of layers is uncertain, the parameters can be passed into Infinity, which means that no matter how many layers are to be expanded:

let arr = [1, [2, [3, 4]]];
function flatten(arr) {
    
    
  return arr.flat(Infinity);
}
console.log(flatten(arr)); //  [1, 2, 3, 4，5]

6. Use regular and JSON methods

In the fourth method, the toString method has been used, which still adopts the method of converting JSON.stringify into a string first, then filters out the square brackets of the array in the string through a regular expression, and finally uses JSON.parse to convert the which converts to an array:

let arr = [1, [2, [3, [4, 5]]], 6];
function flatten(arr) {
    
    
  let str = JSON.stringify(arr);
  str = str.replace(/(\[|\])/g, '');
  str = '[' + str + ']';
  return JSON.parse(str); 
}
console.log(flatten(arr)); //  [1, 2, 3, 4，5]