前端开发之 JS 数组去重方法
前言
在前端开发的时候，对于数据处理是很重要的一块，尤其是要根据实际的业务需求来处理数据，有很强的兼容性要求。而且有些时候后端提供的数据和实际的业务需求数据是有偏差的前端培训，所以前端在拿到后台返回的数据之后，需要对数据进行“二次加工”处理，从而来满足业务需求。那么本篇文章就来分享一下在处理数据时候比较重要的一种方式：JavaScript 中对数组进行合并之后的去重操作，这是一个比较常见的操作，分享出来，提供查阅使用。
JavaScript 中数组去重
在 JavaScript 中对数组进行去重操作有好几种方法，而且也是比较常见的操作方式，通过梳理之后可以总结如下几种对数组进行去重的方法，如有不完善的地方，欢迎指正批评。
一、通过使用双重 for 循环结合 splice 方法来去重
通过使用双重 for 循环结合数组的 splice 方法来实现数组去重，这是一种比较常用的方法，尤其是在 ES6 出现之前该方式比较常用，具体示例如下所示：
示例数组：
var array = [1, 2, 3, 4, 5, 5, 4, 3, 2,1];
处理方法：
二、通过使用 ES6 中的 Set 方法来去重
该方法适用于 ES6，因为 ES6 中才有 Set 方法，通过使用 Set 方法可以进行数组去重问题，而且 Set 可以允许存储任何类型（初原始值或者引用的值）的唯一值。具体示例如下所示：
示例数组：
let array = [1, 2, 3, 4, 5, 5, 4, 3, 2,1];
处理方法：
三、通过使用 ES6 中的 Map 方法来去重
ES6 中通过使用 Map 方法来去重，该方法适用于 ES6 中的数组去重。主要是通过创建一个空 Map 数据结构，然后遍历需要去重的数组，最后把数组的每一个元素作为 key 存到 Map 中，由于 Map 中不会出现相同的 key，所以最后得到的结果就是数组去重后的所有元素。
示例数组：
let array = [1, 2, 3, 4, 5, 5, 4, 3, 2,1];
处理方法：
console.log(repeat(array)); // 数组输出结果：[ 1, 2, 3, 4, 5]
四、通过 JavaScript 中数组的 indexOf 方法来去重
在 JavaScript 中，数组的 indexOf 方法可以作去重处理，函数是 array.indexOf(item, statt) ，通过返回数组中某个指定的元素位置，如果没有则返回-1。具体的示例如下所示：
示例数组：
var array = [1, 2, 3, 4, 5, 5, 4, 3, 2,1];
处理方法：
五、通过 JavaScript 中数组的 sort 方法来去重
通过 JavaScript 中数组的 sort 方法来去重，操作原理就是根据相邻元素对比法来进行去重操作，函数 array.sort( function ) 的参数必须是函数，是可选的，默认为升序。具体示例如下所示：
示例数组：
var array = [1, 2, 3, 4, 5, 5, 4, 3, 2,1];
处理方法：
function repeat( array ){array = array.sort();console.log(array);
六、通过 JavaScript 中对象的属性不能相同的特点来去重
在 JavaScript 中对象的属性不能相同，前端培训机构通过用数组项作为一个对象的属性，会自动去除相同的值，实现数组去重效果，但是这个方法有缺陷，不建议使用，仅做了解即可。具体示例如下所示：
示例数组：
var array = [1, 2, 3, 4, 5, 5, 4, 3, 2,1];
处理方法：
function repeat(array){var array1 = [];var obj = {};for(var i =0,leng=array.length;i<leng;i++){if(!obj[array[i]]){array1.push(array[i]);obj[array[i]] = 1;}else{obj[array[i]]++;}}return array1;}console.log(repeat(array)); // 数组输出结果：[ 1, 2, 3, 4, 5]
七、通过 JavaScript 中数组的 includes 来去重
通过 JavaScript 中数组的 includes 来去重，函数 array.includes(指定元素(必填),指定索引值(可选,默认值为 0) )，如果有值就返回 true，没有值则返回 false。具体示例如下所示：
示例数组：
var array = [1, 2, 3, 4, 5, 5, 4, 3, 2,1];
处理方法：
八、通过 JavaScript 中数组的 filter 方法来去重
通过 JavaScript 中数组的 filter 方法去重，用 filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素，函数 array.filter(function(currentValue,index,arr), thisValue)，其中 currentValue：当前元素的值(必选参数)、index：当前元素的索引值(可选)、arr：当前元素属于的数组对象(可选)、thisValue：对象作为该执行回调时使用，传递给函数，用作 "this" 的值，默认 undefined(可选)。（上述内容摘自菜鸟教程官方解释）
示例数组：
var array = [1, 2, 3, 4, 5, 5, 4, 3, 2,1];
操作原理
原始数组：[1, 2, 3, 4, 5, 5, 4, 3, 2,1];
索引值：0,1,2,3,4,5,6,7,8,9,
伪新数组：[1, 2, 3, 4, 5, 5, 4, 3, 2,1];
使用 indexOf 方法找到数组中的元素在元素中首次出现的索引值。
索引值：0,1,2,3,4,5,6,7,8,9,
最后返回前后索引值相同的元素：新数组：[ 1, 2, 3, 4, 5]。
处理方法：
九、通过 JavaScript 中函数递归来去重
通过 JavaScript 中的函数递归来进行去重操作，运用递归的思想，先排序，然后从最后开始进行比较，遇到相同，就删除，这样也可以实现数组去重操作。具体示例如下所示：
示例数组：
var array = [1, 2, 3, 4, 5, 5, 4, 3, 2,1];
处理方法：
附：实用案例
实际开发遇到的场景，先合并两个数组，然后再对合并后的数组进行去重操作，具体示例如下所示：
文章来源：程序猿 by 三掌柜
关注尚硅谷，轻松学IT 2021.11.23 加入
还未添加个人简介
评论