js数组去重的10种方法
创始人
2024-03-03 11:14:24
0

目录

方法 1: 利用 ES6的set 方法和解构赋值——最常用、最简单。

方法2: 利用数组原型对象上的 lastIndexOf 方法——以前常用,逐渐被include代替

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

方法4  利用数组原型对象上的 forEach 和 includes方法——includes很强大

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

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

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

方法8:  利用对象属性存在的特性,如果没有该属性则存入新数组。

方法9: 

方法10:


方法 1: 利用 ES6的set 方法和解构赋值——最常用、最简单。

这个方法是es6之后加入的,是最简单的一种方法。

Set是一种结构,是一种不重复值的集合,如:{1,2,3}。它的特性之一就是里面的每一个值都是不重复的;

[...new Set(arr)] 意思是将Set结构解构赋值为数组。

        function Unrepeated1(arr) {return [...new Set(arr)]}console.log(Unrepeated1([1,1,2,2,3,3]));// 结果是[1, 2, 3]

方法2: 利用数组原型对象上的 lastIndexOf 方法——以前常用,逐渐被include代替

思路: 定义一个空数组,遍历这个原数组,如果空数组没有这个数就往空数组里加入,有的话就不操作。

lastIndeOf():返回指定字符串值最后出现的位置,从后向前搜索,找不到返回-1

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

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

思路是:双层遍历数组,举例:如果第一项是数字1,那么第二层遍历从第二项开始,如果后面也找到1,就把1删除。

splice():用于删除数组元素,splice(j,1)j代表数组索引是j,1代表删除1个

        function Unrepeated3(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(Unrepeated3([1, 1, 2, 3, 5, 3, 1, 5, 6, 7, 4]));

 

方法4 利用数组原型对象上的 forEach 和 includes方法——includes很强大

思路:定义一个空数组,遍历原数组,再遍历空数组,如果空数组里面含有原数组的项就添加进空数组,如果空数组已经有了,就不再操作。

includes:表示是否含有,返回布尔值,说的也是它以后会替代indexof。是es6新增的很强大的一个api,不止数组可以用,对象,字符串都可以用。

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

 

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

和方法4类似的思路,只不过foreach+includes换成了filter+includes

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

 

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

这个方法可以作为一般性解法,代码可以进一步简化。

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

 

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

思路和上面的类似

        function Unrepeated7(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(Unrepeated7([1, 1, 2, 3, 5, 3, 1, 5, 6, 7, 4]));// 结果是[1, 2, 3, 5, 6, 7, 4]

 

 方法8: 利用对象属性存在的特性,如果没有该属性则存入新数组。

这个方法兼容性比较好。思路是用一个空对象来标记,通过遍历,动态的设置对象的属性,以此来区分是否重复。

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

 

方法9: 

思路:先将原数组排序,在与相邻的进行比较,如果不同则存入新数组。

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

 

方法10:

思路:定义一个新数组,并存放原数组的第一个元素,然后将元素组一一和新数组的元素对比,若不同则存放在新数组中。

        function Unrepeated10(arr) {let newArr = [arr[0]];for (let i = 1; i < arr.length; i++) {let repeat = false;for (let j = 0; j < newArr.length; j++) {if (arr[i] === newArr[j]) {repeat = true;break;}else{}}if (!repeat) {newArr.push(arr[i]);}}return newArr;}console.log(Unrepeated10([1, 1, 2, 3, 5, 3, 1, 5, 6, 7, 4]));// 结果是[1, 2, 3, 5, 6, 7, 4]

相关内容

热门资讯

AWSECS:访问外部网络时出... 如果您在AWS ECS中部署了应用程序,并且该应用程序需要访问外部网络,但是无法正常访问,可能是因为...
AWSElasticBeans... 在Dockerfile中手动配置nginx反向代理。例如,在Dockerfile中添加以下代码:FR...
银河麒麟V10SP1高级服务器... 银河麒麟高级服务器操作系统简介: 银河麒麟高级服务器操作系统V10是针对企业级关键业务...
北信源内网安全管理卸载 北信源内网安全管理是一款网络安全管理软件,主要用于保护内网安全。在日常使用过程中,卸载该软件是一种常...
AWR报告解读 WORKLOAD REPOSITORY PDB report (PDB snapshots) AW...
AWS管理控制台菜单和权限 要在AWS管理控制台中创建菜单和权限,您可以使用AWS Identity and Access Ma...
​ToDesk 远程工具安装及... 目录 前言 ToDesk 优势 ToDesk 下载安装 ToDesk 功能展示 文件传输 设备链接 ...
群晖外网访问终极解决方法:IP... 写在前面的话 受够了群晖的quickconnet的小水管了,急需一个新的解决方法&#x...
不能访问光猫的的管理页面 光猫是现代家庭宽带网络的重要组成部分,它可以提供高速稳定的网络连接。但是,有时候我们会遇到不能访问光...
Azure构建流程(Power... 这可能是由于配置错误导致的问题。请检查构建流程任务中的“发布构建制品”步骤,确保正确配置了“Arti...