javascriptarraysmultidimensional-arraymergeflatten

Merge/flatten an array of arrays


I have a JavaScript array like:

[["$6"], ["$12"], ["$25"], ["$25"], ["$18"], ["$22"], ["$10"]]

How would I go about merging the separate inner arrays into one like:

["$6", "$12", "$25", ...]

Solution


  • ES2019

    ES2019 introduced the Array.prototype.flat() method which you could use to flatten the arrays. It is compatible with most environments, although it is only available in Node.js starting with version 11, and not at all in Internet Explorer.

    const arrays = [
          ["$6"],
          ["$12"],
          ["$25"],
          ["$25"],
          ["$18"],
          ["$22"],
          ["$10"]
        ];
    const merge3 = arrays.flat(1); //The depth level specifying how deep a nested array structure should be flattened. Defaults to 1.
    console.log(merge3);
        


    Older browsers

    For older browsers, you can use Array.prototype.concat to merge arrays:

    var arrays = [
      ["$6"],
      ["$12"],
      ["$25"],
      ["$25"],
      ["$18"],
      ["$22"],
      ["$10"]
    ];
    var merged = [].concat.apply([], arrays);
    
    console.log(merged);

    Using the apply method of concat will just take the second parameter as an array, so the last line is identical to this:

    var merged = [].concat(["$6"], ["$12"], ["$25"], ["$25"], ["$18"], ["$22"], ["$10"]);