当前位置：首页 > news >正文

大白话JavaScript实现一个函数，将数组中的元素进行去重

news 来源：原创 2025/8/25 16:05:34

大白话JavaScript实现一个函数，将数组中的元素进行去重

答题思路

要实现数组元素去重的函数，核心思路是遍历数组，然后判断每个元素是否已经在新数组里存在，如果不存在就添加进去，存在则跳过。下面会介绍几种不同的实现方法，每种方法都有其特点和适用场景。

使用 Set 对象：Set 是 ES6 引入的一种数据结构，它本身就不允许有重复的值，所以直接把数组转成 Set 再转回来就能去重。
使用 indexOf 方法：通过遍历数组，利用 indexOf 方法检查元素在数组中第一次出现的位置，如果和当前位置相同，说明不重复，添加到新数组。
使用 includes 方法：同样遍历数组，用 includes 方法判断新数组是否已经包含当前元素，不包含就添加。
双重循环：外层循环遍历原数组，内层循环检查当前元素是否已经在新数组中出现过，没出现过就添加。

回答范文

方法一：使用 `Set` 对象

// 定义一个名为 uniqueArray 的函数，接收一个数组 arr 作为参数
function uniqueArray(arr) {// 使用 new Set(arr) 将数组 arr 转换为一个 Set 对象，Set 对象会自动去除重复元素// 然后使用扩展运算符 ... 将 Set 对象转换回数组return [...new Set(arr)];
}// 定义一个测试数组，包含重复元素
let testArray = [1, 2, 2, 3, 4, 4, 5];
// 调用 uniqueArray 函数对测试数组进行去重，并将结果存储在 result 变量中
let result = uniqueArray(testArray);
// 打印去重后的数组
console.log(result);

方法二：使用 `indexOf` 方法

// 定义一个名为 uniqueArray 的函数，接收一个数组 arr 作为参数
function uniqueArray(arr) {// 创建一个空数组 newArr，用于存储去重后的元素let newArr = [];// 使用 for 循环遍历数组 arr 中的每个元素for (let i = 0; i < arr.length; i++) {// 使用 indexOf 方法检查元素 arr[i] 在新数组 newArr 中第一次出现的位置// 如果返回 -1，表示该元素在 newArr 中不存在if (newArr.indexOf(arr[i]) === -1) {// 将不存在的元素添加到新数组 newArr 中newArr.push(arr[i]);}}// 返回去重后的新数组return newArr;
}// 定义一个测试数组，包含重复元素
let testArray = [1, 2, 2, 3, 4, 4, 5];
// 调用 uniqueArray 函数对测试数组进行去重，并将结果存储在 result 变量中
let result = uniqueArray(testArray);
// 打印去重后的数组
console.log(result);

方法三：使用 `includes` 方法

// 定义一个名为 uniqueArray 的函数，接收一个数组 arr 作为参数
function uniqueArray(arr) {// 创建一个空数组 newArr，用于存储去重后的元素let newArr = [];// 使用 for 循环遍历数组 arr 中的每个元素for (let i = 0; i < arr.length; i++) {// 使用 includes 方法检查新数组 newArr 是否包含元素 arr[i]// 如果不包含，返回 false，取反后为 trueif (!newArr.includes(arr[i])) {// 将不包含的元素添加到新数组 newArr 中newArr.push(arr[i]);}}// 返回去重后的新数组return newArr;
}// 定义一个测试数组，包含重复元素
let testArray = [1, 2, 2, 3, 4, 4, 5];
// 调用 uniqueArray 函数对测试数组进行去重，并将结果存储在 result 变量中
let result = uniqueArray(testArray);
// 打印去重后的数组
console.log(result);

方法四：双重循环

