2024年前端最全js数组去重的10种有效方法 vue 数组去重，阿里前端一面_前端数组去重

总结

=============================================================

从转行到现在，差不多两年的时间，虽不能和大佬相比，但也是学了很多东西。我个人在学习的过程中，习惯简单做做笔记，方便自己复习的时候能够快速理解，现在将自己的笔记分享出来，和大家共同学习。

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

个人将这段时间所学的知识，分为三个阶段：

第一阶段：HTML&CSS&JavaScript基础

第二阶段:移动端开发技术

第三阶段:前端常用框架

• 推荐学习方式：针对某个知识点，可以先简单过一下我的笔记，如果理解，那是最好，可以帮助快速解决问题；如果因为我的笔记太过简陋不理解，可以关注我以后我还会继续分享。

• 大厂的面试难在，针对一个基础知识点，比如JS的事件循环机制，不会上来就问概念，而是换个角度，从题目入手，看你是否真正掌握。所以对于概念的理解真的很重要。

// 结果是[1, 2, 3, 5, 6, 7, 4]

方法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 方法。

css

1，盒模型
2，如何实现一个最大的正方形
3，一行水平居中，多行居左
4，水平垂直居中
5，两栏布局，左边固定，右边自适应，左右不重叠
6，如何实现左右等高布局
7，画三角形
8，link @import导入css
9，BFC理解

js

1，判断 js 类型的方式
2，ES5 和 ES6 分别几种方式声明变量
3，闭包的概念？优缺点？
4，浅拷贝和深拷贝
5，数组去重的方法
6，DOM 事件有哪些阶段？谈谈对事件代理的理解
7，js 执行机制、事件循环
8，介绍下 promise.all
9，async 和 await,
10，ES6 的 class 和构造函数的区别
11，transform、translate、transition 分别是什么属性？CSS 中常用的实现动画方式,
12，介绍一下rAF(requestAnimationFrame)
13，javascript 的垃圾回收机制讲一下,
14，对前端性能优化有什么了解？一般都通过那几个方面去优化的？

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

ate、transition 分别是什么属性？CSS 中常用的实现动画方式,
12，介绍一下rAF(requestAnimationFrame)
13，javascript 的垃圾回收机制讲一下,
14，对前端性能优化有什么了解？一般都通过那几个方面去优化的？

[外链图片转存中…(img-IHNHKk51-1715499493586)]

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