過濾並包含在數組中，這是如何工作的？

Question

我試圖了解 filter() 和 includes() 如何在 javascript 中處理數組，但英語不是我的母語，所以如果有人能像我 5 歲一樣向我解釋下面的示例，我將不勝感激：

 const removeFromArray = function(...num) { let array = num[0]; return array.filter(val => !num.includes(val)) };

此函數接受一個數組和其他一些參數，然后從該數組中刪除其他參數，例如 removeFromArray([1, 2, 3, 4], 3) 應該刪除 3 並返回 [1,2,4]

這部分是如何工作的？

 return array.filter(val => !num.includes(val))

為什么使用感嘆號以及這兩種方法如何協同工作？

Answer 1

我認為理解發生了什么的關鍵是函數的參數num 。 該代碼使用了一個我以前沒有遇到過的好技巧。 所以， num是：

[[1, 2, 3, 4], 3];

具有兩個元素的一維數組： [1, 2, 3, 4]在索引0處， 3在索引1處。 因此：

num.includes([1, 2, 3, 4]) // is true
num.includes(3) // is true
num.includes(anything-else) // is false

Array#includes方法確定數組是否在其條目中包含某個值，並根據需要返回 true 或 false。

在最簡單的形式中，只要布爾表達式帶有前綴! ，表達式的結果被negated 。 例如：

!num.includes(3) // becomes false

Array#filter方法創建一個新數組，其中包含通過所提供函數實現的測試的所有元素。

通過測試僅意味着返回 true 。

現在我們准備好查看num[0].filter(val => !num.includes(val)) 。 或者：

[1, 2, 3, 4].filter(val => !num.includes(val))

請記住，只有3和[1, 2, 3, 4]返回true ：

num.includes(val)

因此，在num[0]或[1, 2, 3, 4]的所有元素中，只有 3 向否定表達式返回false ：

!num.includes(val)

1, 2,和4返回true或!false ，這意味着它們通過了測試，因此將由函數返回：

[1, 2, 4];

請注意val => !num.includes(val)是一種簡寫方式：

function( val ) {
    return !num.includes(val);
}

 const removeFromArray = function(...num) { let array = num[0]; return array.filter(val => !num.includes(val)) }; console.log( removeFromArray([1, 2, 3, 4], 3) );

Answer 2

休息參數不應該這樣使用，它應該只用於類似的值。 因此，應該單獨接受數組，並且只有要刪除的數字才應該使用 rest 接受（請參閱下面的代碼段）。

includes()方法確定數組是否在其條目中包含某個值，並根據需要返回 true 或 false。

因此，我們只需過濾掉itemsToRemove數組中不存在的數字。

 const removeFromArray = (array, ...itemsToRemove) => array.filter((item) => !itemsToRemove.includes(item)); removeFromArray([1, 2, 3, 4], 3, 2);

Answer 3

! 意思是“不”。 如果something是虛假的（null、0、false、空字符串），則!something返回true 。 這導致了一個看起來很奇怪的“作弊代碼”，您可以在其中將任何值轉換為布爾值（即，真值到true ，假到false ）通過!!value 。 一個感嘆號將其轉換為布爾值，如果value為假則為true ，然后第二個感嘆號將true更改為false （或false更改為true ）！

array.prototype.filter 要求針對每個元素評估一個函數，並返回一個僅包含所提供函數返回真值的元素的數組。

可能更容易想到以下與您的代碼幾乎等效的代碼...

 const removeFromArray = function(array, ...valsToRemove) { const isValToKeep = val => array.includes(val) === false; return array.filter(isValToKeep) };

除了更長之外，這段代碼的唯一區別是不會在第一個參數中查找第一個參數。 考慮

const a1 = [1,2,3];
a1.push(a1); // appends itself as its last element

在您的版本中， removeFromArray(a1, 2)將返回[1, 3] ，但我沒有將第一個參數作為要從第一個參數中查找和刪除的元素之一，這可能是大多數人所期望的並且性能更高，但在返回[1, 3, a1]的示例中肯定會產生不同的效果，即[1, 3, [1, 2, 3, [1, 2, 3, [1, 2, 3, [1, 2, 3, [1, 2, 3, [1, 2, 3, [...]]]]]]]]

Answer 4

這是一個簡單的表格來解釋如何使用過濾器

function isBigEnough(value) {
  return value >= 10;
}

var filtered = [12, 5, 8, 130, 44].filter(isBigEnough);

// result is [12, 130, 44]

這個例子來自： https ://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Array/filter

Answer 5

讓我們從重寫這一行開始：

前

return array.filter(val => !num.includes(val))

后

const callback = val => {
return !num.includes(val)
}

const filteredArray = array.filter(callback);
return filteredArray

現在讓我們打破並解釋一下這個語句的部分內容：

1. ! num.includes(val)

此處includes方法將檢查 num 中是否包含val 。 如果 num 有 val，它將返回 true，否則將返回 false。 注意! 在該行的開頭，這會將包含返回的值更改為相反的值，例如，如果返回的值為 false，則將其更改為 true，如果返回的值為 true，則將其更改為 false。

2. array.filter(callback)

此處的filter方法將遍歷數組的每個元素，並在每個元素處根據回調返回的內容詢問是否將該元素添加到filteredArray數組中。 如果回調返回 true(truthy)，它將添加它，否則它不會添加它。 回調應該只返回 true(truthy) 或 false(falsy)。

示例：在數組的索引 0 處， filter將詢問回調是否返回 true，如果它返回 true，則索引 0 處的元素將被添加到過濾后的數組中。 它將對其余元素執行相同的操作。

他們如何協同工作：

array有 [1,2,3,4] 所以array.filter(callback)將遍歷每個元素並在每個元素上調用回調。 根據您的函數num有這個[[1,2,3,4],3]所以當數組中的 val 為 3 時!num.includes(val)將返回 true 但是這個! 將其更改為 false 作為結果回調將返回 false 並且 3 不會包含在最終數組filteredArray中。

希望5歲的孩子能理解這個解釋。 您現在可以像這樣重寫您的函數：

const removeFromArray = (array, ...numbersToRemove) => array.filter((number) => !numsToRemove.includes(number));