JS配列降下の実現Aray.prototype.co ncat.appry([],arr)
3873 ワード
多次元配列(特に二次元配列)を一次元配列に変換することは、業務開発においてよく使われるロジックであり、最近では黄逸話先生に従ってVue 2.6.5.1バージョンのソースコードを勉強している時、ソースが二次元配列に対して维护されているコードを見たので、ここで一篇を書き、記録し、印影を強化します。
二次元配列は一次元配列に下がる。
ループダウン
concat降维
MDNでのコンサートの紹介
「concat creates a new array consisting of the elements in the object on which it is caled,followed in order by,for each argment,the element of that argment(if the argment is an array)or the argment the argment the argment selgment the
cat
concat法のパラメータが要素である場合、要素は直接に新しい配列に挿入されます。パラメータが行列の場合、配列の各要素は新しい配列に挿入されます。この特性をコードに適用します。
applyとconcatの降维
MDNでのappy方法の紹介
「The appy()method cars a function with a given this value and argmens provided as an array.」
appy
applyメソッドは、関数を呼び出すことができます。applyメソッドの最初のパラメータは、呼び出された関数のthis値として、applyメソッドの2番目のパラメータ(1つの配列、またはクラスの配列のオブジェクト)は、呼び出されたオブジェクトのargments値として、つまり、配列の各要素は、順次、呼び出された関数の各パラメータとなります。この特性をコードに適用します。
Vue 2.6.11バージョンのソースコードを维护します。
再帰的降下次元
再帰関数とは、関数の中で自分を呼び出すことです。
再帰関数の使用は、関数終了条件がデッドサイクルを回避することに注意しなければならない。
二次元配列は一次元配列に下がる。
ループダウン
let children = [1, 2, 3, [4, 5, 6], 7, 8, [9, 10]];
function simpleNormalizeChildren(children) {
let reduce = [];
for (let i = 0; i < children.length; i++) {
if (Array.isArray(children[i])) {
for (let j = 0; j < children[i].length; j++) {
reduce.push(children[i][j]);
}
} else {
reduce.push(children[i]);
}
}
return reduce;
}
simpleNormalizeChildren(children) // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
この方法は単純な考え方で、二重循環を利用して二次元配列の各要素を遍歴し、新しい配列に入れる。concat降维
MDNでのコンサートの紹介
「concat creates a new array consisting of the elements in the object on which it is caled,followed in order by,for each argment,the element of that argment(if the argment is an array)or the argment the argment the argment selgment the
cat
concat法のパラメータが要素である場合、要素は直接に新しい配列に挿入されます。パラメータが行列の場合、配列の各要素は新しい配列に挿入されます。この特性をコードに適用します。
let children = [1, 2, 3, [4, 5, 6], 7, 8, [9, 10]];
function simpleNormalizeChildren(children) {
let reduce = [];
for (let i = 0; i < children.length; i++) {
reduce = reduce.concat(children[i]);
}
return reduce;
}
simpleNormalizeChildren(children) // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
チルドレンの要素が配列であれば、concat法のパラメータとして配列の各サブ要素が独立して新しい配列に挿入されます。concat法を利用して、二重循環を単重循環に簡略化します。applyとconcatの降维
MDNでのappy方法の紹介
「The appy()method cars a function with a given this value and argmens provided as an array.」
appy
applyメソッドは、関数を呼び出すことができます。applyメソッドの最初のパラメータは、呼び出された関数のthis値として、applyメソッドの2番目のパラメータ(1つの配列、またはクラスの配列のオブジェクト)は、呼び出されたオブジェクトのargments値として、つまり、配列の各要素は、順次、呼び出された関数の各パラメータとなります。この特性をコードに適用します。
let children = [1, 2, 3, [4, 5, 6], 7, 8, [9, 10]];
function simpleNormalizeChildren(children) {
return Array.prototype.concat.apply([], children);
}
simpleNormalizeChildren(children) // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
childrenは、appy方法の第二のパラメータとして、自身は配列であり、配列の各要素(または配列、すなわち二次元配列の第二次元)がパラメータとしてconcatに順次入ってきます。効果は[].concat(1,2,3,[4,5,6],7,8,10]に相当します。apply方法を利用して、単重循環を一行のコードに最適化します。Vue 2.6.11バージョンのソースコードを维护します。
let children = [1, 2, 3, [4, 5, 6], 7, 8, [9, 10]];
// :any Vue Flow
function simpleNormalizeChildren(children: any) {
for (let i = 0; i < children.length; i++) {
if (Array.isArray(children[i])) {
return Array.prototype.concat.apply([], children);
}
}
return children;
}
simpleNormalizeChildren(children); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
多次元配列は1次元配列に減少しました。再帰的降下次元
再帰関数とは、関数の中で自分を呼び出すことです。
再帰関数の使用は、関数終了条件がデッドサイクルを回避することに注意しなければならない。
//
let children = [1, [2,3], [4, [5, 6, [7, 8]]], [9, 10]];
function simpleNormalizeChildren(children) {
for (let i = 0; i < children.length; i++) {
if (Array.isArray(children[i])) {
children = Array.prototype.concat.apply([], children);
for(let j =0; j<children.length; j++) {
simpleNormalizeChildren(children)
}
}
}
return children;
}
simpleNormalizeChildren(children); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
ここでは、JS配列の劣化について、Aray.prototype.apple.arrの記事を紹介します。JS配列の劣化については、以前の記事を検索したり、下記の関連記事を見たりしてください。これからもよろしくお願いします。