Integralist/flatten-array.js

Integralist · 2015-05-20T08:37:40Z

Could probably have used Array#reduce as well...

// ES6
const flatten = list => list.reduce(
    (a, b) => a.concat(Array.isArray(b) ? flatten(b) : b), []
);

// ES5
var flatten = function flatten(list) {
    return list.reduce(function (a, b) {
        return a.concat(Array.isArray(b) ? flatten(b) : b);
    }, []);
};

flatten([[1,[2,[[3]]]],4,[5,[[[6]]]]]); // => [1 2 3 4 5 6]

JakeChampion · 2015-06-14T13:22:49Z

There is a bug on line 5:
? flattenTco([...first, ...rest]) should be ? flattenTco([...first, ...rest], accumulator)

I imagine once JS runtimes implement tail-call optimisation themselves that the reduce version may work with large depth arrays however, Array#reduce fails on large depth arrays presently. Here is a quick test case, the code creates an array with a depth of 3000 and fills each array with a random amount of integers ranging from 0 to 10. If you run this code after compiling it to ES5, you will see that flatten2 executes correctly whereas flatten errors with a maximum call stack exceeded error.
Here is a link to the code within the BabelJS online REPL

const randomArray = (arr = []) =>
  Math.random() * 10 < 9
    ? randomArray([...arr, Math.floor(Math.random() * 10)])
    : arr

const nestedRandomArray = (depth = 0, arr = [], fillWith) =>
  depth == 0
    ? arr
    : nestedRandomArray(depth - 1, [...randomArray(), arr])

const array = nestedRandomArray(3000)

const flatten = list => list.reduce(
    (a, b) => a.concat(Array.isArray(b) ? flatten(b) : b), []
)

const flatten2 = ([first, ...rest], arr = []) => 
  (first === undefined)
    ? arr
    : (Array.isArray(first))
      ? flatten2([...first, ...rest], arr)
      : flatten2(rest, [...arr, first])


const flatarray2 = flatten2(array)
console.log(flatarray2)

const flatarray = flatten(array)
console.log(flatarray)

JakeChampion · 2015-06-15T07:22:59Z

If we write a left fold function in user-land that is tail-recursive it will work:

const foldl = (fn, terminalValue, [first, ...rest]) => 
  first === void 0
   ? terminalValue
   : foldl(fn, fn(terminalValue, first), rest)

const flatten2 = list => foldl(
  (a, b) => a.concat(Array.isArray(b) ? flatten2(b) : b)
  , []
  , list
);

christophemarois · 2016-09-21T23:03:15Z

With loops only

const flatten = arr => {
  let index
  while ( (index = arr.findIndex(el => Array.isArray(el))) > -1 ) {
    arr.splice(index, 1, ...arr[index])
  }
  return arr
}

flatten([1, [2, 'a', { b: 1, c: [2, 3] } ], [3, 4, [5, 6]]])
// => [ 1, 2, 'a', { b: 1, c: [ 2, 3 ] }, 3, 4, 5, 6 ]

mnpenner · 2017-02-14T19:22:43Z

To flatten one level deep is really simple:

function flatten(arr) {
    return Array.prototype.concat(...arr);
}

Usage:

> flatten([1,2,3])
[ 1, 2, 3 ]
> flatten([1,2,3,[4,5]])
[ 1, 2, 3, 4, 5 ]
> flatten([1,2,3,[4,5,[6,7]]])
[ 1, 2, 3, 4, 5, [ 6, 7 ] ]

scf4 · 2017-06-25T23:32:02Z

@mnpenner such a great solution.

I imagine you could also do Array.concat(...Array.concat(...arr)) and so on.

Noitidart · 2017-07-24T01:28:04Z

Awesome solution by @mnpenner, I needed this for Object.entries, so single level flatten is all i needed. Thanks!

AquiGorka · 2017-08-05T06:56:01Z

Array.prototype.flatten = function() {
return this.toString().replace('[', '').replace(']', '').split(',')
}

Nested arrays too

christophemarois · 2017-08-05T14:51:18Z

Deep version of @mnpenner

const flatten = arr => {
  while (arr.find(el => Array.isArray(el))) arr = Array.prototype.concat(...arr)
  return arr
}

federicofazzeri · 2017-09-15T19:29:08Z

function flatten(arr) {
    return arr.reduce( (acc,arr) => [...acc, ...arr], []);
}

gkatsanos · 2017-09-22T16:01:37Z

@christophemarois : how performant is that? 👍

christophemarois · 2017-10-11T16:03:48Z

