2024年前端最新js数组去重的10种有效方法 vue 数组去重_vue js 数组去重,前端开发基础

本文探讨了在前端开发中,特别是使用Vue.js时,如何有效地进行JavaScript数组去重。文中列举并详细解释了10种不同的去重方法,包括使用indexOf、includes、forEach、splice、lastIndexOf以及ES6的Set等。通过实例代码展示,帮助开发者了解和掌握这些方法的使用,提升前端开发基础能力。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

最后

由于篇幅限制,pdf文档的详解资料太全面,细节内容实在太多啦,所以只把部分知识点截图出来粗略的介绍,每个小节点里面都有更细化的内容!

开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】


方法4: 利用数组的indexOf下标属性来查询。



function unique4(arr) {
var newArr = []
for (var i = 0; i < arr.length; i++) {
if (newArr.indexOf(arr[i])===-1) {
newArr.push(arr[i])
}
}
return newArr
}
console.log(unique4([1, 1, 2, 3, 5, 3, 1, 5, 6, 7, 4]));
// 结果是[1, 2, 3, 5, 6, 7, 4]


方法 5: 利用数组原型对象上的includes方法。



function unique5(arr) {
var newArr = []
for (var i = 0; i < arr.length; i++) {
if (!newArr.includes(arr[i])) {
newArr.push(arr[i])
}
}
return newArr
}
console.log(unique5([1, 1, 2, 3, 5, 3, 1, 5, 6, 7, 4]));
// 结果是[1, 2, 3, 5, 6, 7, 4]


方法6: 利用数组原型对象上的 filter 和 includes方法。



  function unique6(arr) {
        var newArr = []
        newArr = arr.filter(function (item) {
            return newArr.includes(item) ? '' : newArr.push(item)
        })
        return newArr
    }
    console.log(unique6([1, 1, 2, 3, 5, 3, 1, 5, 6, 7, 4]));
    // 结果是[1, 2, 3, 5, 6, 7, 4]


方法7: 利用数组原型对象上的 forEach 和 includes方法。

  function unique7(arr) {
    let newArr = [];
    arr.forEach(item => {
        return newArr.includes(item) ? '' : newArr.push(item);
    });
    return newArr;
}
console.log(unique7([1, 1, 2, 3, 5, 3, 1, 5, 6, 7, 4]));
// 结果是[1, 2, 3, 4, 5, 6, 7]

方法8: 利用数组原型对象上的 splice 方法。

function unique8(arr) {
    var i,j,len = arr.length;
    for (i = 0; i < len; i++) {
        for (j = i + 1; j < len; j++) {
            if (arr[i] == arr[j]) {
                arr.splice(j, 1);
                len--;
                j--;
            }
        }
    }
    return arr;
}
console.log(unique8([1, 1, 2, 3, 5, 3, 1, 5, 6, 7, 4]));

方法9: 利用数组原型对象上的 lastIndexOf 方法。

 function unique9(arr) {
        var res = [];
        for (var i = 0; i < arr.length; i++) {
            res.lastIndexOf(arr[i]) !== -1 ? '' : res.push(arr[i]);
        }
        return res;
    }
    console.log(unique9([1, 1, 2, 3, 5, 3, 1, 5, 6, 7, 4]));
    // 结果是[1, 2, 3, 5, 6, 7, 4]

方法 10: 利用 ES6的set 方法。

function unique10(arr) {
    //Set数据结构,它类似于数组,其成员的值都是唯一的
    return Array.from(new Set(arr)); // 利用Array.from将Set结构转换成数组
}
console.log(unique10([1, 1, 2, 3, 5, 3, 1, 5, 6, 7, 4]));
// 结果是[1, 2, 3, 5, 6, 7, 4]



### 最后

**一个好的心态和一个坚持的心很重要**,很多冲着高薪的人想学习前端,但是能学到最后的没有几个,遇到困难就放弃了,这种人到处都是,就是因为有的东西难,所以他的回报才很大,我们评判一个前端开发者是什么水平,就是他解决问题的能力有多强。

