JavaScript 数组去重

在 JavaScript 中，如果想要实现数组去重（也就是删除数组中重复的元素），最常用的有以下 2 种方式。

使用 indexOf() 方法。
使用 ES6 的 Set。

使用 indexOf() 方法

在 JavaScript 中，我们可以使用 indexOf() 方法来用于找出指定元素在数组 “第一次” 出现时的下标。如果指定元素不存在，则返回 -1。

语法：

arr.indexOf(value, start)

说明：

indexOf() 方法可以接收以下 2 个参数。

value（必选）：表示想要查找的元素。
start（可选）：表示查找的开始下标，默认值为 0。

对于 start 参数，小伙伴们需要清楚以下几点。

当 start 省略时，表示搜索整个数组。
start 还可以是负数，比如 -1 表示最后一个元素。
不管 start 是正数还是负数，indexOf() 都是从左到右进行搜索。

注意: indexOf() 方法会严格区分大小写。

示例 1：使用 indexOf() 实现数组去重

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <script>
        // 定义一个去重函数
        function unique(arr) {
            const result = [];
            for (let i = 0; i < arr.length; i++) {
                if(result.indexOf(arr[i]) === -1) {
                    result.push(arr[i]);
                }
            }
            return result;
        }

        const arr = [1, 1, 2, "red", "red", true];
        console.log(unique(arr));
    </script>
</body>
</html>

运行结果如下。

[1, 2, "red", true]

分析：

ES5 的常规做法是先定义一个去重函数，在函数内部定义一个空数组 result 用来保存结果。接下来遍历传进来的数组，如果 result 中不存在当前遍历的元素，那么就往 result 添加这个元素。最后，返回这个 result。

使用 Set 对象（ES6+）

ES6 引入的 Set 对象，可以让我们存储任何类型的唯一值，无论是原始值或者是对象引用。

如果想要实现数组去重，我们可以将数组转换为 Set 对象，然后 Set 对象会保留唯一值。最后，我们将 Set 对象转换为数组。此时得到的数组就是去重后的数组了。

示例 2：Set 与 Array.from()

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <script>
        const arr = [1, 1, 2, "red", "red", true];
        const result = Array.from(new Set(arr));
        console.log(result);
    </script>
</body>
</html>

运行结果如下。

[1, 2, "red", true]

分析：

在这个例子中，首先使用 new Set(arr) 来将数组转换为 Set，由于 Set 的元素具有唯一性，此时 new Set(arr) 返回的结果是 Set {1, 2, 'red', true }。

但我们想要实现的是数组去重，最终得到的还是一个数组，因此最后还要使用 Array.from() 来将 Set 转换为数组。

示例 3：Set 与展开运算符

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <script>
        const arr = [1, 1, 2, "red", "red", true];
        const result = [...new Set(arr)];
        console.log(result);
    </script>
</body>
</html>

运行结果如下。

[1, 2, "red", true]

分析：

同样地，首先我们使用 new Set(arr) 来将数组转换为 Set。然后再使用展开运算符来将 Set 转换为数组。

提示: 在实际开发中，首选推荐使用 ES6 的 Set 对象来实现数组去重，因为它更加简单高效。