JavaScript の 2つの配列の違い

要素が配列に属しているかどうかを判断するために使用される .includes 配列エンティティメソッドを紹介します。これを使用して、最初の配列のどの要素が 2 番目の配列にも含まれているかを取得します。

.filter メソッド内の condition() 関数内で使用します。このコールバック関数は、矢印関数またはコールバック関数としての共通関数のいずれかです。

.filter を文字通り使用して、条件に基づいて配列要素をフィルタリングできます。コールバック関数は、.filter が返される配列に追加する要素と追加しない要素を指示します。

JavaScript の 2つの配列の違い

.include は Array エンティティのメソッドです。パラメータとして渡された要素がメソッドが呼び出される配列に含まれている場合は true を返し、要素が含まれていない場合は false を返します。簡単な例として：

// Input
let array = ['a', 'b', 'c', 'd'];
console.log(array.includes('a'))

出力：

// Output
true

また、要素が配列に属していない場合は、次のようになります。

// Input
let array = ['a', 'b', 'c', 'd'];
console.log(array.includes('z'))

出力：

// Output
false

このメソッドは、2つのパラメーターのみを受け取ることができます。複数を渡すと、パラメーターとして渡された要素のセットに間違った値が返される可能性があります。上記のように、最初のパラメーターは要素です。2つ目は、インデックスまたはオプションの fromIndex です。

fromIndex は、.includes が要素を検索するインデックスです。以下の例を見てみましょう。

// Input
let array = [1, 2, 3, 4, 5];
console.log(array.includes(3, 3))

値 3 はインデックス array[2] にあるため、配列がインデックス array[3] から最後まで 3 に等しい要素を持っていることは false です。

// Output
false

ここで、.filter メソッドの場合、これは配列エンティティのメソッドでもあり、このメソッドは、その中の condition() 関数によって提供される条件によってフィルター処理された新しい配列を返します。新しい配列を返すということは、メソッドが呼び出された元の配列が不変のままであることを意味します。

また、この condition() 関数はコールバック関数です。コールバック関数は、外部関数と呼ばれる別の関数またはメソッドにパラメーターとして渡されます。

外部関数は、コールバック関数を呼び出して何かを実行します。.filter メソッドの場合、条件コールバック関数を呼び出して、この条件に基づいて配列をフィルタリングします。

.filter メソッドは、配列内の各要素のコールバック関数を呼び出します。したがって、.filter には array.length の反復があり、最終的には、コールバック関数が true と同等の値を返す反復回数に等しいいくつかの要素を持つ新しい配列を返します。

たとえば、サイズが 3 に等しいすべての要素が必要な場合は、以下のように .filter を使用できます。

// Input
let array = ['one', 'two', 'three', 'four', 'five']
array = array.filter(element => element.length == 3)
console.log(array)

この場合、パラメータとして element を受け取り、この element のサイズが 3 に等しい場合は、true を返し、そうでない場合は false を返します。したがって、.filter メソッドは、条件が true になる要素を追加します。

// Output
[ 'one', 'two' ]

予想どおり、.filter メソッドは element.length == 3 条件に基づいて配列を返しました。サイズが 3 に等しい配列の各値が、返された配列に追加されました。

しかし、2つのアレイの違いを知りたいので、これをすべてまとめることが可能になります。

違いを取得したい配列で .filter メソッドを使用し、その中で、条件として .include を使用して、.filter が呼び出されている配列上の要素かどうかを確認します。2 番目の要素に含まれています。この例を見てみましょう：

// Input
let array1 = ['a', 'b', 'c', 'd', 'e'];
let array2 = ['a', 'b', 'c'];
console.log(array1.filter(element => array2.includes(element)))

出力：

// Output
[ 'a', 'b', 'c' ]

さて、出力は 2つの配列の違いではなく、それらの共通部分であることがわかります。条件 array2.includes(element) は、element が 2 番目の配列に含まれているかどうかを比較し、true の場合、.filter はこの要素を結果の配列に追加します。

しかし、論理的な否定または!を置くと状態で？このように、.filter は 2 番目の配列に含まれていない要素のみを追加します。例を確認してください。

// Input
let array1 = ['a', 'b', 'c', 'd', 'e'];
let array2 = ['a', 'b', 'c'];
console.log(array1.filter(element => !array2.includes(element)))

出力：

// Output
[ 'd', 'e' ]

最後に、2つのアレイの違いがあります。

プラスとして、交差点にないすべての要素を取得したい場合は、次のようにすることができます。

// Input
let array1 = ['a', 'b', 'c', 'd', 'e', 'f'];
let array2 = ['a', 'b', 'c', 'x', 'y', 'z'];
let array3 = array1.filter(element => !array2.includes(element))
                 .concat(array2.filter(element => !array1.includes(element)))
console.log(array3)

この例では、'a'、'b'、または'c'ではないすべての要素が必要なので、出力は次のようになります。

// Output
[ 'd', 'e', 'f', 'x', 'y', 'z' ]

そして最後に、Array エンティティのプロトタイプメソッドの 2つの配列の違いにソリューションを追加できます。.prototype は、カスタムプロパティとメソッドをエンティティに追加できるようにする Array エンティティのプロパティです。

Array エンティティに対して .difference メソッドを作成するには、次の構造を使用できます。

// Input
// Declaring the prototype .difference method
Array.prototype.difference = function(array2) {
  return this.filter(element => !array2.includes(element))
} let array1 = ['a', 'b', 'c', 'd', 'e'];
console.log(array1.difference(['a', 'b', 'c']))

出力：

// Output
[ 'd', 'e' ]

このようにして、ロジックを毎回書き直す代わりに、必要なたびに .difference を使用できます。