JS: Array.prototype.flat

By Xah Lee. Date: . Last updated: .

New in ES2019

Return a new array, with any nested array flattened, up to level depth.

const aa = [0,[[2,[3]],1]];

console.log ( aa.flat() );
// [ 0, [ 2, [ 3 ] ], 1]

console.log ( aa.flat(2) );
// [ 0, 2, [ 3 ], 1 ]

Polyfill

To flatten nested array just 1 level, use this:

Array.prototype.concat.apply([], myArray)

var aa = [1,[9,[3,7]],4];

// flatten array 1 level
console.log(
Array.prototype.concat.apply([],aa)
); // [ 1, 9, [ 3, 7 ], 4 ]

Here's a function that flatten n levels of nested array.

const xah_flatten_array = ((array1, n) =>
{

/* [
 flatten nested array n levels. n default to 1
 n can be large, such as thousands. because when array no longer has element that's array, the function return it immediately

 http://xahlee.info/js/js_array_flatten.html
 version 2017-09-23
 copyright: free use, must include link and credit

 ] */

    if ( n === undefined ) { n = 1; }
    if ( n > 0 &&
         Array.prototype.some.call(array1, Array.isArray )
       ) {
        return xah_flatten_array(Array.prototype.concat.apply([],array1), n-1); }
    else {
        return array1; }
});

// -----------------------------------
// test

const aa = [0,[1,[2,[3,[4,[5,[6]]]]]], "xyz"];

console.log( aa );

console.log( xah_flatten_array(aa) );

console.log( xah_flatten_array(aa,1) );

console.log( xah_flatten_array(aa,2) );

console.log( xah_flatten_array(aa,3) );

console.log( xah_flatten_array(aa,4) );

console.log( xah_flatten_array(aa,400) );

// prints

// [ 0, [ 1, [ 2, [Array] ] ], 'xyz' ]
// [ 0, 1, [ 2, [ 3, [Array] ] ], 'xyz' ]
// [ 0, 1, [ 2, [ 3, [Array] ] ], 'xyz' ]
// [ 0, 1, 2, [ 3, [ 4, [Array] ] ], 'xyz' ]
// [ 0, 1, 2, 3, [ 4, [ 5, [Array] ] ], 'xyz' ]
// [ 0, 1, 2, 3, 4, [ 5, [ 6 ] ], 'xyz' ]
// [ 0, 1, 2, 3, 4, 5, 6, 'xyz' ]

Test

/* [
xah_is_array_equal(array1, array2)
Return true if 2 array are equal
Allow array-like object
Allow nested array

http://xahlee.info/js/js_comparison_equality_test_objects.html
version 2019-04-24
 ] */
const xah_is_array_equal = ((array1, array2) =>
{
    // allow array-like object
    if ( Array.isArray(array1) !== Array.isArray(array2) ) { return false; }
    if (array1.length !== array2.length) { return false; }

    return Array.prototype.every.call(
        array1,
        ((x, i) => {
            const y = array2[i];
            if ( Array.isArray(x) ) {
                if ( ! Array.isArray(y) ) {
                    return false;}
                else {
                    return xah_is_array_equal(x, y); }
            } else if ( typeof x === "object" && typeof x !== null) {
                if (! ( typeof y === "object" && typeof y !== null)) {
                    return false;}
                else {
                    return xah_is_obj_equal(x,y); }
            } else {
                return (x === y);
            }
        })
    );
});

const xah_flatten_array = ((array1, n) =>
{

/* [
 flatten nested array n levels. n default to 1
 n can be large, such as thousands. because when array no longer has element that's array, the function return it immediately

 http://xahlee.info/js/js_array_flatten.html
 version 2017-09-23
 copyright: free use, must include link and credit

 ] */

    if ( n === undefined ) { n = 1; }
    if ( n > 0 &&
         Array.prototype.some.call(array1, Array.isArray )
       ) {
        return xah_flatten_array(Array.prototype.concat.apply([],array1), n-1); }
    else {
        return array1; }
});

// -----------------------------------
// test

const aa = [0,[1,[2,[3,[4,[5,[6]]]]]], "xyz"];

console.log ( 
[[aa,1], [aa,2], [aa,3], [aa,4], [aa,5]]
.every ( ((x) => xah_is_array_equal( x[0].flat(x[1]), xah_flatten_array(x[0],x[1]) )) )
);
// true

Pre ES2015 Version

function xah_flatten_array (array1, n) {
    // flatten nested array n levels. n default to 1
    // n can be large, such as thousands. because when array no longer has element that's array, the function return it immediately
    // http://xahlee.info/js/js_array_flatten.html
    // version 2017-09-23
    // copyright: free use, must include link and credit

    if ( n === undefined ) { n = 1; }
    if ( n > 0 &&
         Array.prototype.some.call(array1, Array.isArray)
       ) {
        return xah_flatten_array(Array.prototype.concat.apply([],array1), n-1); }
    else {
        return array1; }
}

// -----------------------------------
// test

var aa = [0,[1,[2,[3,[4,[5,[6]]]]]], "xyz"];

console.log( aa );

console.log( xah_flatten_array(aa) );

console.log( xah_flatten_array(aa,1) );

console.log( xah_flatten_array(aa,2) );

console.log( xah_flatten_array(aa,3) );

console.log( xah_flatten_array(aa,4) );

console.log( xah_flatten_array(aa,400) );

// prints

// [ 0, [ 1, [ 2, [Array] ] ], 'xyz' ]
// [ 0, 1, [ 2, [ 3, [Array] ] ], 'xyz' ]
// [ 0, 1, [ 2, [ 3, [Array] ] ], 'xyz' ]
// [ 0, 1, 2, [ 3, [ 4, [Array] ] ], 'xyz' ]
// [ 0, 1, 2, 3, [ 4, [ 5, [Array] ] ], 'xyz' ]
// [ 0, 1, 2, 3, 4, [ 5, [ 6 ] ], 'xyz' ]
// [ 0, 1, 2, 3, 4, 5, 6, 'xyz' ]

JS Array

  1. Understand JS Array
  2. Create Array
  3. Sparse Array
  4. Array-Like Object
  5. Array How-To

Like it? Help me by telling your friends. Or, Put $5 at patreon.

Or, Buy JavaScript in Depth

If you have a question, put $5 at patreon and message me.

Web Dev Tutorials

  1. HTML
  2. CSS
  3. JavaScript
  4. JS Obj Ref
  5. DOM
  6. SVG
  7. Blog