Javascript数组去重,你学会了吗?

开发 前端
Set 对象是一个较新的特性,在一些旧的浏览器中可能需要 polyfill 支持。而使用 filter() 或者 reduce() 可能更易于理解,并且不需要额外的 polyfill。

1. Javascript数组去重

在JavaScript中,有多种方法可以实现数组去重。

这里我将提供几种常见的方法来帮助你理解和实现。

1.1. 方法 1: 使用 Set 和 Spread Operator

function unique(array) {
    return [...new Set(array)];
}
let arr = [1, 2, 2, 3, 4, 4, 5];
console.log(unique(arr)); // 输出 [1, 2, 3, 4, 5]

1.2. 方法 2: 使用 filter()

这种方法是通过遍历数组,并且对于每一个元素检查它是否在之后的部分再次出现。

如果一个元素后面没有相同的元素,则保留该元素。

function unique(array) {
    return array.filter((item, index, arr) => arr.indexOf(item) === index);
}
let arr = [1, 2, 2, 3, 4, 4, 5];
console.log(unique(arr)); // 输出 [1, 2, 3, 4, 5]

1.3. 方法 3: 使用 reduce() 和 Set

function unique(array) {
    return Array.from(new Set(array));
    // 或者使用 reduce 实现
    // return array.reduce((acc, item) => acc.includes(item) ? acc : [...acc, item], []);
}
let arr = [1, 2, 2, 3, 4, 4, 5];
console.log(unique(arr)); // 输出 [1, 2, 3, 4, 5]

1.4. 方法 4: 使用 Object 或 Map

利用对象的键值对特性来存储数组中的元素,并以键的形式存储唯一的元素。

function unique(array) {
    let obj = {};
    let result = [];
    for (let i = 0; i < array.length; i++) {
        if (!obj[array[i]]) {
            obj[array[i]] = true;
            result.push(array[i]);
        }
    }
    return result;
}
let arr = [1, 2, 2, 3, 4, 4, 5];
console.log(unique(arr)); // 输出 [1, 2, 3, 4, 5]

每种方法都有其适用场景,选择哪种取决于你的具体需求以及浏览器或环境的支持情况。

例如,Set 对象是一个较新的特性,在一些旧的浏览器中可能需要 polyfill 支持。而使用 filter() 或者 reduce() 可能更易于理解,并且不需要额外的 polyfill。

责任编辑:武晓燕 来源: 前端爱好者
相关推荐

2024-02-29 09:57:08

Simhash内容应用

2022-12-08 10:49:43

2023-06-26 00:01:11

2024-09-04 08:40:51

2024-01-02 12:05:26

Java并发编程

2023-08-01 12:51:18

WebGPT机器学习模型

2024-02-04 00:00:00

Effect数据组件

2024-01-19 08:25:38

死锁Java通信

2023-07-26 13:11:21

ChatGPT平台工具

2023-01-10 08:43:15

定义DDD架构

2022-06-16 07:50:35

数据结构链表

2023-01-31 08:02:18

2023-10-06 14:49:21

SentinelHystrixtimeout

2023-05-05 06:54:07

MySQL数据查询

2024-03-06 08:28:16

设计模式Java

2023-08-26 21:34:28

Spring源码自定义

2023-03-26 22:31:29

2024-02-02 11:03:11

React数据Ref

2022-12-06 07:53:33

MySQL索引B+树

2023-06-26 13:08:52

GraphQL服务数据
点赞
收藏

51CTO技术栈公众号