如何從陣列中刪除元素，直到傳遞的函數在 JavaScript 中傳回 true？-js教程-PHP中文網

如何從陣列中刪除元素，直到傳遞的函數在 JavaScript 中傳回 true？

PHPz

發布： 2023-08-24 16:37:02

轉載

755 人瀏覽過

如何从数组中删除元素，直到传递的函数在 JavaScript 中返回 true？

在 JavaScript 中，有多種方法可以從陣列中刪除元素，直到傳遞的函數傳回 true。在本教程中，我們將詳細介紹 3 個方法。

使用 Array.prototype.filter()

Array.prototype.filter() 方法可用來從陣列中刪除元素，直到傳遞的函數傳回 true。請參閱 Array filter() 方法以了解更多詳細資訊。

範例 1

以下程式碼展示如何使用此方法 -

<html>
<head>
   <title>Examples</title>
</head>
<body>
   <div id="array"></div>
   <div id="result"></div>
   <script>
      var arr = [1,2,3,4,5,6,7,8,9,10];
      function remove(item) {
         return item < 5;
      }
      var newArr = arr.filter(remove);
      document.getElementById("array").innerHTML = "Array: " + arr;
      document.getElementById("result").innerHTML = "Removed Elements: " + newArr;
   </script>
</body>
</html>

登入後複製

如您所見，我們建立了一個包含從 1 到 10 的數字的陣列。然後使用 filter() 方法刪除所有小於 5 的元素。最後，我們顯示了刪除元素的新陣列。

使用 for 迴圈

從陣列中刪除元素直到傳遞的函數傳回 true 的另一種方法是使用 for 迴圈。

< h2>範例2

以下程式碼展示如何使用此方法-

<!doctype html>
<html>
<head>
   <title>Examples</title>
</head>
<body>
   <div id="result"></div>
   <script>
      var arr = [1,2,3,4,5,6,7,8,9,10];
      var newArr = [];
      for(var i=0; i < arr.length; i++) {
         if(arr[i] < 5) {
            newArr.push(arr[i]);
         } else {
            break;
         }
      }
      document.getElementById("result").innerHTML = newArr
   </script>
</body>
</html>

登入後複製

#正如您所看到的，我們再次建立了一個包含從1 到10 的數字的數組。然後我們使用 for 迴圈來迭代數組中的每個元素。如果目前元素小於 5，我們將其新增至新數組。否則，我們就跳出了循環。最後，我們顯示了新數組。

使用 Array.prototype.slice()

從陣列中刪除元素直到傳遞的函數傳回 true 的另一種方法是使用 Array .prototype.slice() 方法。詳細請參考數組切片方法。

範例3

以下程式碼展示如何使用此方法-

<!doctype html>
<html>
<head>
   <title>Examples</title>
</head>
<body>
<div id="result"></div>
<script>
     var arr = [1,2,3,4,5,6,7,8,9,10];
     var newArr = arr.slice(0,5);
     document.getElementById("result").innerHTML = newArr
</script>
</body>
</html>

登入後複製

#正如您所看到的，我們再次建立了一個包含從1 到10 的數字的數組。然後我們使用 slice() 方法從陣列中提取前 5 個元素。最後，我們顯示了新的陣列。

以上是如何從陣列中刪除元素，直到傳遞的函數在 JavaScript 中傳回 true？的詳細內容。更多資訊請關注PHP中文網其他相關文章！