首頁 > web前端 > js教程 > 主體

如何從 JavaScript 陣列中刪除重複元素?

WBOY
發布: 2023-08-24 12:05:08
轉載
1369 人瀏覽過

如何从 JavaScript 数组中删除重复元素?

在 JavaScript 中,有多種方法可以從陣列中刪除重複元素。在本文中,我們將探討一些刪除重複元素的頂層方法。

使用filter()方法

filter()方法使用傳遞的條件來建立一個新的元素陣列。這將僅包含作為此過濾器方法的一部分傳回 true 的元素。因此,要實現刪除重複元素,我們只需在 filter() 方法中新增條件即可,它會完成剩下的工作。

#過濾器.js

<script>
   var arr = ["steve", "mark", "mark","bill", "steve", "
   function removeDuplicates(arr) {
      return arr.filter((item,index) => arr.indexOf(item) === index);
   console.log(removeDuplicates(arrr));
</script>
登入後複製

輸出

"steve", "mark", "bill"
登入後複製
登入後複製
登入後複製
登入後複製

使用Set() 方法

Set是唯一值的集合。為了從陣列中刪除元素,我們首先需要將重複陣列轉換為 Set#。

這個新 Set 將隱式刪除重複元素,然後將其轉換回集合到一個陣列。

#filter.js

<script>
   var arr = ["steve", "mark", "mark","bill", "steve", "bill"];

   function removeDuplicates(arr) {
      let uniqueArr = [...new Set(arr)];
      return uniqueArr;
   }
   console.log(removeDuplicates(arr));
</script>
登入後複製

輸出

"steve", "mark", "bill"
登入後複製
登入後複製
登入後複製
登入後複製

使用reduce()方法

reduce#()方法用於減少陣列的元素,然後將它們組合成一個基於使用者傳遞的某些減速器函數的最終數組。在下面的範例中,我們將使用 reduce() 方法從陣列中刪除或移除重複元素。

# filter.js

<script>
   var arr = ["steve", "mark", "mark","bill", "steve", "bill"];

   function removeDuplicates(arr) {
      var unique = arr.reduce(function (acc, curr) {
         if (!acc.includes(curr))
            acc.push(curr);
         return acc;
      }, []);
      return unique;
   }
   console.log(removeDuplicates(arr));
</script>
登入後複製

#
"steve", "mark", "bill"
登入後複製
登入後複製
登入後複製
登入後複製

使用forEach() 和include()

如果陣列中存在某個元素,include() 方法將傳回true,否則傳回false。在下面的範例中,我們使用 forEach() 迭代數組的元素,並僅當其中不存在相同元素時才將其新增至新數組。

#filter.js

<script>
   var arr = ["steve", "mark", "mark","bill", "steve", "bill"];

   function removeDuplicates(arr) {
      let uniqueArr = [];
      chars.forEach((c) => {
         if (!uniqueChars.includes(c)) {
            uniqueChars.push(c);
         }
      });
       return uniqueArr;
   }
   console.log(removeDuplicates(arr));
</script>
登入後複製

輸出

"steve", "mark", "bill"
登入後複製
登入後複製
登入後複製
登入後複製

以上是如何從 JavaScript 陣列中刪除重複元素?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:tutorialspoint.com
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!