let arr = [1, 1, "2", "2", "string", "string", null, null, undefined, undefined];
arr.sort((a, b) => a - b);
for (let i = 0; i < arr.length; i++) {
//这里一定要多加一个条件,否者undfined就会被完全删除
if (arr[i] === arr[i + 1] && i + 1 < arr.length) {
arr.splice(i, 1);
i--;
}
}
console.log(arr);//[ null, 1, '2', 'string', undefined ]
使用递归去重
这种方法嘛,就是为了去重才去重的,可以使用,但完全不推荐
let arr = [1, "2", 1, "2", "string", null, "string", null, undefined, undefined];
//其实整体与第一种循环无异,只是利用了递归的特性
arr.sort((a, b) => a - b);
function recursion(index) {
if (index >= 1) {
//判断相同都会删除
if (arr[index] === arr[index - 1]) {
arr.splice(index, 1);
}
//并且走递归
recursion(index - 1);
}
}
recursion(arr.length - 1);
console.log(arr);//[ null, 1, '2', 'string', undefined ]
使用filter去重
filter都知道,条件成立就返回,这里主要是搭配了indexOf返回索引值的特性来实现的
let arr = [1, "2", 1, "2", "string", null, "string", null, undefined, undefined];
//整体感觉还挺简单,就是indexOf会返回所符合条件的第一个值索引值,然后就会跳出循环
//所以每个数只能有一次与filter的index相同
arr = arr.filter((item, index) => {
return arr.indexOf(item) === index;
});
console.log(arr);//[ 1, '2', 'string', null, undefined ]
使用对象属性去重
我们都知道对象的属性有且只能有一个,我们就可以利用这个特性,来对数组中的值去重
let arr = [1, "2", 1, "2", "string", null, "string", null, undefined, undefined];
const obj = {};
const newArr = [];
arr.forEach((item) => {
//对象的值没有赋值之前默认undfined,所以为假,会走进判断
//当再次遇到这个属性的时候已经有值了,并且为真,则会跳过
if (!obj[item]) {
obj[item] = true;
newArr.push(item);
}
});
console.log(newArr);//[ 1, '2', 'string', null, undefined ]
使用reduce和includes去重
reduce这个方法搭配includes,可以简便快捷的去重(这里reduce方法都会的吧)
let arr = [1, "2", 1, "2", "string", null, "string", null, undefined, undefined];
arr = arr.reduce((prev, cur) => {
//当prev种不存在当前循环遍历的值,就会执行push操作,如果存在,那就存在呗,没事了
prev.includes(cur) || prev.push(cur);
return prev;
}, []);
console.log(arr);//[ 1, '2', 'string', null, undefined ]
使用reduce和indexOf去重
这一种跟配合indexOf是类似差不多了,当indexOf找不到就会返回-1
let arr = [1, "2", 1, "2", "string", null, "string", null, undefined, undefined];
arr = arr.reduce((prev, cur) => {
//这里当为真了,就会执行后面的push,上面那种就是当为假了 就会执行后面push
prev.indexOf(cur) === -1 && prev.push(cur);
return prev;
}, []);
console.log(arr);//[ 1, '2', 'string', null, undefined ]
双重循环去重
利用两个for循环,进行对比来达到去重的效果
let arr = [1, "2", 1, "2", "string", null, "string", null, undefined, undefined];
for (let i = 0; i < arr.length; i++) {
for (let j = i + 1; j < arr.length; j++) {
//利用两层循环,对比是否有相同的值
if (arr[i] === arr[j]) {
arr.splice(j, 1);
//删除值后-1,否者会跳过一个元素
j--;
}
}
}
console.log(arr);//[ 1, '2', 'string', null, undefined ]
使用indexof去重
这个就是利用indexOf的特性去重,当为-1的时候才会新填元素
let arr = [1, "2", 1, "2", "string", null, "string", null, undefined, undefined];
const newArr = [];
for (let i = 0; i < arr.length; i++) {
if (newArr.indexOf(arr[i]) === -1) {
//找不到就添加,找到了就证明已经有了,就略过
newArr.push(arr[i]);
}
}
console.log(newArr);//[ 1, '2', 'string', null, undefined ]
使用Set去重
Set对象允许你存储任何类型(无论是原始值还是对象引用)的唯一值。
let arr = [1, "2", 1, "2", "string", null, "string", null, undefined, undefined];
//所以就可以利用扩展运算符和new Set 来进行去重
arr = [...new Set(arr)];
console.log(newArr);//[ 1, '2', 'string', null, undefined ]
数组对象去重
在开发中我们很少遇到值类型的数组需要去重,一般情况下都是数组包对象的形式,但是当数组中的对象有重复的时候,该如何去重呢?毕竟作为引用类型的对象,每一个都是唯一的
利用对象的特性对数组对象去重
使用循环,利用对象的特性进行去重
const arr = [
{ id: 1, name: "张三", age: 18 },
{ id: 2, name: "李四", age: 13 },
{ id: 3, name: "张三", age: 15 },
{ id: 2, name: "王五", age: 16 },
{ id: 4, name: "赵六", age: 18 },
];
const obj = {};
const newArr = [];
arr.forEach((item) => {
//循环遍历,判断对象属性是否为真,为假就将数据添加到新数组中
obj[item.id] ? "" : (obj[item.id] = true && newArr.push(item));
});
console.log(newArr);
//[
// { id: 1, name: '张三', age: 18 },
// { id: 2, name: '李四', age: 13 },
// { id: 3, name: '张三', age: 15 },
// { id: 4, name: '赵六', age: 18 }
//]
利用findIndex对数组对象去重
数组有个findIndex方法,会循环遍历,return真的时候会返回当前索引,找不到就返回-1
const arr = [
{ id: 1, name: "张三", age: 18 },
{ id: 2, name: "李四", age: 13 },
{ id: 3, name: "张三", age: 15 },
{ id: 2, name: "王五", age: 16 },
{ id: 4, name: "赵六", age: 18 },
];
const newArr = [];
arr.forEach((item) => {
if (newArr.findIndex((item1) => item1.id === item.id) === -1) {
### 最后
推荐一些系统学习的途径和方法。
![路线图](https://img-blog.csdnimg.cn/img_convert/abffda3a0cfe5b9baa70f132ab55f248.png)
每个Web开发人员必备,很权威很齐全的Web开发文档。作为学习辞典使用,可以查询到每个概念、方法、属性的详细解释,注意使用英文关键字搜索。里面的一些 HTML,CSS,HTTP 技术教程也相当不错。
**[开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**
HTML 和 CSS:
![html5知识](https://img-blog.csdnimg.cn/img_convert/2ee0d943c2e65e1bf84360c1c8a40cf6.png)
![css基础知识](https://img-blog.csdnimg.cn/img_convert/f660a2fef40322a6e2c45716d4a97e02.png)