@gkatsanos not really, you are right. This is the most performant version I can think of, though it's not as succinct.

const flatten = arr => {
  let i = 0
  while (i < arr.length) {
    if (Array.isArray(arr[i])) {
      arr.splice(i, 1, ...arr[i])
    } else {
      i++
    }
  }
  return arr
}

It iterates on an array from left to right, staying on the same index as long as the current index is an array. It then uses splice to remove the array from the current index and insert its flatten elements at the current position. Because arr.length is computed at every loop iteration, it will update on each loop to match the array's current length.

r3wt · 2018-01-01T21:03:00Z

@christophemarois a little short

const flatten = arr => {
    let i = 0
    while (i < arr.length) {
        Array.isArray(arr[i]) && arr.splice(i, 1, ...arr[i])  || i++
    }
    return arr
}

OR

const flatten = arr => {
    for (let i=0; i < arr.length;Array.isArray(arr[i]) && arr.splice(i, 1, ...arr[i])  || i++){}
    return arr
}

you can even omit return statement, since the array is modified by reference and will be mutated

rulyaryu · 2018-01-08T13:59:31Z

@Phederic, doesn't work without Babel, and with Babel works..but not as expected
function flatten(arr) {
return arr.reduce( (acc,arr) => [...acc, ...arr], []);
}
let res = flatten([1, [2], 3, 4]); //logs [2]

bt4R9 · 2018-03-05T09:43:51Z

Hi guys.
I've created a 5 test cases with different approaches. Can someone plz explain me why while+shift+concat+push technique is the fastest one?
Perhaps concat is the cheapest operation.

const flatten_loop = arr => {
  let stack = [];
  let item;
  
  while (item = arr.shift()) {
    if (Array.isArray(item)) {
      arr = item.concat(arr);
    } else {
      stack.push(item);
    }
  }
  
  return stack;
}

Test cases
https://jsperf.com/flatten-variants

YoussefLagtab · 2018-03-29T08:40:18Z

`/* flatten depth 1 */
let flatten = arr => [].concat(...arr);

/**

flatten depth d < 4
not working properly
*/
let flattend =(arr, d)=>{
return d===1 ? flatten(arr) : flatten(flatten(arr, d-1))
}`

vikas199 · 2018-05-23T03:57:40Z

is there any alternative regardless flatten

dominique-mueller · 2018-05-24T20:27:03Z

I'm using the following, and it works like a charm:

export function flattenArray( array: Array<any> ): Array<any> {
    const flattenedArray: Array<any> = [].concat( ...array );
    return flattenedArray.some( Array.isArray )
        ? flattenArray( flattenedArray )
        : flattenedArray;
}

laukstein · 2018-07-29T17:40:08Z

You can perhaps use Array.prototype.flat() https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/flat

arilotter · 2018-08-07T16:40:52Z

@bt4R9 your code has a bug. You can't just check if a value is truthy, you must check if it's undefined, otherwise the method stops processing. For example, flatten_loop([1,null,2]) will equal [1], not [1,null,2].

This version should fix that:

const flatten_loop = arr => {
  let stack = [];
  let item;
  
  while ((item = arr.shift()) !== undefined) {
    if (Array.isArray(item)) {
      arr = item.concat(arr);
    } else {
      stack.push(item);
    }
  }
  
  return stack;
}

sachingvit · 2018-11-11T12:05:06Z

var a = [1,2,3,[1,2,3],4,[5,6,7], 9,10] ;
var result = [];
a.forEach(data=>{
	result = [...result].concat(data) 
}) 

console.log(result);

Output
[1, 2, 3, 1, 2, 3, 4, 5, 6, 7, 9, 10]

Ch1sKey · 2019-03-23T09:51:25Z

Not effective but interesting!

arr = [1,2,3,[4,5,[1,2,3,4,56,67],6,7,[7.5,7.6,7.9],8],9,10,11]

const flat = (arr, depth= Infinity ,arr2 = []) =>{
    arr.forEach(e => {
        typeof e === 'object' && depth ? flat(e, depth-1 ,arr2) : arr2.push(e)
    });
    return arr2
}

console.log(flat( arr, 1 )) // [ 1, 2, 3, 4, 5, [ 1, 2, 3, 4, 56, 67 ], 6, 7, [ 7.5, 7.6, 7.9 ], 8, 9, 10, 11 ]  // Depth 1 falt
console.log(flat(arr)) // [ 1, 2, 3, 4, 5, 1, 2, 3, 4, 56, 67, 6, 7, 7.5, 7.6, 7.9, 8, 9, 10, 11 ]  // Full flat

