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,而不是每次都重寫邏輯。