How to Flatten Array of Arrays in TypeScript ?
Array flattening is the process of converting a nested array (an array of arrays) into a single-dimensional array where all the elements are at the same level. In other words, it involves transforming an array that contains other arrays as elements into an array that only contains non-array elements.
Array flattening is commonly needed when dealing with arrays of arrays, especially when you want to simplify the data structure for easier processing or when working with functions that expect a flat array as input.
Example:
Before Flattening Array of Arrays
const nestedArray: number[][] = [[1, 2], [3, 4], [5, 6]];
After Flattening Array of Arrays
const flattenedArray: number[] = [1, 2, 3, 4, 5, 6];
Below are the approaches used to Flatten array of arrays in TypeScript:
Table of Content
- Using Array.prototype.concat and apply
- Using Array.prototype.reduce
- Using Array.prototype.flat
- Using ForEach
- Using the spread operator and Array.prototype.push
Approach 1: Using Array.prototype.concat and apply
This method uses the concat
method along with apply
to flatten the array. It essentially spreads the elements of the nested arrays into a new array.
Example: In this example, We use the concat
method along with apply
to flatten the nested array. The concat
method is employed to concatenate the arrays, and apply
spreads the elements of the nested arrays into a new array.
const nestedArray: number[][] = [[1, 2], [3, 4], [5, 6]];
const flattenedArray: number[] = [].concat.apply([], nestedArray);
console.log(flattenedArray);
Output:
[1, 2, 3, 4, 5, 6]
Approach 2: Using Array.prototype.reduce
The reduce
method is used here to iterate over the nested arrays and accumulate their elements into a single array.
Example: In this example, The reduce
method is used to iterate over the nested arrays and accumulate their elements into a single array. It offers a concise way to flatten the array by progressively concatenating the inner arrays.
const nestedArray: number[][] = [[1, 2], [3, 4], [5, 6]];
const flattenedArray: number[] =
nestedArray.reduce((acc, current) => acc.concat(current), []);
console.log(flattenedArray);
Output:
[1, 2, 3, 4, 5, 6]
Approach 3: Using Array.prototype.flat
The flat
method is a built-in JavaScript method that can be used to flatten an array by a specified depth.
Example: In this example, The flat
method is used to flatten the nested array. This built-in JavaScript method simplifies the process by handling the flattening based on a specified depth. In this case, we use it without a depth parameter to completely flatten the array.
const nestedArray: number[][] = [[1, 2], [3, 4], [5, 6]];
const flattenedArray: number[] = nestedArray.flat();
console.log(flattenedArray);
Output:
[1, 2, 3, 4, 5, 6]
Approach 4: Using ForEach
To flatten an array of arrays in TypeScript using forEach
, you can iterate over each element of the outer array and then use another forEach
loop to handle the inner arrays.
Example: In this example, arrayOfArrays
is an array of number arrays. The forEach
loop is used to iterate over each inner array (innerArray
). For each inner array, another forEach
loop is used to iterate over its elements (element
), and each element is pushed into the flattenedArray
.
const arrayOfArrays: number[][] = [[1, 2, 3], [4, 5], [6, 7, 8]];
const flattenedArray: number[] = [];
arrayOfArrays.forEach(innerArray => {
innerArray.forEach(element => {
flattenedArray.push(element);
});
});
console.log(flattenedArray);
Output:
[1, 2, 3, 4, 5, 6, 7, 8]
Approach 5: Using the spread operator and Array.prototype.push
In this approach, we utilize the spread operator to spread the elements of each inner array into a new array. We then use the push method to add each element from the spread array to the resulting flattened array.
Example: In this example we flattens an array of arrays by iterating through each inner array and pushing its elements into a new array, then logging the flattened array.
const arrayOfArrays: number[][] = [[1, 2, 3], [4, 5], [6, 7, 8]];
const flattenedArray: number[] = [];
for (const innerArray of arrayOfArrays) {
flattenedArray.push(...innerArray);
}
console.log(flattenedArray);
Output:
[1, 2, 3, 4, 5, 6, 7, 8]
Contact Us