moimikey · 2019-03-31T16:02:43Z

const deepFlat = (arr) => arr.flat(Infinity)

yzrzya1 · 2019-06-09T00:56:23Z

one hack solution. (deep nested also works)
JSON.stringify(arr).split(',').map(each => each.match(/[+-]?\d+(?:\.\d+)?/g)[0])

coolskin2b · 2019-07-09T11:14:46Z

one hack solution. (deep nested also works)
JSON.stringify(arr).split(',').map(each => each.match(/[+-]?\d+(?:\.\d+)?/g)[0])
work like a charm for number, but not with string ['un', 2, 'trois', 4, 'cinq'].

DimitryDushkin · 2020-10-29T08:32:52Z

For immutable solution, this should be the most performant one, because it uses only pop() and push():

const flatten = (list) => { 
  const stack = [list];
  const result = [];

  while(stack.length > 0) {
    const elem = stack.pop();
    if (Array.isArray(elem)) {
      for (let i = elem.length - 1; i >= 0; i--) {
        stack.push(elem[i]);
      }
    } else {
      result.push(elem);
    }
  }

  return result;
};

	const flattenTco = ([first, ...rest], accumulator) =>
	(first === undefined)
	? accumulator
	: (Array.isArray(first))
	? flattenTco([...first, ...rest])
	: flattenTco(rest, accumulator.concat(first))

	const flatten = (n) => flattenTco(n, []);

	console.log(flatten([[1,[2,[[3]]]],4,[5,[[[6]]]]]))

Integralist/flatten-array.js

Integralist commented May 20, 2015

JakeChampion commented Jun 14, 2015 •

edited

JakeChampion commented Jun 15, 2015

christophemarois commented Sep 21, 2016 •

edited

mnpenner commented Feb 14, 2017 •

edited

scf4 commented Jun 25, 2017

Noitidart commented Jul 24, 2017

AquiGorka commented Aug 5, 2017

christophemarois commented Aug 5, 2017

federicofazzeri commented Sep 15, 2017 •

edited

gkatsanos commented Sep 22, 2017

christophemarois commented Oct 11, 2017

r3wt commented Jan 1, 2018 •

edited

rulyaryu commented Jan 8, 2018

bt4R9 commented Mar 5, 2018 •

edited

YoussefLagtab commented Mar 29, 2018 •

edited

vikas199 commented May 23, 2018

dominique-mueller commented May 24, 2018

laukstein commented Jul 29, 2018

arilotter commented Aug 7, 2018

sachingvit commented Nov 11, 2018

Ch1sKey commented Mar 23, 2019

moimikey commented Mar 31, 2019 •

edited

yzrzya1 commented Jun 9, 2019

coolskin2b commented Jul 9, 2019

DimitryDushkin commented Oct 29, 2020

Integralist/flatten-array.js

Integralist commented May 20, 2015

JakeChampion commented Jun 14, 2015 • edited

JakeChampion commented Jun 15, 2015

christophemarois commented Sep 21, 2016 • edited

mnpenner commented Feb 14, 2017 • edited

scf4 commented Jun 25, 2017

Noitidart commented Jul 24, 2017

AquiGorka commented Aug 5, 2017

christophemarois commented Aug 5, 2017

federicofazzeri commented Sep 15, 2017 • edited

gkatsanos commented Sep 22, 2017

christophemarois commented Oct 11, 2017

r3wt commented Jan 1, 2018 • edited

rulyaryu commented Jan 8, 2018

bt4R9 commented Mar 5, 2018 • edited

YoussefLagtab commented Mar 29, 2018 • edited

vikas199 commented May 23, 2018

dominique-mueller commented May 24, 2018

laukstein commented Jul 29, 2018

arilotter commented Aug 7, 2018

sachingvit commented Nov 11, 2018

Ch1sKey commented Mar 23, 2019

moimikey commented Mar 31, 2019 • edited

yzrzya1 commented Jun 9, 2019

coolskin2b commented Jul 9, 2019

DimitryDushkin commented Oct 29, 2020

JakeChampion commented Jun 14, 2015 •

edited

christophemarois commented Sep 21, 2016 •

edited

mnpenner commented Feb 14, 2017 •

edited

federicofazzeri commented Sep 15, 2017 •

edited

r3wt commented Jan 1, 2018 •

edited

bt4R9 commented Mar 5, 2018 •

edited

YoussefLagtab commented Mar 29, 2018 •

edited

moimikey commented Mar 31, 2019 •

edited