JS数组去重方法总结:indexOf, lastIndexOf, filter
108 浏览量
更新于2024-08-28
收藏 78KB PDF 举报
"这篇资源是作者在大学四年的学习中总结的JavaScript数组去重方法,适合面试准备。文章提到了一些基础的JS数组知识,并推荐了相关参考资料,然后详细介绍了三种常用的去重方法:indexOf、lastIndexOf和filter与indexOf的组合使用。"
在JavaScript中,数组去重是一个常见的需求,尤其在处理数据清洗或优化数据结构时。这里作者分享了三种实用的方法:
1. 使用indexOf()方法去重
`indexOf()`方法查找数组中指定元素的首次出现位置,如果不存在则返回-1。基于此,我们可以遍历数组,对于每个元素,如果它不在新数组的新建副本`newArr`中,就将其添加到`newArr`。这种方法效率较低,因为每次检查都需要遍历整个新数组。
示例代码:
```javascript
var arr = [1, 1, 2, 2, 3, 3, 4, 4];
var newArr = [];
for (var i = 0, len = arr.length; i < len; i++) {
if (newArr.indexOf(arr[i]) === -1) {
newArr.push(arr[i]);
}
}
console.log(newArr); // 输出:[1, 2, 3, 4]
```
2. 使用lastIndexOf()方法去重
`lastIndexOf()`方法类似于`indexOf()`,但它从数组末尾开始查找。这使得在某些情况下,如果数组中有重复元素,它可以帮助我们保留最后一个元素。同样,这种方法也需要遍历整个数组。
示例代码:
```javascript
function noRepeat(arr) {
var res = [];
for (var i = 0; i < arr.length; i++) {
if (res.lastIndexOf(arr[i]) === -1) {
res.push(arr[i]);
}
}
return res;
}
console.log(noRepeat([1, 1, 2, 2, 3, 3, 4, 4])); // 输出:[4, 3, 2, 1]
```
3. 使用filter()与indexOf()结合去重
`filter()`方法创建一个新的数组,其中包含通过所提供函数实现的测试的所有元素。将`indexOf()`作为过滤条件,如果元素在新数组中不存在,那么将元素添加到结果中。
示例代码:
```javascript
function uniqueByFilter(arr) {
return arr.filter(function(item, index) {
return arr.indexOf(item, 0) === index;
});
}
console.log(uniqueByFilter([1, 1, 2, 2, 3, 3, 4, 4])); // 输出:[1, 2, 3, 4]
```
以上是JavaScript中数组去重的几种基本方法。除此之外,随着ES6的引入,`Set`结构成为更简洁的去重工具,因为它不允许重复元素。例如:
```javascript
let uniqueArr = [...new Set([1, 1, 2, 2, 3, 3, 4, 4])]; // 输出:[1, 2, 3, 4]
```
了解并熟练掌握这些方法对于JS开发者来说至关重要,特别是在面试中,能够体现出对数据结构和算法的理解程度。
2020-12-11 上传
2018-11-29 上传
2024-01-03 上传
2021-01-08 上传
点击了解资源详情
2020-12-09 上传
2020-10-20 上传
2020-12-09 上传
2020-10-27 上传
weixin_38659955
- 粉丝: 4
- 资源: 915
最新资源
- 新代数控API接口实现CNC数据采集技术解析
- Java版Window任务管理器的设计与实现
- 响应式网页模板及前端源码合集:HTML、CSS、JS与H5
- 可爱贪吃蛇动画特效的Canvas实现教程
- 微信小程序婚礼邀请函教程
- SOCR UCLA WebGis修改:整合世界银行数据
- BUPT计网课程设计:实现具有中继转发功能的DNS服务器
- C# Winform记事本工具开发教程与功能介绍
- 移动端自适应H5网页模板与前端源码包
- Logadm日志管理工具:创建与删除日志条目的详细指南
- 双日记微信小程序开源项目-百度地图集成
- ThreeJS天空盒素材集锦 35+ 优质效果
- 百度地图Java源码深度解析:GoogleDapper中文翻译与应用
- Linux系统调查工具:BashScripts脚本集合
- Kubernetes v1.20 完整二进制安装指南与脚本
- 百度地图开发java源码-KSYMediaPlayerKit_Android库更新与使用说明