Transform Javascript subArrays into one Array

Question

I have this array:

array = ['bla', ['ble', 'bli'], 'blo', ['blu']]

I want it to be

array = ['bla', 'ble', 'bli', 'blo', 'blu']

Is there a simple function that can give me this particular result?

Answer 1

Updated for 2020:

You can now use .flat() in all modern browsers.

var newArray = arr.flat([depth])

let result = ['bla', ['ble', 'bli'], 'blo', ['blu']].flat()
console.log(result);
result = ['bla', ['ble', ['bli', ['bom']]], 'blo', ['blu']].flat()
console.log(result);
result = ['bla', ['ble', ['bli', ['bom']]], 'blo', ['blu']].flat(2)
console.log(result);
result = ['bla', ['ble', ['bli', ['bom']]], 'blo', ['blu']].flat(Infinity)
console.log(result);

You can use concat to do this:

array = [].concat.apply([], array)

If you need to do it recursively (nested nested arrays), I would probably do it like this:

function flatten(arr, result) {
    if (typeof result === "undefined") {
        result = [];
    }
    for (var i = 0; i < length; i++) {
        if (Array.isArray(arr[i])) {
            flatten(arr[i], result);
        } else {
            result.push(arr[i]);
        }
    }
    return result;
}

Answer 2

There is a new array prototype function called flat. Currently, Microsoft browsers and Samsung Internet do not support this function. The syntax is simple:

array.flat([depth])

depth is an optional variable that specifies how many layers to flatten. The default is 1. Read more about it here.

Answer 3

Edit: Please look at Dave's answer or p.s.w.g's answers instead - they're superior. This code is horrible and should not be used (I can't delete an accepted answer).

You could do something like this:

var arr = ['bla', ['ble', 'bli'], 'blo', ['blu']];
var newArr = arr.toString().split(',');

Demo

Explanation:

It's pretty simple. toString() on an array containing arrays creates a string with all the elements in the top level, so that [['abc']].toString() results in 'abc' regardless of how "deep" in the array it is. After that, you just split the string you get into an array using String.prototype.split and you've accomplished your goal

Answer 4

The other answers that have been provided are good, but here's my implementation of a recursive method that will flatten arrays arbitrarily nested to any depth:

var flatten = function(arr) {
    var out = [];
    for(var i = 0; i < arr.length; i++) {
        out.push.apply(out, Array.isArray(arr[i]) ? flatten(arr[i]) : [ arr[i] ]);
    }

    return out;
};

Demonstration

Note this relies on Array.isArray, which may not be available in older browsers. You can replace that with another array test if this is a problem (e.g. arr[i].constructor == Array)