**[开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**

**分享一些前端面试题以及学习路线给大家**

![](https://img-blog.csdnimg.cn/img_convert/0df6f862a739fa10d3a06deb3ca2decf.webp?x-oss-process=image/format,png)

![](https://img-blog.csdnimg.cn/img_convert/774f3a38c13e71dbe775c625c4cc18d5.webp?x-oss-process=image/format,png)

https://bbs.csdn.net/topics/618166371)**

**分享一些前端面试题以及学习路线给大家**

[外链图片转存中...(img-eEauEWen-1715009828229)]

[外链图片转存中...(img-LAtaQpN6-1715009828230)]

<think>好的,用户想要获取2024年前开发的最新面试题汇总。首先,我需要回顾一下现有的引用内容,看看有没有直接相关的资料。引用[1]提到了2024年的前端学习资料,但主要是自学用的,可能包含部分面试题。引用[2]指出面试官会根据简历提问,但技术基础需要自己分类准备,形成知识体系,并列举了一些题。引用[3]和[4]是关于JavaScript数组方法和异步操作的,这些都是面试常见的问题。 接下来,用户的需求明确是2024年的前端面试题,所以需要结合最新趋势和技术发展。当前前端领域的热点包括Vue3、React 18、TypeScript、Webpack 5、Vite、性能优化、跨开发等。此外,框架原理、工程化、前端安全、算法等也是常考内容。 需要确保回答结构清晰,分门别类,覆盖基础、框架、工程化、网络、安全、算法等方面。同时,引用中提到的异步处理、数组方法等可以作为例子加入。还要注意引用标记的正确使用,例如引用[2]提到技术基础分类,引用[3]和[4]涉及具体问题。 可能还需要补充一些最新面试趋势,如微前端、低代码、Serverless等,但引用中没有相关信息,可能需要根据现有知识添加,但需标明没有引用来源。要确保回答真实可靠,避免猜测不确定的内容。 最后,生成相关问题时要围绕用户需求,可能涉及如何准备面试、各知识点的深入问题、实际应用场景等。确保问题有针对性,帮助用户进一步学习。</think>### 2024年前开发面试最新汇总 #### 一、JavaScript核心知识 1. **异步编程** - 解释事件循环机制,对比`Promise`、`async/await`、`Generator`的实现差异[^4] - 手写代码:实现带并发限制的异步任务调度器 $$代码示例:\text{class AsyncScheduler \{ ... \}}$$ 2. **ES6+新特性** - `Proxy`与`Reflect`的应用场景 - 如何用`WeakMap`实现私有属性? 3. **数组与对象操作** - 对比`map()`与`forEach()`的内存处理差异[^3] - 实现数组扁平化并(要求时间复杂度最优) #### 二、框架与原理 1. **React** - 解释Fiber架构如何优化渲染性能 - 使用Hooks时如何避免不必要的渲染?(举例`useMemo`与`useCallback`) 2. **Vue** - Vue3的`Composition API`与Options API的设计哲学差异 - 手写简易响应式系统(基于`Proxy`) 3. **跨框架问题** - 虚拟DOM的Diff算法优化策略 - 前端路由实现原理(Hash vs History) #### 三、工程化与性能优化 1. **构建工具** - Webpack Tree Shaking实现条件及局限性 - Vite为何比Webpack快?对比ES Module与Bundle机制的差异 2. **性能监控** - 如何通过Performance API分析首屏加载时间? - 描述LCP、FID、CLS指标的计算方式及优化手段[^1] #### 四、网络与安全 1. **HTTP协议** - 解释HTTP/3的QUIC协议如何解决队头阻塞问题 - 预请求(Preflight)在CORS中的触发条件 2. **前端安全** - 实现CSRF Token的生成与校验逻辑 - 如何防御XSS攻击?(结合Content Security Policy说明) #### 五、算法与数据结构 1. **高频手写题** - 实现`Promise.allSettled`的Polyfill - 二叉树层序遍历(要求输出Zigzag格式) 2. **场景题** - 设计一个实时协作的在线文档冲突解决算法(类似OT算法) ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值