Web前端最全js数组去重的10种有效方法 vue 数组去重_vue js 数组去重(2)，2024年最新前端面试工作中遇到问题怎么解决_vue js数组去重

Vue 面试题

1.Vue 双向绑定原理
2.描述下 vue 从初始化页面–修改数据–刷新页面 UI 的过程？
3.你是如何理解 Vue 的响应式系统的?
4.虚拟 DOM 实现原理
5.既然 Vue 通过数据劫持可以精准探测数据变化,为什么还需要虚拟 DOM 进行 diff 检测差异?
6.Vue 中 key 值的作用？
7.Vue 的生命周期
8.Vue 组件间通信有哪些方式?
9.watch、methods 和 computed 的区别?
10.vue 中怎么重置 data?
11.组件中写 name 选项有什么作用？
12.vue-router 有哪些钩子函数?
13.route 和 router 的区别是什么？
14.说一下 Vue 和 React 的认识，做一个简单的对比
15.Vue 的 nextTick 的原理是什么？
16.Vuex 有哪几种属性?
17.vue 首屏加载优化
18.Vue 3.0 有没有过了解？
19.vue-cli 替我们做了哪些工作？

如果你觉得对你有帮助，可以戳这里获取：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

利用对象属性存在的特性，如果没有该属性则存入新数组。

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14

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

1
2
3
4
5
6
7
8
9
10
11
12

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

1
2
3
4
5
6
7
8
9
10
11
12

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

```javascript
  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]


1
2
3
4
5
6
7
8
9
10
11
12
13

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

1
2
3
4
5
6
7
8
9
10

方法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]));

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

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


### 刷面试题

刷题的重要性，不用多说。对于应届生或工作年限不长的人来说，刷面试题一方面能够尽可能地快速自己对某个技术点的理解，另一方面在面试时，有一定几率被问到相同或相似题，另外或多或少也能够为自己面试增加一些自信心，可见适当的刷题是很有必要的。

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

* **前端字节跳动真题解析**  

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

* **【269页】前端大厂面试题宝典**  

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


最后平时要进行自我分析与评价，做好职业规划，不断摸索，提高自己的编程能力和抽象思维能力。大厂面试远没有我们想的那么困难，摆好心态，做好准备，你也可以的。

典**  

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


最后平时要进行自我分析与评价，做好职业规划，不断摸索，提高自己的编程能力和抽象思维能力。大厂面试远没有我们想的那么困难，摆好心态，做好准备，你也可以的。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32