[前端面试题]:数组去重的几种方法

简介: [前端面试题]:数组去重的几种方法

总结一些日常需要用到的一些api,也是在一些面试中会经常出现的题目,今天分享的是数组去重的几个不同的方法, 同时文章也被收录到我的《JS基础》专栏中,欢迎大家点击收藏加关注。

给大家推荐一个实用面试题库

1、前端面试题库 (面试必备)            推荐:★★★★★

地址:前端面试题库

数组去重的方法

  1. set去重
  2. map去重
  3. for循环+indexof
  4. for循环+额外数组
  5. 双层for循环+splice
  6. filter+indexof
  7. map实现

Set去重

使用set自带的特性,利用set保存的元素都是不会重复,并且可以传入一个数组作为set的各个元素,set返回的是一个伪数组,可以通过reset的展开成多个元素,最后放到一个数组中,即可完成数组去重

var arr = [1,1,13,4,4,5,6,77,8,8,9]
console.log([...new Set(arr)]) 
复制代码

indexOf实现数组去重

indexof可以判断数组时候存在某个元素,indexof判断不存在某个元素的时候会返回 number类型的 -1 ,具体做法如下:

  1. 声明一个新数组
  2. 遍历旧数组,如果该元素不存在新数组中,则push进新数组
  3. 返回新数组
function uniqueArr(arr){
    let res= []
    for(let i = 0 ;i<arr.length;i++){
        if(res.indexOf(arr[i]) === -1){
            res.push(arr[i])
        }
    }
    return res
}
console.log(uniqueArr(arr))
复制代码

双层for循环+额外数组实现

判断条件是 j == result.length 判断每次循环的result数组是否全都遍历完,遍历完说明没有重复元素,使用push新增

let result = []; 
for (var i = 0; i < arr.length; i++) { 
    for (var j = 0; j < result.length; j++) { 
        if (arr[i] === result[j]) { 
            break; 
        } 
    } 
    if (j == result.length) { 
        result.push(arr[i]); 
    } 
}   
console.log(result)
复制代码

双层for循环+切割原数组实现

同样还是采用两个for循环,但与上面不同的是通过两个先后指针i、j来循环同一个数组,遇到相同的元素进行删除,然后j后退一位,因为删除一位的话,后面的元素会补上,所以j后退以为,以便循环的时候不会漏掉补位的元素

function unique(arr){
    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)
                j--
            }
        }
    }
    return arr
}
复制代码

filter+indexof数组去重实现

indexOf()  方法返回在数组中可以找到给定元素的第一个索引,如果不存在,则返回 -1

这里利用了indexof会返回第一个元素的索引,那么通过filter,在元素重复的情况下,我们只需要保留相同的第一个元素即可,也就是说第二次出现的元素,indexof返回的是第一个出现元素的下标,通过筛选这个条件,就能过滤掉第二次出现的元素

let unique= (arr) => {
    return arr.filter((item,index) => {
        return arr.indexOf(item) ===index;
    })
};
复制代码

map实现

最后一个map的实现算是比较简单的,map同样会对重复的元素进行过滤,最后map.keys进行结构然后返回到一个数组中

function unique(arr) {
    let map = new Map()
    for(let item of arr){
        map.set(item,true)
    }
    return [...map.keys()]
}

 

给大家推荐一个实用面试题库

1、前端面试题库 (面试必备)            推荐:★★★★★

地址:前端面试题库

相关文章
|
3天前
|
缓存 JavaScript 前端开发
JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用
本文深入讲解了 JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用。
11 5
|
15天前
|
存储 Java 程序员
Java基础的灵魂——Object类方法详解(社招面试不踩坑)
本文介绍了Java中`Object`类的几个重要方法,包括`toString`、`equals`、`hashCode`、`finalize`、`clone`、`getClass`、`notify`和`wait`。这些方法是面试中的常考点,掌握它们有助于理解Java对象的行为和实现多线程编程。作者通过具体示例和应用场景,详细解析了每个方法的作用和重写技巧,帮助读者更好地应对面试和技术开发。
55 4
|
24天前
|
缓存 前端开发 JavaScript
"面试通关秘籍:深度解析浏览器面试必考问题,从重绘回流到事件委托,让你一举拿下前端 Offer!"
【10月更文挑战第23天】在前端开发面试中,浏览器相关知识是必考内容。本文总结了四个常见问题:浏览器渲染机制、重绘与回流、性能优化及事件委托。通过具体示例和对比分析,帮助求职者更好地理解和准备面试。掌握这些知识点,有助于提升面试表现和实际工作能力。
60 1
|
28天前
|
存储 前端开发 JavaScript
前端的全栈之路Meteor篇(四):RPC方法注册及调用-更轻量的服务接口提供方式
RPC机制通过前后端的`callAsync`方法实现了高效的数据交互。后端通过`Meteor.methods()`注册方法,支持异步操作;前端使用`callAsync`调用后端方法,代码更简洁、易读。本文详细介绍了Methods注册机制、异步支持及最佳实践。
|
2月前
|
Web App开发 前端开发 Linux
「offer来了」浅谈前端面试中开发环境常考知识点
该文章归纳了前端开发环境中常见的面试知识点,特别是围绕Git的使用进行了详细介绍,包括Git的基本概念、常用命令以及在团队协作中的最佳实践,同时还涉及了Chrome调试工具和Linux命令行的基础操作。
「offer来了」浅谈前端面试中开发环境常考知识点
|
2月前
|
前端开发 JavaScript
前端基础(九)_this基本使用、this指向判断、改变this指向的方法
本文介绍了JavaScript中this的基本使用、this指向的判断以及改变this指向的方法。
48 1
前端基础(九)_this基本使用、this指向判断、改变this指向的方法
|
2月前
|
前端开发
前端基础(十四)_隐藏元素的方法
本文介绍了几种在前端开发中隐藏元素的方法,包括使用`display:none`、`visibility:hidden`、`opacity:0`等CSS属性,并提供了相应的示例代码。此外,还提到了其他隐藏元素的技巧,如通过设置元素位置、使用`overflow`属性和`filter`属性以及`rgba`颜色值来实现元素的隐藏。
66 1
前端基础(十四)_隐藏元素的方法
|
1月前
|
前端开发 JavaScript
掌握微前端架构:构建现代Web应用的新方法
本文介绍了微前端架构的概念及其在现代Web应用开发中的优势与实施方法。微前端架构通过将应用拆分成独立模块,提升了开发效率和灵活性。其核心优势包括技术栈灵活性、独立部署、团队协作及易于维护。文章详细阐述了定义边界、选择框架、管理状态和通信等关键步骤,并讨论了状态同步、样式隔离及安全性等挑战。微前端架构有望成为未来Web开发的重要趋势。
|
1月前
|
JavaScript 前端开发 应用服务中间件
vue前端开发中,通过vue.config.js配置和nginx配置,实现多个入口文件的实现方法
vue前端开发中,通过vue.config.js配置和nginx配置,实现多个入口文件的实现方法
147 0
|
1月前
|
存储 前端开发 API
前端开发中,Web Storage的存储数据的方法localstorage和sessionStorage的使用及区别
前端开发中,Web Storage的存储数据的方法localstorage和sessionStorage的使用及区别
93 0

热门文章

最新文章

下一篇
无影云桌面