如何在 JavaScript 中從另一個數組中過濾掉所有元素?
本文我們將介紹如何在 JavaScript 中從另一個數組中過濾掉所有元素。在深入講解之前,讓我們快速回顧一下 JavaScript 中的陣列。
陣列用於在一個變數中儲存多個值。與只能儲存一個值的變數相比,陣列的每個元素都有一個關聯的數字,稱為數值索引,可以透過它來訪問元素。JavaScript 中的陣列從索引零開始,並且可以使用多種方法進行修改。
為了從另一個數組中過濾陣列元素,可以使用 `filter()` 方法。讓我們深入文章,瞭解更多關於如何從另一個數組中過濾陣列元素。
JavaScript 中的 filter()
`filter()` 方法建立一個包含透過函式提供的測試的所有元素的新陣列。對於空元素,`filter()` 方法不會執行該函式。`filter()` 方法不會改變原始陣列。
語法
以下是 `filter()` 的語法:
array.filter(function(currentValue, index, arr), thisValue)
讓我們看下面的例子,來了解如何在 JavaScript 中從另一個數組中過濾陣列元素。
示例
在下面的示例中,我們執行指令碼從所有元素中過濾陣列。
<!DOCTYPE html>
<html>
<body>
<script>
var array1 = [0,7,8,6],
array2 = [6,8],
result = array1.filter(item => !array2.includes(item));
document.write(result);
</script>
</body>
</html>
指令碼執行後,會在網頁瀏覽器上輸出一個更新後的陣列,該陣列是由上述指令碼中提供的兩個陣列過濾後生成的,並在網頁瀏覽器上顯示其餘的陣列元素。
示例
考慮下面的例子,我們使用 filter,並且對於 filter 我們使用 reduce。
<!DOCTYPE html>
<html>
<body>
<script>
var a1 = [3, 0, 6, 8,9],
a2 = [8, 0,6];
var filtered = a1.filter(function(x) {
return !a2.reduce(function(y, z) {
return x == y || x == z || y == true;
})
});
document.write(filtered);
</script>
</body>
</html>
執行上述指令碼後,網頁瀏覽器會顯示在觸發指令碼執行的事件中出現的陣列元素,該事件比較提供的兩個陣列,然後進行過濾;對於過濾,我們使用了 reduce 並顯示了元素。
示例
讓我們來看另一個例子,在這個例子中我們使用 `fill()` 方法。
<!DOCTYPE html>
<html>
<body>
<p id="tutorial"></p>
<script>
var array1= [1,2,3,4,5];
var array2=[2,4,5,4]
function fill(value){
return value !=array2[0] && value != array2[1]
}
document.getElementById("tutorial").innerHTML= array1.filter(fill)
</script>
</body>
</html>
指令碼執行後,會在網頁瀏覽器上輸出一個數組,該陣列是由指令碼中提到的兩個陣列過濾後,透過執行指令碼觸發的事件在網頁瀏覽器上生成的。
示例
執行以下程式碼,觀察會發生什麼。
<!DOCTYPE html>
<html>
<body>
<script>
var result = [100,110,150,180,190,175].filter(
function(obj) {
return this.indexOf(obj) < 0;
},
[100,150,175]
);
document.write("After filter, the result is=");
document.write(result);
</script>
</body>
</html>
執行上述指令碼後,事件被觸發並在網頁瀏覽器上顯示一個數組以及一些文字。顯示的陣列元素是透過過濾上述指令碼中提到的兩個陣列獲得的。
資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP