Array expansion of JS topics

Preface

First, what is array expansion?
If there is such a requirement now: expand a multiple List data in the background into a List, and sort after de duplication;

["a", "b", ["c", "d"], [["d"],"e"], "f"] => ["a", "b", "c", "d", "e"];

Array de duplication we have talked about in "JS topic array de duplication" before, so how to deal with the expansion of multiple arrays into single-layer arrays in the previous step?

This brings us to the array expansion we are going to explore.
According to the characteristics of requirements, array expansion needs iteration and recursion.

Answer the questions at the beginning of the article:

The process of transforming multiple arrays into single-layer arrays is array expansion, also known as array flatten ing

I. loop plus recursion

The simplest way of thinking: judge in the loop, and recurse if the sub element is an array.

function flatten(origin) {
    var result = [];
    for(var i = 0; i< origin.length; i++) {
        var item = origin[i];
        if(Array.isArray(item)) {
            result = result.concat(flatten(item))
        } else {
            result.push(item);
        }
    }
    return result;
}

var arr = ["a", "b", ["c", "d"], [["d"],"e"], "f"];
flatten(arr);  // ["a", "b", "c", "d", "d", "e", "f"]

II. toString()

Array prototype object has a method, toString, which can convert all elements of the array into comma separated strings.

var arr = [1, [2, 3, [4]], "a", "b", ["c", "d"], [["d"],"e"], "f"];  
arr.toString()  // "1,2,3,4,a,b,c,d,d,e,f"

// Therefore, split is used to convert the string into a single-layer array before processing.
const flatten = (origin) => origin.toString().split(',');  // ["1", "2", "3", "4", "a", "b", "c", "d", "d", "e", "f"]

When toString is converted to a string, it will not distinguish between string and number types. Pay attention to the data types.

Three, split

In the above method, we use toString() to convert an array into a string. Then we can use split to do the same:

var arr = [1, [2, 3, [4]], "a", "b", ["c", "d"], [["d"],"e"], "f"];
function flatten(arr) {
    return arr.join(',').split(',');  
} 
console.log(flatten(arr)).  // ["1", "2", "3", "4", "a", "b", "c", "d", "d", "e", "f"]

Similarly, this process of string and array conversion is not suitable for processing multiple data types at the same time.

Four, reduce

We notice that in fact, array flattening is the process of "iteration + splicing (accumulation) + recursion". The array reduce method can be both iterative and cumulative, which is suitable for array flattening.

function flatten(origin){
  return origin.reduce(function(init, item){
    return init.concat(Array.isArray(item) ? flatten(item) : item)
  }, [])
}
var arr = [1, [2, 3, [4]], "a", "b", ["c", "d"], [["d"],"e"], "f"];  
console.log(flatten(arr)) // [1, 2, 3, 4, "a", "b", "c", "d", "d", "e", "f"]

V. some + concat

Some will traverse every element of the array, judge whether any element meets the condition, and finally return the Boolean value. Once some returns a true value, subsequent elements will not continue to be monitored.

function flatten(origin) {
    while (origin.some(item => Array.isArray(item))){
    origin = [].concat.apply([], origin);
  }
  return origin;
}
var arr = [1, [2, 3, [4]], "a", "b", ["c", "d"], [["d"],"e"], "f"];  
console.log(flatten(arr)) // [1, 2, 3, 4, "a", "b", "c", "d", "d", "e", "f"]

Vi. some + extension operator

ES6 extension operator... Can convert a double array to a single-layer array:

[].concat(...[1, [2, 3, [4]], "a", "b", ["c", "d"], [["d"],"e"], "f"]);  // [1, 2, 3, Array(1), "a", "b", "c", "d", Array(1), "e", "f"]

// With some method, we can realize multiple conversion to single layer:

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

var arr = [1, [2, 3, [4]], "a", "b", ["c", "d"], [["d"],"e"], "f"];  
console.log(flatten(arr)) // [1, 2, 3, 4, "a", "b", "c", "d", "d", "e", "f"]

summary

In fact, array flattening is the process of using element iteration + element splicing (superposition) + recursive call to process array, so as to convert multi-level array to single-level array.

Tags: Javascript

Posted on Mon, 02 Dec 2019 14:36:07 -0800 by behzad