Set 方法
利用 Set 数据结构可以更简洁和高效地实现数组去重，因为 Set 会自动过滤重复元素
let myArray = [1, 2, 3, 4, 5, 1, 2, 3, 4, 5, 8, 8, 8]
function setFunction(arr) {
return [...new Set(arr)]
}
let setArray = setFunction(myArray )
console.log(setArray ); // 1,2,3,4,5,8
filter 方法
利用 filter 方法结合 indexOf 方法来实现数组去重，只保留第一次出现的元素。
function filterFunction(arr) {
return arr.filter((item, index) => arr.indexOf(item) === index)
}
let myArray = [1, 2, 3, 4, 5, 1, 2, 3, 4, 5, 8, 8, 8]
let filterArray = filterFunction(myArray)
console.log(filterArray ); // 1,2,3,4,5,8
reduce 方法
使用 reduce 方法可以按顺序逐个遍历数组，并根据条件去重。
这种方法相对灵活，但性能和 filter 方法类似，适合中小型数组。
function reduceFunction(arr) {
return arr.reduce((prev, cur) => (prev.includes(cur) ? prev : [...prev, cur]), [])
}
let myArray = [1, 2, 3, 4, 5, 1, 2, 3, 4, 5, 8, 8, 8]
let reduceArray = reduceFunction(reduceFunction)
console.log(reduceArray); // 1,2,3,4,5,8
for循环和includes
function forOrIncludesFunction(arr) {
let newArr = []
for (let i = 0; i < arr.length; i++) {
if (!newArr.includes(arr[i])) {
newArr.push(arr[i])
}
}
return newArr
}
let myArray = [1, 2, 3, 4, 5, 1, 2, 3, 4, 5, 8, 8, 8]
let includesArray = forOrIncludesFunction(myArray)
console.log(includesArray ); // 1,2,3,4,5,8
map 方法
map 方法结合 indexOf 函数和 filter 方法来去除重复元素。
函数返回一个新数组，其中包含了原始数组中唯一的元素。
function mapFunction(arr) {
return arr.map((item, index) => (arr.indexOf(item) === index ? item : null)).filter(item => item !== null)
}
let myArray = [1, 2, 3, 4, 5, 1, 2, 3, 4, 5, 8, 8, 8]
let mapArray = mapFunction(myArray)
console.log(mapArray ); // 1,2,3,4,5,8
利用 Map 数据结构可以实现数组去重，将数组元素作为键存储在Map中，然后获取Map的键数组即可。
let myArray = [1, 2, 3, 4, 5, 1, 2, 3, 4, 5, 8, 8, 8]
let mapArray= Array.from(new Map(myArray.map(item => [item, item])).values());
console.log(mapArray); // 1,2,3,4,5,8
这种方法相对复杂，但也是一种去重的有效方法，适合特定场景下的需求。
------------------------------------------------------------------------------------------------简单的dome 例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
/* 让整个页面内容居中显示 */
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh; /* 让页面铺满整个视口高度 */
margin: 0;
}
/* 盒子内 flex 布局 */
.container {
width: 500px;
height: 500px;
background-color: skyblue;
display: flex;
justify-content: center;
justify-content: space-evenly;
align-items: center;
flex-direction: column;
}
</style>
</head>
<body>
<div class="container">
<section id="set"></section>
<section id="filter"></section>
<section id="reduce"></section>
<section id="forOrIncludes"></section>
<section id="map"></section>
</div>
</body>
<script>
// 获取<div>元素
// let setDiv = document.getElementById('set')
let myArray = [1, 2, 3, 4, 5, 1, 2, 3, 4, 5, 8, 8, 8]
// set 方法
function setFunction(arr) {
return [...new Set(arr)]
}
// 代码重复性高 例子：
// const setArray = setFunction(myArray)
// 元素的内容为动态内容
// setDiv.innerHTML = '<div>set 方法：' + setArray + '</div>' // 可以这样绑定展示内容，但是不推荐
// filter 方法
// indexOf() 可返回某个指定的字符串值在字符串中首次出现的位置。如果没有检测到指定字符串，则返回-1
function filterFunction(arr) {
return arr.filter((item, index) => arr.indexOf(item) === index)
}
// reduce 方法
function reduceFunction(arr) {
return arr.reduce((prev, cur) => (prev.includes(cur) ? prev : [...prev, cur]), [])
}
// for循环和includes 方法 includes存在该值返回ture，反之false
function forOrIncludesFunction(arr) {
let newArr = []
for (let i = 0; i < arr.length; i++) {
if (!newArr.includes(arr[i])) {
newArr.push(arr[i])
}
}
return newArr
}
// map 方法
function mapFunction(arr) {
return arr.map((item, index) => (arr.indexOf(item) === index ? item : null)).filter(item => item !== null)
}
// 获取输出的元素，统一处理展示，简洁易维护
document.getElementById('set').innerHTML = `<div>set 方法：${setFunction(myArray)}</div>`
document.getElementById('filter').innerHTML = `<div>filter 方法：${filterFunction(myArray)}</div>`
document.getElementById('reduce').innerHTML = `<div>reduce 方法：${reduceFunction(myArray)}</div>`
document.getElementById('forOrIncludes').innerHTML = `<div>for循环和includes 方法：${forOrIncludesFunction(myArray)}</div>`
document.getElementById('map').innerHTML = `<div>map 方法：${mapFunction(myArray)}</div>`
</script>
</html>
比较常用的数组去重处理方法，纯属记录一下，如有错误，请不吝赐教
