数组去重
1. 利用双重for
循环去重
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body></body>
<script>
let arr = [22, 17, 22, 44, 44, 66, 17, 66, 7];
let newArr = [arr[0]];
for (let i = 0; i < arr.length; i++) {
let flag = true;
for (let j = 0; j < newArr.length; j++) {
if (arr[i] == newArr[j]) {
flag = false;
break;
}
}
if (flag == true) {
newArr.push(arr[i]);
}
}
console.log(newArr);
</script>
</html>
2. 利用includes
去重
includes()
存在该值返回ture
,反之false
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body></body>
<script>
let arr = [22, 17, 22, 44, 44, 66, 17, 66, 7];
let newArr = [];
for (var i = 0; i < arr.length; i++) {
if (!newArr.includes(arr[i])) {
newArr.push(arr[i]);
}
}
console.log(newArr);
</script>
</html>
3. 利用数组的filter
方法去重
- 原理
filter()
使用指定的函数测试所有元素,并返回一个包含所有通过测试元素的新数组indexOf()
可返回某个指定的字符串值在字符串中首次出现的位置。如果没有检测到指定字符串,则返回-1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body></body>
<script>
let arr = [22, 17, 22, 44, 44, 66, 17, 66, 7];
let newArr = arr.filter((item, index) => {
return arr.indexOf(item) === index;
});
console.log(newArr);
</script>
</html>
4. 利用 ES6 中的Set
方法去重(最常用)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body></body>
<script>
let arr = [22, 17, 22, 44, 44, 66, 17, 66, 7];
let obj = new Set(arr);
console.log(obj);
let newArr = [...obj];
console.log(newArr);
</script>
</html>
5. 利用indexOf
去重
- 原理
indexOf()
方法可返回数组中某个指定的元素位置。- 如果在数组中没找到指定元素则返回
-1
- 如果找到,则返回首次找到位置的下标
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body></body>
<script>
let arr = [22, 17, 22, 44, 44, 66, 17, 66, 7];
let newArr = [];
for (let i = 0; i < arr.length; i++) {
if (newArr.indexOf(arr[i]) === -1) {
newArr.push(arr[i]);
}
}
console.log(newArr);
</script>
</html>
6. 利用 ES6 中的Map
方法去重
- 原理
- 创建一个空
Map
数据结构,遍历需要去重的数组,把数组的每一个元素作为key
存到Map
中 - 由于
Map
中不会出现相同的key
值,所以最终得到的就是去重后的结果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body></body>
<script>
let arr = [22, 17, 22, 44, 44, 66, 17, 66, 7];
let map = new Map();
let newArr = [];
for (let i = 0; i < arr.length; i++) {
if (map.has(arr[i])) {
map.set(arr[i], true);
} else {
map.set(arr[i], false);
newArr.push(arr[i]);
}
}
console.log(newArr);
</script>
</html>