// 定义一个名为 uniqueArray 的函数，接收一个数组 arr 作为参数
function uniqueArray(arr) {// 创建一个空数组 newArr，用于存储去重后的元素let newArr = [];// 外层 for 循环遍历数组 arr 中的每个元素for (let i = 0; i < arr.length; i++) {// 定义一个布尔变量 isDuplicate，用于标记元素是否重复，初始值为 falselet isDuplicate = false;// 内层 for 循环遍历新数组 newArr 中的每个元素for (let j = 0; j < newArr.length; j++) {// 如果当前元素 arr[i] 等于新数组 newArr 中的某个元素 newArr[j]if (arr[i] === newArr[j]) {// 将 isDuplicate 标记为 true，表示该元素重复isDuplicate = true;// 一旦发现重复，跳出内层循环break;}}// 如果 isDuplicate 为 false，说明该元素不重复if (!isDuplicate) {// 将不重复的元素添加到新数组 newArr 中newArr.push(arr[i]);}}// 返回去重后的新数组return newArr;
}// 定义一个测试数组，包含重复元素
let testArray = [1, 2, 2, 3, 4, 4, 5];
// 调用 uniqueArray 函数对测试数组进行去重，并将结果存储在 result 变量中
let result = uniqueArray(testArray);
// 打印去重后的数组
console.log(result);

这几种方法都能实现数组去重，使用 Set 对象的方法代码最简洁，性能也较好；indexOf 和 includes 方法比较直观；双重循环方法逻辑简单，但性能相对较低，适合处理小规模数组。

其他方法
以下再为你介绍几种 JavaScript 实现数组去重的方法，并且会逐行添加注释。

方法一：使用 `filter` 和 `Object` 结合

// 定义一个名为 uniqueArray 的函数，用于对数组进行去重操作
function uniqueArray(arr) {// 创建一个空对象 obj，用于存储已经出现过的元素const obj = {};// 使用 filter 方法过滤数组中的元素return arr.filter((item) => {// 判断对象 obj 中是否已经存在当前元素 item 作为属性// 如果不存在，将该元素作为属性添加到对象 obj 中，并将属性值设为 true// 同时返回 true，表示该元素会被保留在过滤后的数组中// 如果已经存在，返回 false，表示该元素会被过滤掉return obj.hasOwnProperty(item) ? false : (obj[item] = true);});
}// 定义一个包含重复元素的测试数组
const testArray = [1, 2, 2, 3, 4, 4, 5];
// 调用 uniqueArray 函数对测试数组进行去重
const result = uniqueArray(testArray);
// 打印去重后的数组
console.log(result);

解释：利用 Object 的属性不能重复这一特性，通过 filter 方法遍历数组。对于每个元素，检查它是否已经作为对象的属性存在。如果不存在，就把它添加为对象的属性，同时保留该元素；如果已经存在，就过滤掉该元素。

方法二：使用 `reduce` 方法

// 定义一个名为 uniqueArray 的函数，接收一个数组 arr 作为参数
function uniqueArray(arr) {// 使用 reduce 方法对数组进行累积操作return arr.reduce((acc, current) => {// 检查累积数组 acc 中是否包含当前元素 currentif (!acc.includes(current)) {// 如果不包含，将当前元素添加到累积数组中acc.push(current);}// 返回累积数组return acc;}, []);
}// 定义一个包含重复元素的测试数组
const testArray = [1, 2, 2, 3, 4, 4, 5];
// 调用 uniqueArray 函数对测试数组进行去重
const result = uniqueArray(testArray);
// 打印去重后的数组
console.log(result);

解释：reduce 方法会遍历数组，将每个元素与一个累积数组进行比较。如果累积数组中不包含当前元素，就把当前元素添加到累积数组中，最后返回这个累积数组，也就是去重后的数组。

方法三：使用 `Map` 对象

// 定义一个名为 uniqueArray 的函数，用于对数组进行去重操作
function uniqueArray(arr) {// 创建一个新的 Map 对象 map，用于存储已经出现过的元素const map = new Map();// 创建一个空数组 result，用于存储去重后的元素const result = [];// 遍历数组 arr 中的每个元素for (const item of arr) {// 检查 Map 对象 map 中是否已经存在当前元素 item 作为键if (!map.has(item)) {// 如果不存在，将该元素作为键添加到 Map 对象中，并将值设为 truemap.set(item, true);// 同时将该元素添加到结果数组 result 中result.push(item);}}// 返回去重后的结果数组return result;
}// 定义一个包含重复元素的测试数组
const testArray = [1, 2, 2, 3, 4, 4, 5];
// 调用 uniqueArray 函数对测试数组进行去重
const result = uniqueArray(testArray);
// 打印去重后的数组
console.log(result);

解释：Map 对象可以存储键值对，并且键是唯一的。我们遍历数组，对于每个元素，检查它是否已经作为 Map 的键存在。如果不存在，就把它添加到 Map 中，同时添加到结果数组里；如果已经存在，就跳过该元素。