JavaScript の concat メソッドについての深い理解

最近jsの知識を勉強していると、jsの強力な構文にいつも衝撃を受けます。フロントエンドを軽視していたために、いくつかの誤解が生じました。したがって、私は過去の失敗を改め、何事にもひたむきな精神を持って取り組むことを決意しました。

導入の前に質問させてください: 複数の配列を 1 つの配列にマージするにはどうすればよいですか?

以下の共有は次のセクションに分かれています:

1. concat メソッドの基本的な概要

2. 例から concat メソッドを体験する

1. concat メソッドの基本的な概要

concat メソッドが使用されます。複数の配列をマージします。新しい配列のメンバーを元の配列の末尾に追加し、元の配列を変更せずに新しい配列を返します。

console.log([].concat([1],[2],[3])); // [1, 2, 3] 
console.log([].concat([[1],[2],[3]])); // [[1], [2], [3]] 
console.log([].concat(4,[[5,6],[7]])); // [4, [5, 6], [7]]

上記のコードでは、最初の戻り値は、空の配列と 3 つの配列 [1]、[2]、[3] を 1 つの配列にマージすることです。つまり、[1, 2, 3]。 2 番目の方法は、空の配列を 2 次元配列とマージすることです。2 次元配列のメンバーは [1]、[2]、[3] なので、[[1], [2], [3]] の場合、返されるのは 2 次元配列であることに注意してください。 3番目の例も同様です。ここでの概念、つまり、新しい配列のメンバーを元の配列の末尾に追加するという概念を理解することが重要です。

配列をパラメーターとして受け入れることに加えて、concat は他のタイプの値をパラメーターとして受け入れることもできます。これらは新しい要素として配列の末尾に追加されます。

rreee

ここでは内容は少ないですが、非常に簡単そうです。しかし、実際には理解するのは簡単ではありません。

2. concat メソッドを例から体験してみます

基礎知識を話した後、私が最近遭遇した問題を紹介します。元の質問はこれです。

例を見れば、それが何を意味するか理解できます。

この質問に対する解決策の 1 つは次のとおりです:

console.log([].concat(1,2,3)); //[1,2,3]; 
//等同于 
onsole.log([].concat(1,[2,3])); //[1,2,3]; 
console.log([].concat([1],[2,3])); //[1,2,3];

この単純な関数は、配列内の要素を結合する関数を実現できます。しかし、この戻り値を理解しているときに問題が発生しました。

質問: apply メソッドを使用する場合と使用しない場合に違いがあるのはなぜですか?

var flatten = function (arr){  
return [].concat.apply([],arr); 
};

上記のコードでは、空の配列の末尾にも新しい配列が追加され、最初に返される配列は [1,2,3] です。 2 番目は 2 次元配列です。

しばらく悩んだ後、ようやく違いの理由が分かりました。

まず、空の配列でインスタンス メソッド concat を呼び出すとき、concat のパラメーターを渡し、配列の最後にプッシュします。

console.log([].concat.apply([],[[1],[2],[3]])); //[1, 2, 3] 
console.log([].concat([[1],[2],[3]])); //[[1], [2], [3]]

上記のコードでは、単一の要素から、1次元配列、2次元配列、3次元配列へと徐々に変化していきます。

JavaScriptのcall、apply、bindメソッドの詳細な説明と概要は、記事で説明されています。 apply メソッドは call メソッドと似ており、関数内の this ポインター (関数が実行されるスコープ) を変更し、指定されたスコープで関数を呼び出します。この関数もすぐに実行されます。唯一の違いは、関数の実行時に配列をパラメーターとして受け取ることです。

apply メソッドの最初のパラメータは、this が指すオブジェクトでもあり、null または unknown または this に設定されている場合、グローバル オブジェクトを指定するのと同じです。 2 番目のパラメーターは配列であり、配列のすべてのメンバーが順番にパラメーターとして使用され、呼び出し時に元の関数に渡されます。元の関数のパラメータはcallメソッドでは一つずつ追加する必要がありますが、applyメソッドでは配列形式で追加する必要があります。

console.log([].concat(1,2,3)); //[1, 2, 3] 
console.log([].concat([1],[2],[3])); //[1, 2, 3] 
console.log([].concat([[1],[2],[3]])); //[[1], [2], [3]] 
console.log([].concat([[[1],[2],[3]]])); // [[[1], [2], [3]]]

上記のコードでは、前半で concat メソッドを直接使用して、受信パラメータを空の配列にマージしています。後半では、 String オブジェクトのインスタンス メソッド apply が呼び出され、 concat() 関数内で [] を指し、 concat の呼び出しに必要なパラメーターが配列として渡されます。さらにいくつかの例を見てみましょう。

console.log([].concat([1],[2],[3])); //[1, 2, 3] 
console.log([].concat([[1],[2],[3]])); //[[1], [2], [3]] 
console.log([].concat.apply([],[[1],[2],[3]])); //[1, 2, 3]

概要:

1. concat メソッドを単独で使用する場合、新しい配列のメンバーは元の配列の末尾に追加され、他の型の場合は元の配列を変更せずに新しい配列が返されます。の値が渡されると、それらは新しい要素として配列の末尾に追加されます。

2. 配列要素を結合する方法:

console.log([].concat([1,2,3])); //[1, 2, 3] 
console.log([].concat.apply([],[[1],[2],[3]]));//[1, 2, 3] 
console.log([].concat([[1],[2],[3]]));//[[1], [2], [3]] 
console.log([].concat.apply([],[[[1],[2],[3]]]));//[[1], [2], [3]] 
console.log([].concat([[[1],[2],[3]]]));//[[[[1], [2], [3]]]] 
console.log([].concat.apply([],[[[[1],[2],[3]]]]));//[[[1], [2], [3]]]

以上がこの記事の内容です

この記事の内容が皆様の勉強や仕事のお役に立てれば幸いです。