revision:
The flat() method creates a new array with all sub-array elements concatenated into it recursively up to the specified depth.
array.flat()
array.flat(depth)
Parameters:
depth : optional. The depth level specifying how deep a nested array structure should be flattened. Defaults to 1.
const arr1 = [0, 1, 2, [3, 4]];
console.log(arr1.flat());
// Expected output: Array [0, 1, 2, 3, 4]
const arr2 = [0, 1, 2, [[[3, 4]]]];
console.log(arr2.flat(2));
// Expected output: Array [0, 1, 2, Array [3, 4]]
const arr1 = [0, 1, 2, [3, 4]];
console.log(arr1.flat());
// Expected output: Array [0, 1, 2, 3, 4]
const arr2 = [0, 1, 2, [[[3, 4]]]];
console.log(arr2.flat(3));
// Expected output: Array [0, 1, 2, 3, 4]
example: flattenig nested array.
<div>
<p id="flat-1"></p>
<p id="flat-2"></p>
<p id="flat-3"></p>
<p id="flat-4"></p>
<p id="flat-5"></p>
<p id="flat-6"></p>
<p id="flat-7"></p>
<p id="flat-8"></p>
</div>
<script>
const arr1 = [1, 2, [3, 4]];
arr1.flat();
// [1, 2, 3, 4]
document.getElementById("flat-1").innerHTML = "arr1: " + JSON.stringify(arr1);
document.getElementById('flat-2').innerHTML = "new array 1: " + JSON.stringify(arr1.flat());
const arr2 = [1, 2, [3, 4, [5, 6]]];
arr2.flat();
// [1, 2, 3, 4, [5, 6]]
document.getElementById("flat-3").innerHTML = "arr2: " + JSON.stringify(arr2);
document.getElementById('flat-4').innerHTML = "new array 2: " + JSON.stringify(arr2.flat());
const arr3 = [1, 2, [3, 4, [5, 6]]];
arr3.flat(2);
// [1, 2, 3, 4, 5, 6]
document.getElementById("flat-5").innerHTML = "arr3: " + JSON.stringify(arr3);
document.getElementById('flat-6').innerHTML = "new array 3: " + JSON.stringify(arr2.flat(2));
const arr4 = [1, 2, [3, 4, [5, 6, [7, 8, [9, 10]]]]];
arr4.flat(Infinity);
// [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
document.getElementById("flat-7").innerHTML = "arr4: " + JSON.stringify(arr4);
document.getElementById('flat-8').innerHTML = "new array 4: " + JSON.stringify(arr4.flat(Infinity));
</script>
example: using flat() method on sparse arrays.
<div>
<p id="flat-9"></p>
<p id="flat-10"></p>
<p id="flat-11"></p>
<p id="flat-12"></p>
<p id="flat-13"></p>
<p id="flat-14"></p>
<p id="flat-15"></p>
</div>
<script>
const arr5 = [1, 2, , 4, 5];
console.log(arr5.flat()); // [1, 2, 4, 5]
document.getElementById("flat-9").innerHTML = "arr5: " + JSON.stringify(arr5);
document.getElementById('flat-10').innerHTML = "new array 5: " + JSON.stringify(arr5.flat());
const array = [1, , 3, ["a", , "c"]];
console.log(array.flat()); // [ 1, 3, "a", "c" ]
document.getElementById("flat-11").innerHTML = "array: " + JSON.stringify(array);
document.getElementById('flat-12').innerHTML = "new array : " + JSON.stringify(array.flat());
const array2 = [1, , 3, ["a", , ["d", , "e"]]];
console.log(array2.flat()); // [ 1, 3, "a", ["d", empty, "e"] ]
console.log(array2.flat(2)); // [ 1, 3, "a", "d", "e"]
document.getElementById("flat-13").innerHTML = "array2: " + JSON.stringify(array2);
document.getElementById('flat-14').innerHTML = "new array 2: " + JSON.stringify(array2.flat());
document.getElementById('flat-15').innerHTML = "new array 2: " + JSON.stringify(array2.flat(2));
</script>
example: create a new array with the sub-array elements concatenated.
<div>
<p id="flat-16"></p>
<p id="flat-17"></p>
<p id="flat-18"></p>
<p id="flat-19"></p>
<p id="flat-20"></p>
<p id="flat-21"></p>
</div>
<script>
const myArr = [[1,2],[3,4],[5,6]];
document.getElementById("flat-16").innerHTML = "original arrays : " + JSON.stringify(myArr);
const newArr = myArr.flat();
document.getElementById("flat-17").innerHTML = "new array : " + newArr;
document.getElementById("flat-18").innerHTML = "new array : " + JSON.stringify(newArr);
const myArr1 = [1, 2, [3, [4, 5, 6], 7], 8];
document.getElementById("flat-19").innerHTML = "original arrays : " + JSON.stringify(myArr1);
const newArr1 = myArr1.flat(2);
document.getElementById("flat-20").innerHTML = "new array : " + newArr1;
document.getElementById("flat-21").innerHTML = "new array : " + JSON.stringify(newArr1);
</script>