Analysis of JavaScript Array. flat of Function Usage

Over the past few years, a number of useful features have been added to the Javascript Array global objects, which give developers a variety of options when writing code that can be used with arrays. These features offer a number of advantages, most notably, although developers have had to implement their own complex logic to perform various array operations for the past 1 period of time, these new features no longer require this homemade implementation. One of the useful functions that will be discussed in this article is the flat () function.

An in-depth discussion of Array. flat () function of JavaScript

Functional overview

The flat () function provides the ability to concatenate a set of array items into a whole new array and return the new array when the function completes. Since this function produces a whole new array, after the 1-denier function completes the operation, any existing, completely independent array contained in the original array will not be changed, and no precautions need to be taken before starting the operation.

The flat () function takes only one argument, which is optional, and only one argument is the depth argument. If the original array contains one or more nested array structures, this parameter determines how many small groups of layers the function flattens into a single layer. Because this parameter is optional, its default value is 1, and when the function completes, only the single-layer array will be flattened into the new array returned.

Case without parameters

After introducing the general function behavior, let's look at a few examples of how the flat () function works in practice. The following example illustrates the case where no parameter value is specified:

var array1 = [1, 2, [3, 4], [[5, 6]], [[[7, 8]]], [[[[9, 10]]]]];
var array2 = array1.flat();
// array2: [1, 2, 3, 4, [5, 6], [[7, 8]], [[[9, 10]]]]

The flat () function is called without parameter values. Considering the default values of optional parameters, this function call is the same as flat (1). This means that any array with a depth of 1 in the original array will be completely flattened so that all its contents are separately connected to the new array. Any array of depth 2 or greater in the original array will be reduced by 1, and any single array item of depth 1 in those arrays will be connected separately to the new array. As a result, the first array containing 3 and 4 in the original array is flattened to connect the two array items to the new array, respectively. In addition, each of the remaining three nested arrays is concatenated into the new array, reducing the nesting depth by one.

Positive depth

The following example demonstrates specifying a positive depth parameter value:

var array1 = [1, 2, [3, 4], [[5, 6]], [[[7, 8]]], [[[[9, 10]]]]];
var array2 = array1.flat(2);
// array2: [1, 2, 3, 4, 5, 6, [7, 8], [[9, 10]]]

The flat () function is called with the depth parameter value of 2. This means that any array with a depth of up to 2 in the original array will be completely flattened so that all its contents can be separately connected to the new array. Any array of depth 3 or greater in the original array will be reduced by 2 in depth, and any single array entry of depth 1 or 2 in those arrays will be connected to the new array separately. As a result, the first two arrays in the original array containing 3 and 4 and 5 and 6 are flattened, thus connecting these four array items to the new array respectively. In addition, the remaining two nested arrays are connected to the new array, and their nesting depth is reduced by 2.

Infinite depth

The following example demonstrates specifying an infinite depth parameter value:

var array1 = [1, 2, [3, 4], [[5, 6]], [[[7, 8]]], [[[[9, 10]]]]];
var array2 = array1.flat(Infinity);
// array2: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

The flat () function is called with the depth parameter value Infinity. This means that all arrays of any depth in the original array will be flattened so that all their contents are separately connected to the new array. One very important thing to remember when using values such as Infinity with the flat () function is that if an application encounters an array nested deep enough, it may run out of memory. Although Infinity is used here to demonstrate that this value can be used with the flat () function 1, it is recommended to use smaller finite parameter values to avoid any unexpected errors in the application.

Zero depth

The following example demonstrates specifying an depth parameter value of 0:

var array1 = [1, 2, [3, 4], [[5, 6]], [[[7, 8]]], [[[[9, 10]]]]];
var array2 = array1.flat(0);
// array2: [1, 2, [3, 4], [[5, 6]], [[[7, 8]]], [[[[9, 10]]]]]

The flat () function is called with a depth parameter value of 0. This means that none of the arrays contained in the original array are flattened, and the composition of the single array entries and nested arrays of the new array is exactly the same as that of the original array.

Negative depth

The following example demonstrates specifying a negative depth parameter value:

var array1 = [1, 2, [3, 4], [[5, 6]], [[[7, 8]]], [[[[9, 10]]]]];
var array2 = array1.flat(-Infinity);
// array2: [1, 2, [3, 4], [[5, 6]], [[[7, 8]]], [[[[9, 10]]]]]

The flat () function is called with the depth parameter value-Infinity. Because negative depth values are meaningless for flat nested arrays, 0 is used instead when a negative depth parameter value is specified. As the previous example demonstrated, when the specified depth parameter value is 0, no array in the original array is flat, and the composition of each array item and nested array in the new array is exactly the same as that of the original array.

Lessons learned

You can learn a few lessons about the flat () function from this article. The first thing to remember is that the flat () function does not change any ordinary or nested arrays in the original array in any way, so there is no need to maintain the state of these arrays before using the function. The only array that the flat () function will change is the brand new array returned after the function completes, and it is only built with all the contents of the original array.

The second thing to remember is that the flat () function removes any null values that exist in the original array. The following example demonstrates the actual effect of this function:

var array1 = [1, , 3, , 5];
var array2 = array1.flat();
// array2: [1, 3, 5]

The flat () function removes both array entries from the new array returned after the function completes, although the original array occupies five positions and the values for positions 2 and 4 are undefined. As a result, the new array contains only three array items, and their values are not undefined.

The third thing to remember about the flat () function, And the last thing, Is one of its general uses, And how it helps to simplify logic, if there is no flat () function available, to merge all the items contained in any array, the usual way is to write custom logic to iterate through all arrays, pull items separately from one array, and then put them into another array, perhaps taking into account nested arrays. This logic is often confusing and error-prone, so it is a good choice to avoid it by using abstract built-in functions such as flat () function.