How to flatten array with the JavaScript/jQuery?

Last Updated : 19 Jun, 2024

Flattening an array in JavaScript or jQuery involves transforming a nested array into a single-level array. This process is essential for simplifying complex data structures and making it easier to manipulate and access array elements.

Below are the approaches to flatten an array with JavaScript/Jquery:

Table of Content

Using Array.prototype.flat()
Using Recursion
Using reduce() Method
Using JQuery $.map() method

Using `Array.prototype.flat()`

The flat() method creates a new array with all sub-array elements concatenated into it recursively up to the specified depth. Using Infinity as the depth ensures all nested arrays are fully flattened.

Example: To demonstrate flattening array with array.prototype.flat() method in JavaScript.

JavaScript

const nestedArray = [1, [2, [3, [4]]]];
const flattenedArray = nestedArray.flat(Infinity);
console.log(flattenedArray);

Output

[ 1, 2, 3, 4 ]

Using Recursion

A recursive function calls itself to flatten nested arrays. It checks if an element is an array; if so, it concatenates the flattened result of that element, otherwise, it adds the element to the result.

Example: To demonstrate flattening array with recursion method in JavaScript.

JavaScript

function flattenArray(arr) {
    let result = [];
    arr.forEach(element => {
        if (Array.isArray(element)) {
            result = result.concat(flattenArray(element));
        } else {
            result.push(element);
        }
    });
    return result;
}

const nestedArray = [1, [2, [3, [4]]]];
let flattenedArray = flattenArray(nestedArray);
console.log(flattenedArray);

Output

[ 1, 2, 3, 4 ]

Using `reduce()` Method

The reduce() method iterates over the array, applying a function that concatenates elements if they are arrays or adds them directly if they are not.

Example: To demonstrate flattening array with reduce() method in JavaScript.

JavaScript

function flattenArray(arr) {
    return arr.reduce((acc, val) => Array
    .isArray(val) ? acc.concat(flattenArray(val)) : acc.concat(val), []);
}

const nestedArray = [1, [2, [3, [4]]]];
const flattenedArray = flattenArray(nestedArray);
console.log(flattenedArray);

Output

[ 1, 2, 3, 4 ]

Using JQuery $.map() method

In jQuery can be used to perform the operation. This method takes the array and a method as input. The second argument which is a method takes elements of original array one by one and return its elements.

Example: To demonstrate flattening array with $map() method in JQuery.

html

<!DOCTYPE HTML>
<html>

<head>
    <title>
        How to flatten array with
        the JavaScript?
    </title>

    <style>
        body {
            text-align: center;
        }

        h1 {
            color: green;
        }
    </style>
    <script
        src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
        </script>
</head>

<body>

    <p id="GFG_UP"></p>

    <button onClick="GFG_Fun()">
        click here
    </button>

    <p id="GFG_DOWN"></p>

    <script>
        let up = document.getElementById('GFG_UP');
        let down = document.getElementById('GFG_DOWN');
        let arr1 = [1, 2, 3];
        let arr2 = [4, 5, 6, 7];
        let arr = [arr1, arr2, 8, 9];

        up.innerHTML = "Click on button to get the"
            + " common elements from these array"
            + "<br>Array - [[" + arr[0] + "], ["
            + arr[1] + "], " + arr[2] + ", "
            + arr[3] + "]";

        function GFG_Fun() {
            down.innerHTML = $.map(arr, function (n) {
                return n;
            });
        }
    </script>
</body>

</html>

Output:

JavaScript Array flat() Method

PranchalKatiyar

Improve

Article Tags :

How to flatten array with the JavaScript/jQuery?

Using Array.prototype.flat()

Using Recursion

Using reduce() Method

Using JQuery $.map() method

Similar Reads

Thank You!

What kind of Experience do you want to share?

Using `Array.prototype.flat()`

Using `reduce()` Method