递归地展平数组

Question

I tried to implement an array flatten function recursively. Here is the code:

function flatten(arr) {
  var flatArr = [];
  for (var i = 0; i < arr.length; i++) {
    if (arr[i] instanceof Array) {
      flatArr.concat(flatten(arr[i]));
    } else {
      flatArr.push(arr[i]);
    }
  }
  return flatArr;
}


console.log(flatten([1, 2, 3, 4, [5]]));
/*
result: [1, 2, 3, 4]
expected: [1, 2, 3, 4, 5]
*/

But I don't know why the result is not correct. Please help me explain it.

Answer 1

The concat() method returns a new array comprised of the array on which it is called joined with the array(s) and/or value(s) provided as arguments.

flatArr.concat(...) doesn't change flatArr ... you need to assign it like so:

flatArr = flatArr.concat('flatten(arr[i]));

Here is a working example with 3 levels deep array:

 function flatten(arr) { var flatArr = []; for (var i = 0; i < arr.length; i++) { if (arr[i] instanceof Array) { flatArr = flatArr.concat(flatten(arr[i])); } else { flatArr.push(arr[i]); } } return flatArr; } var arr = [1,2,3,4,[5,6,[7,8]]]; var flatten = flatten(arr); $('#result').html(JSON.stringify(flatten));

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="result"></div>

You can read more about Array.concat function here

Answer 2

You have to assign the returned array after performing the concat ,

 if (arr[i] instanceof Array) {
      flatArr = flatArr.concat(flatten(arr[i]));

concat will not edit the source array. It will give you a new copy. So we have to assign it back to the source array manually.

Answer 3

Maybe you like a real recursive solution:

 function flatten(arr) { if (!arr.length) { return []; } var a = arr.shift(); return (Array.isArray(a) ? flatten(a) : [a]).concat(flatten(arr)); } document.write('<pre>' + JSON.stringify(flatten([1, 2, 3, 4, [5]])) + '</pre>'); document.write('<pre>' + JSON.stringify(flatten([1, [2, 3, [4, 5]], 6, 7, [8]])) + '</pre>');

Answer 4

This worked for me, hope it helps! :)

 function flatten(array) { let result = []; array.forEach(el => { if(el instanceof Array){ result.push(...flatten(el)); }else result.push(el) }); return result } console.log(flatten([1, [2, 3, [4]]]));

Answer 5

I am influenced by the Nina Scholtz 's answer ( https://stackoverflow.com/a/35681232/5018572 ) above and made a tail call safe recursive flat array function which avoid using any iteration in it:

'use strict'

function flatten(arr, flatArr = []) {
  if (arr.length === 0) {
    return flatArr;
  }

  var [head, ...rest] = arr;

  if (Array.isArray(head)) {
    head.push(...rest);
    
    return flatten(head, flatArr);
  } else {
    flatArr.push(head);
  }

  return flatten(rest, flatArr);
}

var test = [1,2,[3,4,[5,[[[6,[[[7]]]]]]]]]
console.log(flatten(test));

Answer 6

I see that you are trying to write your own function to do this, which is fantastic. But there is a fantastic framework called lodash which has tons of helper functions like this, case in point flattenDeep :

https://lodash.com/docs#flattenDeep

Answer 7

Loop array until all items get flatten, It's a different solution, not exactly what asked in the question.

// loop until all items are flatten
for (var i = 0, len = data.length; i < len; i++) {
    if (Array.isArray(data[i])) {
        // flatten until there are no more nested
        data = data.concat.apply([], data);
        i--;
        len = data.length;
    }
}