【面试题】JS的14种去重方法,看看你知道多少(包含数组对象去重)_js排序去重

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) {
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 }
//]


### 使用reduce对数组对象去重


**`reduce()`**  方法对数组中的每个元素按序执行一个提供的 **reducer** 函数,每一次运行 **reducer** 会将先前元素的计算结果作为参数传入,最后将其结果汇总为单个返回值。



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.reduce((pre, cur) => {
obj[cur.id] ? “” : (obj[cur.id] = true && pre.push(cur));
return pre;
}, []);
console.log(newArr);
//[
// { id: 1, name: ‘张三’, age: 18 },
// { id: 2, name: ‘李四’, age: 13 },
// { id: 3, name: ‘张三’, age: 15 },
// { id: 4, name: ‘赵六’, age: 18 }
//]


### 双重循环对数组对象去重


双重循环去重和值类型去重类似,相互对比他们的id来达到去重的效果



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 },
];

for (let i = 0; i < arr.length; i++) {
for (let j = i + 1; j < arr.length; j++) {
if (arr[i].id === arr[j].id) {
arr.splice(j, 1);
j–;
}
}
}
console.log(arr);
//[
// { id: 1, name: ‘张三’, age: 18 },
// { id: 2, name: ‘李四’, age: 13 },
// { id: 3, name: ‘张三’, age: 15 },
// { id: 4, name: ‘赵六’, age: 18 }
//]


### 使用递归对数组对象去重


递归去重,跟值类型去重类似,操作方法也是类似的,当然也是不推荐使用的



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 = [];
function recursion(v) {
if (v >= 0) {
if (!obj[arr[v].id]) {
obj[arr[v].id] = true;
newArr.push(arr[v]);
}
recursion(v - 1);
}
}
recursion(arr.length - 1);
console.log(newArr);
//[
// { id: 4, name: ‘赵六’, age: 18 },
// { id: 2, name: ‘王五’, age: 16 },
// { id: 3, name: ‘张三’, age: 15 },
// { id: 1, name: ‘张三’, age: 18 }
//]


## 结尾
### 总结

**前端资料汇总**

![](https://img-blog.csdnimg.cn/img_convert/6e0ba223f65e063db5b1b4b6aa26129a.png)

*   框架原理真的深入某一部分具体的代码和实现方式时,要多注意到细节,不要只能写出一个框架。

*   算法方面很薄弱的,最好多刷一刷,不然影响你的工资和成功率😯



*   在投递简历之前,最好通过各种渠道找到公司内部的人,先提前了解业务,也可以帮助后期优秀 offer 的决策。

*   要勇于说不,对于某些 offer 待遇不满意、业务不喜欢,应该相信自己,不要因为当下没有更好的 offer 而投降,一份工作短则一年长则 N 年,为了幸福生活要慎重选择!!!
    喜欢这篇文章文章的小伙伴们点赞+转发支持,你们的支持是我最大的动力!
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值