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

導入の前に質問させてください: 複数の配列を 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 は他のタイプの値をパラメーターとして受け入れることもできます。これらは新しい要素として配列の末尾に追加されます。

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];

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

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

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

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

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

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

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

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

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

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

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

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

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]]]

上記のコードでは、単一の要素から、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.apply([],[[1],[2],[3]])); //[1, 2, 3]

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

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]]]

概要:

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

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

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

var flatten = function (array){
 return array.reduce(function(a,b){
 return a.concat(b);
 },[])
}

apply メソッドがわからない場合は、この記事を参照してください: call、apply、bind の詳細な説明と概要Javascript のメソッド