First, the concept of flattening

Flat management is a kind of management mode that enterprises implement in order to solve the problem that the hierarchical organization form faces in the modern environment. When the scale of the enterprise expands, the effective way is to increase the management level, but now the effective way is to increase the management range. When the level of management is reduced and the extent of management is increased, the pyramidal organizational form is “compressed” into a flat organizational form.

2. Array flattening

Use to “flatten” an array of nested layers into a one-dimensional array

1And [1[2]] = > [1.2]
2And [[1.2], [3.4]] = > [1.2.3.4]
3And [1.2[3.4[5.6= > []]]1.2.3.4.5.6]Copy the code


Several methods of array flattening

【 1 】 Array. Prototype. Flat ()

The Flat () method recurses through the array at a specified depth and returns a new array with all the elements in the traversed subarray. This method does not change the original array

Depth specifies the depth of the structure to be extracted from the nested array. The default value is 1 flat() method removes empty items from the array

Example:

    let arr1 = [1.2[3.4]];
    arr1.flat(); // [1, 2, 3, 4]

    // Specify the structure depth of the nested array to be extracted at 1 level
    let arr2 = [1.2[3.4[5.6]]];
    arr2.flat(1); // [1, 2, 3, 4, [5, 6]]

    // Specify a structure depth of 2 layers to extract the nested array
    let arr3 = [1.2[3.4[5.6]]];
    arr3.flat(2); // [1, 2, 3, 4, 5, 6]

    // Use Infinity as the depth to expand a nested array of any depth
    let arr4 = [1.2[3.4[5.6]]]
    arr4.flat(Infinity); // [1, 2, 3, 4, 5, 6]

    // Remove an empty item from the array
    let arr5 = [1.2.4.5];
    arr5.flat(); // [1, 2, 4, 5]Copy the code

[2] Merge method reduce()

We iterate with the reduce function, assigning prev’s initial value to [], recursively traversing its children if the current value is an array, and concatenating it into an array if the current value is not.

    let arr = [[1.2[3.4].5], [6.7.8], [[9.10].11]].function flat(arr) {
      return arr.reduce(function (prev, cur) {
        return prev.concat(Array.isArray(cur) ? flat(cur) : cur); }}, [])console.log(flat(arr)); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]Copy the code

【 3 】 the toString ()

The toString() method is very limited and only works if the array elements are all numbers

    // toString && Json.parase
    let arr = [[1.2[3.4].5], [6.7.8], [[9.10].11]].function flat(arr) {
      var str = arr.toString();
      return JSON.parse('[' + str + '] ');
    }
    console.log(flat(arr)); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]

    // toString && split
    let arr = [[1.2[3.4].5], [6.7.8], [[9.10].11]].function flat(arr) {
      return arr.toString().split(', ').map(item= > {
        return Number(item)
      })
    }
    console.log(flat(arr)); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]

    // join && split
    let arr = [[1.2[3.4].5], [6.7.8], [[9.10].11]].function flat(arr) {
      return arr.join(', ').split(', ').map(item= > {
        return Number(item); })}console.log(flat(arr)); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]Copy the code

[4] Loop + recursion

Each item is iterated recursively, continuing if it is an array, concat otherwise

    let arr = [[1.2[3.4].5], [6.7.8], [[9.10].11]].function flat(arr) {
      let result = [];
      arr.map(item= > {
        if (Array.isArray(item)) {
          result = result.concat(flat(item));
        } else{ result.push(item); }});return result;
    }
    console.log(flat(arr)); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]Copy the code

[5] Extended operators..

. Retrieves all traversable properties of the parameter object and copies them to the current object

    let arr = [[1.2[3.4].5], [6.7.8], [[9.10].11]]
    function flat(arr) {
      while (arr.some(item= > Array.isArray(item))) { arr = [].concat(... arr); }return arr;
    }
    console.log(flat(arr)); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]Copy the code

The article is updated every week. You can search “Front-end highlights” on wechat to read it in the first time, and reply to [Books] to get 200G video materials and 30 PDF books