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