JavaScript 中兩個陣列的區別

Pablo Felipe 2022年5月1日
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,而不是每次都重寫邏輯。

相關文章 - JavaScript Array