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

大白话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，取反后为 true
        if (!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，用于标记元素是否重复，初始值为 false
        let 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 中是否包含当前元素 current
        if (!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 对象中，并将值设为 true
            map.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 中，同时添加到结果数组里；如果已经存在，就跳过该元素。