JavaScript 中兩個陣列的區別

介紹用於確定元素是否屬於陣列的 .includes 陣列實體方法，我們將使用它來獲取第一個陣列的哪些元素也包含在第二個陣列中。

我們將在 .filter 方法的 condition() 函式中使用它。這個回撥函式既可以是箭頭函式，也可以是普通函式作為回撥函式。

.filter 可用於根據條件過濾陣列元素，回撥函式將指示 .filter 將新增或不新增到返回的陣列中的元素。

JavaScript 中兩個陣列的區別

.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

該方法只能接收兩個引數。如果你傳遞多個，它可能會向作為引數傳遞的元素集返回錯誤值。如上所見，第一個引數是元素；第二個是索引或 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)

在這種情況下，它接收一個元素作為引數，如果這個元素的大小等於 3，它返回 true，否則返回 false。因此，.filter 方法會新增條件結果為 true 的任何元素。

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

正如預期的那樣，.filter 方法返回了一個基於 element.length == 3 條件的陣列。大小等於 3 的陣列的每個值都被新增到返回的陣列中。

但是我們想要得到兩個陣列之間的差異，這將是可能的。

將在我們想要獲取差異的陣列上使用 .filter 方法，在其中，我們將使用 .include 作為條件，驗證陣列上的元素是否呼叫 .filter 包含在第二個元素中。讓我們看看這個例子：

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

好吧，看到輸出不是兩個陣列之間的差異，而是它們的交集。並不是說條件 array2.includes(element) 比較 element 是否包含在第二個陣列中，如果它是 true，.filter 會將這個元素新增到結果陣列中。

但是，如果我們輸入一個合乎邏輯的 not 或!在什麼情況下？這樣，.filter 將只新增不包含在第二個陣列中的元素。檢查示例：

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

輸出：

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

最後，我們有兩個陣列之間的區別。

另外，如果我們想獲取所有不在交集中的元素，我們可以執行以下操作。

// 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 實體的原型方法中的兩個陣列之間的差異。.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，而不是每次都重寫邏輯。