本文介绍JavaScript中实现数组去重的四种常用方法。包括利用ES6 Set结合Array.from的最简方案,ES5时代的双重for循环配合splice的经典实现,基于indexOf判断首次出现索引的过滤逻辑,以及利用filter与indexOf组合的高效写法。每种方法均附带完整代码示例与原理说明。
1. 使用ES6的Set类数组进行去重
var arr = [1,2,2,3,3,4,4,1,5,6,6,5]
function unique (arr) {
return Array.from(new Set(arr))
}
console.log(unique(arr))
//[1,2,3,4,5,6]
ES6引入的Set数据结构具有自动去重的特性,其内部存储的值保证唯一。虽然Set并非标准数组类型,但可以通过Array.from()方法将其转换为真正的数组对象。在不考虑旧版浏览器兼容性的前提下,这是目前最简洁高效的去重方案。
2. 基于双重for循环的实现
var arr = [1,2,2,3,3,4,4,1,5,6,6,5];
function unique(arr) {
for (var i = 0; i < arr.length; i++) { // 首次遍历数组
for (var j = i + 1; j < arr.length; j++) { // 再次遍历数组
if (arr[i] == arr[j]) { // 判断连个值是否相等
arr.splice(j, 1); // 相等删除后者
j--;
}
}
}
return arr
}
console.log(unique(arr));
该方法结合了双层for循环与splice删除操作,是ES5环境中较为常见的去重手段。外层循环负责遍历数组中的每一项,内层循环则从当前外层项的下一项开始遍历,将后续元素与当前元素进行比较。一旦发现重复值,便使用splice方法将其从原数组中移除。需要注意的是,每次执行splice删除操作后,必须将内层循环变量j减1,以抵消因元素前移导致的索引变化,从而确保后续所有元素都能被正确遍历和比较。
3. 利用indexOf进行去重
var arr = [1,2,2,3,3,4,4,1,5,6,6,5];
function unique(arr) {
if (!Array.isArray(arr)) {
console.log('错误!')
return
}
var array = [];
for (var i = 0; i < arr.length; i++) { // 首次遍历数组
if (array.indexOf(arr[i]) === -1) { // 判断索引有没有等于
array.push(arr[i])
}
}
return array
}
console.log(unique(arr));
indexOf()方法用于检测数组中是否包含指定值:若存在则返回该值第一次出现的索引,若不存在则返回-1;当存在多个相同值时,它仅返回第一个匹配项的索引,不再继续向后查找。实现时,通过for循环遍历原数组,利用indexOf检查当前元素是否已存在于新数组newArr中。如果indexOf返回-1,说明该元素尚未加入新数组,则将其push进newArr;若已存在则跳过。最终返回包含去重后元素的新数组。
4. 结合filter方法实现
var arr = [1,2,2,3,3,4,4,1,5,6,6,5];
function unique(arr) {
return arr.filter( (item, index, arr) => {
//当前元素,在原始数组中的第一个索引==当前索引值,否则返回当前元素
return arr.indexOf(item) === index;
});
}
console.log(unique(arr));
此方案将filter与indexOf结合使用。filter遍历数组时,会获取当前元素的索引index以及元素本身item。通过判断当前遍历到的索引值是否等于indexOf(item)返回的索引值来筛选元素。如果两者相等,说明这是该值在数组中第一次出现的位置,予以保留;如果不等,说明当前item是后续出现的重复项,而indexOf返回的仍是首次出现的索引,因此该项会被过滤掉。这种逻辑自然实现了去重效果。
如需了解更多关于JS数组去重的技巧与实现,请参阅下方的相关链接。