【使用 JavaScript 的 reduce 方法实现数组去重】

最新推荐文章于 2025-03-20 14:30:08 发布

烂然星陈

最新推荐文章于 2025-03-20 14:30:08 发布

阅读量839

点赞数 23

分类专栏：前端小Tip 文章标签： javascript 开发语言 html 前端

本文链接：https://blog.youkuaiyun.com/2301_80064693/article/details/145262449

版权

前端小Tip 专栏收录该内容

5 篇文章

订阅专栏

使用 JavaScript 的 reduce 方法实现数组去重

使用 JavaScript 的 reduce 方法实现数组去重

使用 JavaScript 的 reduce 方法实现数组去重

引言
在 JavaScript 编程中，数组去重是一个常见的操作。虽然有多种方法可以实现数组去重，但使用reduce方法是一种既简洁又高效的方式。本文将介绍如何使用reduce方法来去除数组中的重复元素，并详细解释其背后的逻辑和技术原理。

一、技术背景

reduce方法是 JavaScript 数组对象的一个高阶方法，用于将数组中的所有元素归纳（或“减少”）为单个值。它通过一个累加器（accumulator）和数组中的每个元素（从左到右）来工作，最终返回一个单一的结果。

reduce方法的基本语法如下：

array.reduce(callback(accumulator, currentValue, currentIndex, array), initialValue)

callback：执行数组中每个值的函数，包含四个参数：
– accumulator：累加器累加回调的返回值。
– currentValue：数组中正在处理的当前元素。
– currentIndex（可选）：数组中正在处理的当前元素的索引。
– array（可选）：调用 reduce 方法的数组。
initialValue（可选）：作为第一次调用callback函数时的第一个参数的值。如果没有提供初始值，则将使用数组的第一个元素，并从第二个元素开始。

二、实现数组去重

下面是一个使用 reduce 方法实现数组去重的示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>reduce数组去重</title>
</head>
<body>
    <script>
        // 定义一个函数，使用reduce方法去除数组中的重复元素
        function uniqueArrayWithReduce(arr) {
            // 使用reduce方法遍历数组，accumulator作为累加器，initial value为[]
            return arr.reduce((accumulator, current) => {
                // 如果accumulator中不包含当前元素current，则将current添加到accumulator中
                if (!accumulator.includes(current)) {
                    accumulator.push(current);
                }
                // 返回累加器accumulator作为下一次迭代的初始值
                return accumulator;
            }, []); // 初始值是一个空数组
        }

        // 示例用法  
        const originalArray = [1, 2, 2, 3, 4, 4, 5, 5]; // 定义一个包含重复元素的数组
        const uniqueArray = uniqueArrayWithReduce(originalArray); // 调用函数去除重复元素
        console.log(originalArray); // 输出原始数组: [1, 2, 2, 3, 4, 4, 5, 5]
        console.log(uniqueArray); // 输出去重后的数组: [1, 2, 3, 4, 5]
        alert(originalArray + '\n' + uniqueArray)
    </script>
</body>
</html>