資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法學如何在JavaScript中刪除陣列中的重複元素？
在Javascript中刪除陣列中的重複元素可以透過多種方法實現。本文將介紹六種不同的方法，可在各種情況下根據需要使用。
在本文中，我們有一個Javascript陣列，我們的任務是從JavaScript中的陣列中刪除重複元素。
從陣列中刪除重複元素的方法
以下是本文將討論的從JavaScript陣列中刪除重複元素的方法列表，其中包含分步說明和完整的示例程式碼。
- 使用Set()方法
- 使用filter()方法
- 使用reduce()和includes()方法
- 使用forEach()和includes()方法
- 使用Underscore.js _.uniq()方法
- 使用Lodash _.uniq()方法
使用Set()方法
為了從JavaScript陣列中刪除重複元素，我們使用了set()方法。集合是唯一值的集合，只包含唯一值。
- 我們使用了兩個div元素來顯示給定的陣列和結果。我們還使用了一個button，點選該按鈕會觸發**unique()**函式。
- 我們使用了getElementById()方法來獲取div和innerHTML來顯示陣列和結果。
- 我們使用了**new Set(arr)**將陣列**arr**轉換為集合。由於集合只包含唯一值，因此它會刪除任何重複值。
- 然後，我們使用擴充套件運算子(...)將集合轉換為包含唯一值的陣列，並將其儲存在newArray中。
示例
這是一個完整的示例程式碼，它實現了上述步驟，使用**set()**方法從JavaScript陣列中刪除重複元素。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<h2>
Removing Duplicate Elements From an Array in JavaScript
</h2>
<p>
In this example we have used <strong>set()</strong>
method to remove duplicate elements from an array in
JavaScript.
</p>
<hr>
<div id="array"></div>
<br>
<button onclick="unique()">Unique array</button>
<br><br>
<div id="result"></div>
<script>
var arr = ["steve", "mark", "mark", "bill", "steve", "Zoro"];
document.getElementById("array")
.innerHTML = "Initial array: " + arr;
function unique() {
let newArray = [...new Set(arr)];
document.getElementById("result")
.innerHTML = "Unique array: " + newArray;
}
</script>
</body>
</html>
使用filter()方法
在這種從JavaScript陣列中刪除重複元素的方法中，我們使用了filter()方法和indexOf()方法。
- 我們使用了**arr.filter()**方法，該方法從原始陣列**arr**建立一個新陣列**newArray**。
- filter方法將滿足條件**arr.indexOf(item) === index**的元素包含在newArray中。
- 這裡，**item**表示正在處理的當前元素，**index**表示當前元素的索引。
- **indexOf(item)**方法返回item在陣列中第一次出現的索引。如果它與條件**arr.indexOf(item) === index**匹配，即如果任何元素的第一次出現的索引與其索引相同，這意味著該索引是陣列中的第一次出現，並將包含在**newArr**中。
- 如果任何元素不滿足條件**arr.indexOf(item) === index**，則該元素是重複元素，不包含在newArray中。
示例
這是一個完整的示例程式碼，它實現了上述步驟，使用**filter()**方法從JavaScript陣列中刪除重複元素。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<h2>
Removing Duplicate Elements From an Array in JavaScript
</h2>
<p>
In this example we have used <strong>filter()</strong>
method to remove duplicate elements from an array in
JavaScript.
</p>
<hr>
<div id="array"></div>
<br>
<button onclick="unique()">Unique array</button>
<br><br>
<div id="result"></div>
<script>
var arr = ["steve", "mark", "mark", "bill", "steve", "Zoro"];
document.getElementById("array")
.innerHTML = "Initial array: " + arr;
function unique() {
let newArray = arr.filter((item, index) =>
arr.indexOf(item) === index);
document.getElementById("result")
.innerHTML = "Unique array: " + newArray;
}
</script>
</body>
</html>
使用reduce()和includes()方法
在這種方法中，我們使用了reduce()方法和includes()方法來從JavaScript陣列中刪除重複元素。reduce()方法對陣列的每個元素執行一個reducer函式。
- 我們使用了一個reducer函式，其引數為**acc**和**curr**。**acc**表示初始值或先前返回的值，**curr**表示正在處理的當前元素。
- 然後，我們使用if/else條件語句和**includes()**方法，該方法檢查**curr**元素是否已存在於**acc**陣列中。
- 如果**curr**元素不存在於**acc**陣列中，則使用push()方法將curr元素推入acc陣列。這使得只有唯一元素才能新增到陣列中。
- 最後，將更新後的acc返回以進行下一次迭代。
示例
這是一個完整的示例程式碼，它實現了上述步驟，使用**reduce()**和**includes()**方法從JavaScript陣列中刪除重複元素。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<h2>
Removing Duplicate Elements From an Array in JavaScript
</h2>
<p>
In this example we have used <strong>reduce()</strong>
with <strong>includes()</strong> method to remove
duplicate elements from an array in JavaScript.
</p>
<hr>
<div id="array"></div>
<br>
<button onclick="unique()">Unique array</button>
<br><br>
<div id="result"></div>
<script>
var arr = ["steve", "mark", "mark", "bill", "steve", "Zoro"];
document.getElementById("array")
.innerHTML = "Initial array: " + arr;
function unique() {
var newArray = arr.reduce(function (acc, curr) {
if (!acc.includes(curr))
acc.push(curr);
return acc;
}, []);
document.getElementById("result")
.innerHTML = "Unique array: " + newArray;
}
</script>
</body>
</html>
使用forEach()和includes()方法
在這種方法中，我們使用了forEach()方法和**includes()**方法來從JavaScript陣列中刪除重複元素。
- 我們初始化了一個新的空陣列**newArray**。然後，我們使用forEach()方法迭代原始陣列**arr**中的元素。
- **newArray.includes(c)**如果c（當前元素）已存在於**newArray**中，則返回true。
- 然後，我們使用if/else條件語句，如果c（當前元素）不存在於newArray中，則將其推入陣列。因此，只有唯一值被推入newArray。
示例
這是一個完整的示例程式碼，它實現了上述步驟，使用**forEach()**和**includes()**方法從JavaScript陣列中刪除重複元素。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<h2>
Removing Duplicate Elements From an Array in JavaScript
</h2>
<p>
In this example we have used <strong>forEach()</strong>
with <strong>includes()</strong> method to remove
duplicate elements from an array in JavaScript.
</p>
<hr>
<div id="array"></div>
<br>
<button onclick="unique()">Unique array</button>
<br><br>
<div id="result"></div>
<script>
var arr = ["steve", "mark", "mark", "bill", "steve", "Zoro"];
document.getElementById("array")
.innerHTML = "Initial array: " + arr;
function unique() {
let newArray = [];
arr.forEach((c) => {
if (!newArray.includes(c)) {
newArray.push(c);
}
});
document.getElementById("result")
.innerHTML = "Unique array: " + newArray;
}
</script>
</body>
</html>
使用Underscore.js _.uniq()方法
在這種從JavaScript陣列中刪除重複元素的方法中，我們使用了_.uniq()方法，該方法屬於Underscore.js庫。
- 我們在head部分使用了script標籤來包含Underscore.js庫，這允許我們使用它的函式，例如._uniq()方法。
- 我們使用了**_.uniq()**方法，該方法從陣列（此處為arr）返回唯一值的陣列。
- 這裡，唯一值的陣列儲存在**newArray**中。
示例
這是一個完整的示例程式碼，它實現了上述步驟，使用**Underscore.js _.uniq()**方法從JavaScript陣列中刪除重複元素。
<!DOCTYPE html>
<html lang="en">
<head>
<title>
Removing element from Array in Javascript
</title>
<script src="https://unpkg.com/underscore@1.13.6/underscore-min.js"></script>
</head>
<body>
<h2>
Removing element from Array in Javascript
</h2>
<p>
In this example, we have used <strong>Underscore.js _.uniq()
</strong> method for removing an element from an Array
Javascript.
</p>
<hr>
<div id="array"></div>
<br>
<button onclick="unique()">Unique array</button>
<br><br>
<div id="result"></div>
<script>
var arr = ["steve", "mark", "mark", "bill", "steve", "Zoro"];
document.getElementById("array")
.innerHTML = "Initial array: " + arr;
function unique() {
let newArray = _.uniq(arr);
document.getElementById("result")
.innerHTML = "Initial array: " + newArray;
}
</script>
</body>
</html>
使用Lodash _.uniq()方法
在這種方法中，我們使用了Lodash庫從JavaScript陣列中刪除重複元素。我們使用了_.uniq()方法，該方法屬於Lodash庫，用於從陣列中刪除重複元素。
- 我們在head部分使用了script標籤來包含來自內容交付網路 (CDN) 的Lodash庫，以新增Lodash的實用程式函式，這允許我們使用Lodash方法，例如**_.uniq()**。
- 我們使用了Lodash **_.uniq()**方法，該方法刪除陣列中的所有重複元素。
示例
這是一個完整的示例程式碼，它實現了上述步驟，使用**Lodash _.uniq()**方法從JavaScript陣列中刪除重複元素。
<!DOCTYPE html>
<html lang="en">
<head>
<title>
Removing element from Array in Javascript
</title>
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script>
</head>
<body>
<h2>
Removing element from Array in Javascript
</h2>
<p>
In this example, we have used <strong>Lodash _.uniq()
</strong> method for removing an element from an Array
Javascript.
</p>
<hr>
<div id="array"></div>
<br>
<button onclick="unique()">Unique array</button>
<br><br>
<div id="result"></div>
<script>
var arr = ["steve", "mark", "mark", "bill", "steve", "Zoro"];
document.getElementById("array")
.innerHTML = "Initial array: " + arr;
function unique() {
let newArray = _.uniq(arr);
document.getElementById("result")
.innerHTML = "Initial array: " + newArray;
}
</script>
</body>
</html>
結論
在本文中，我們瞭解瞭如何在JavaScript中刪除陣列中的重複元素。我們學習了六種不同的方法，其中一些是使用**set()**方法、**filter()**方法、使用**reduce()**和**includes()**方法、使用**forEach()**和**includes()**方法等等。在所有方法中，使用**set()**方法最常用，因為它不接受任何重複值。
更新於：2024年11月18日
2K+瀏覽量
廣告