Converting multi-dimensional arrays (especially two-dimensional arrays) into one-dimensional arrays is a common logic in business development. Recently, when I learned the source code of Vue2.6.1.1 version of Vue, I saw the code of the source code to reduce the dimensionality of two-dimensional arrays, so I will write an article here to record it and enhance the impression.
Reduced to a one-dimensional array
Circular Dimension Reduction
let children = [1, 2, 3, [4, 5, 6], 7, 8, [9, 10]];
function simpleNormalizeChildren(children) {
let reduce = [];
for (let i = 0; i < ; i++) {
if ((children[i])) {
for (let j = 0; j < children[i].length; j++) {
(children[i][j]);
}
} else {
(children[i]);
}
}
return reduce;
}
simpleNormalizeChildren(children) // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
This method has a simple idea, using a double loop to traverse each element in a two-dimensional array and put it into a new array.
concat dimensionality reduction
Introduction to concat on MDN
“concat creates a new array consisting of the elements in the object on which it is called, followed in order by, for each argument, the elements of that argument (if the argument is an array) or the argument itself (if the argument is not an array).”
concat
If the parameter of the concat method is an element, the element will be inserted directly into the new array; if the parameter is an array, the elements of the array will be inserted into the new array; apply this feature to the code:
let children = [1, 2, 3, [4, 5, 6], 7, 8, [9, 10]];
function simpleNormalizeChildren(children) {
let reduce = [];
for (let i = 0; i < ; i++) {
reduce = (children[i]);
}
return reduce;
}
simpleNormalizeChildren(children) // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
If the element of children is an array, as a parameter of the concat method, each child element in the array will be inserted into the new array independently. Using the concat method, we simplify the double loop into a single loop.
apply and concat dimensionality reduction
Introduction to the apply method on MDN
“The apply() method calls a function with a given this value and arguments provided as an array.”
apply
The apply method will call a function, the first parameter of the apply method will be used as this value of the called function, and the second parameter of the apply method (an array, or an object of the class array) will be used as the arguments value of the called object, that is, each element of the array will become the parameters of the called function in turn; apply this feature to the code:
let children = [1, 2, 3, [4, 5, 6], 7, 8, [9, 10]];
function simpleNormalizeChildren(children) {
return ([], children);
}
simpleNormalizeChildren(children) // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
As the second parameter of the apply method, children is itself an array. Each element in the array (or an array, that is, the second dimension of a two-dimensional array) will be passed into concat as parameters, and the effect is equivalent to [].concat(1, 2, 3, [4, 5, 6], 7, 8, [9, 10]). Using the apply method, we optimize a single-repetition loop into a line of code
Vue2.6.11 version source code dimensionality reduction
let children = [1, 2, 3, [4, 5, 6], 7, 8, [9, 10]];
// :any can be removed. Here is Vue's parameter type passed through Flow. It can be any typefunction simpleNormalizeChildren(children: any) {
for (let i = 0; i < ; i++) {
if ((children[i])) {
return ([], children);
}
}
return children;
}
simpleNormalizeChildren(children); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
Multidimensional array is reduced to one-dimensional array
Recursive dimension reduction
A recursive function is to call itself in the function body;
When using recursive functions, pay attention to the function terminating conditions to avoid dead loops;
// Multidimensional arraylet children = [1, [2,3], [4, [5, 6, [7, 8]]], [9, 10]];
function simpleNormalizeChildren(children) {
for (let i = 0; i < ; i++) {
if ((children[i])) {
children = ([], children);
for(let j =0; j<; j++) {
simpleNormalizeChildren(children)
}
}
}
return children;
}
simpleNormalizeChildren(children); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
This is the end of this article about the implementation of JS array dimensionality reduction ([], arr). For more related JS array dimensionality reduction content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!