CODEWITHSUNDEEP
javascriptarrays
David Metcalfe
David Metcalfe

Reputation: 2411

Recommended way to move elements of array to top level in Javascript

Say I have an array: [['TEST1'], ['TEST2'], ['TEST3'], ['TEST4'], ['TEST5']] and I want to move all the elements to the "top" level of the array, so it would end up like so:

['TEST1', 'TEST2', 'TEST3', 'TEST4', 'TEST5']

I have a few mockups below, but I'm wondering what the recommended route might be.

var test = [['TEST1'], ['TEST2'], ['TEST3'], ['TEST4'], ['TEST5']];
var testarr = [];

test.forEach(function(e){
  testarr.push(e[0]);
})
console.log(testarr);

Or

var test = [['TEST1'], ['TEST2'], ['TEST3'], ['TEST4'], ['TEST5']];

for (i = 0; n = test.length, i < n; i++){
  test[i] = test[i][0]
}
console.log(test);

Output of both:

[ 'TEST1', 'TEST2', 'TEST3', 'TEST4', 'TEST5' ]

Upvotes: 0

Views: 2312

Answers (7)

user007
user007

Reputation: 199

You can try the below method

const input = [
  ['TEST1'],
  ['TEST2'],
  ['TEST3'],
  ['TEST4'],
  ['TEST5']
]
function flattenDeep(input) {
    return input.reduce((accu, val) => Array.isArray(val) ? accu.concat(flattenDeep(val)):accu.concat(val), []);
}

console.log(flattenDeep(input));

Upvotes: 0

Maciej Sikora
Maciej Sikora

Reputation: 20132

For the case when you want to change array in different array, the tool for the job is map function instead of forEach. It is cleaner because you don't need additional variable declaration before, and you can use poor functions inside.

var testarr = test.map(function(e){
 return e[0];
});

forEach function purpose is to loop over an array, not change it. Such looping can be used for doing side effects, but in this particular case, you don't want the side effects but clean and poor transformation between two arrays, and for that use map.

Upvotes: 1

Scott Marcus
Scott Marcus

Reputation: 65806

The first approach is much cleaner and doesn't open up the possibility of bugs that can creep in using the counter in the second approach. This is the exact reason that .forEach() is preferred over traditional counting loops with arrays.

Having said that, the better approach would be to use .map() as this works very much like .forEach(), but returns a new array, saving you the trouble of explicitly declaring one and removing the need to push() into the right index of the original array:

var test = [['TEST1'], ['TEST2'], ['TEST3'], ['TEST4'], ['TEST5']];
var testarr = test.map(e => { return e[0]; } );
console.log(testarr);

Upvotes: 1

baao
baao

Reputation: 73231

You'd either use reduce, or destructure it in a es6 environment

let test = [['TEST1'], ['TEST2'], ['TEST3'], ['TEST4'], ['TEST5']];
console.log(test.reduce((a,b) => a.concat(b), []));
console.log([].concat(...test));

If you have a multidimensional array, you could use 

const flat = e => e.reduce(
    (a, b) => a.concat(Array.isArray(b) ? flat(b) : b), []
);

Upvotes: 2

steliosbl
steliosbl

Reputation: 8921

I'd stick with the first approach. It is much more concise, and less likely to fail. The second is somewhat difficult to understand if you're going in not knowing what it is supposed to do.

That being said, if you aren't just doing this to learn and actually plan to use this code for something, I recommend going with one of the proposed solutions from this thread instead. My pick of the litter:

var arrays = [['TEST1'], ['TEST2'], ['TEST3'], ['TEST4'], ['TEST5']];
var result = [].concat.apply([], arrays);

Upvotes: 2

Andy
Andy

Reputation: 63524

I would use map:

ES6

var out = test.map(el => el[0]);

ES5

var out = test.map(function (el) {
  return el[0];
});

DEMO

Upvotes: 3

justadudewhohacks
justadudewhohacks

Reputation: 681

What your looking for is array flattening and can be done by:

var array = [['TEST1'], ['TEST2'], ['TEST3'], ['TEST4'], ['TEST5']]
[].concat.apply([], array);

Upvotes: 1

Related Questions