你值得拥有的七个JavaScript 数组去重方法

在JavaScript中,去除数组中重复元素的需求十分常见,下面详细介绍并演示七种不同的去重方法,每种方法都会附带必要的代码注释。

1. 使用ES6的Set结构

Set是一种集合数据结构,它不允许有重复的元素。通过扩展运算符...可以轻松地将Set转换回数组,从而达到去重的目的。

javascript 复制代码
// 原始数组
const arr = [1, 9, 8, 8, 7, 2, 5, 3, 3, 3, 2, 3, 1, 4, 5, 444, 55, 22];

// 定义去重函数
function removeDuplicatesWithSet(arr) {
    // 创建一个Set,自动去除重复元素
    const uniqueSet = new Set(arr);
    // 使用扩展运算符将Set转换为数组
    const uniqueArray = [...uniqueSet];
    return uniqueArray;
}

// 调用函数并打印结果
const result = removeDuplicatesWithSet(arr);
console.log(result);

2. 使用filter()方法

filter()方法会创建一个新数组,其结果是通过提供的函数实现数组中的每个元素的筛选。

javascript 复制代码
const arr = ['apple', 'apps', 'pear', 'apple', 'orange', 'apps'];

function removeDuplicatesWithFilter(arr) {
    // 使用filter方法,只有当元素的索引和元素首次出现的位置相同时,才保留该元素
    return arr.filter((item, index) => arr.indexOf(item) === index);
}

const result = removeDuplicatesWithFilter(arr);
console.log(result);

3. 使用for循环和indexOf()

这种方法遍历数组,使用indexOf()检查元素是否已经存在于结果数组中。

javascript 复制代码
const arr = [1, 9, 8, 8, 7, 2, 5, 3, 3, 3, 2, 3, 1, 4, 5, 444, 55, 22];

function removeDuplicatesWithFor(arr) {
    const uniqueArray = []; // 初始化一个空数组用于存放唯一元素
    for (let i = 0; i < arr.length; i++) {
        // 如果元素尚未在uniqueArray中出现,则添加之
        if (uniqueArray.indexOf(arr[i]) === -1) {
            uniqueArray.push(arr[i]);
        }
    }
    return uniqueArray;
}

const result = removeDuplicatesWithFor(arr);
console.log(result);

4. 双重for循环去重

尽管这种方法可以工作,但它效率低下,不推荐使用,尤其是对于大型数组。

javascript 复制代码
const arr = [1, 9, 8, 8, 7, 2, 5, 3, 3, 3, 2, 3, 1, 4, 5, 444, 55, 22];

function removeDuplicatesWithDoubleFor(arr) {
    for (let i = 0; i < arr.length; i++) {
        for (let j = i + 1; j < arr.length; j++) {
            // 当找到重复元素时,从数组中移除它
            if (arr[i] === arr[j]) {
                arr.splice(j, 1);
                j--; // 由于splice改变了数组长度,所以需要减一以保持正确的索引
            }
        }
    }
    return arr;
}

const result = removeDuplicatesWithDoubleFor(arr);
console.log(result);

5. 使用indexOf()与新数组

这种方法检查元素在原始数组中的首次出现位置,如果该位置与当前索引匹配,则添加到新数组中。

javascript 复制代码
const arr = [1, 9, 8, 8, 7, 2, 5, 3, 3, 3, 2, 3, 1, 4, 5, 444, 55, 22];

function removeDuplicatesWithIndexOf(arr) {
    const uniqueArray = [];
    for (let i = 0; i < arr.length; i++) {
        // 只有当元素首次出现时才添加到uniqueArray中
        if (arr.indexOf(arr[i]) === i) {
            uniqueArray.push(arr[i]);
        }
    }
    return uniqueArray;
}

const result = removeDuplicatesWithIndexOf(arr);
console.log(result);

6. 使用includes()方法

includes()方法检查数组中是否存在指定的值,如果存在则返回true,否则返回false

javascript 复制代码
const arr = [1, 9, 8, 8, 7, 2, 5, 3, 3, 3, 2, 3, 1, 4, 5, 444, 55, 22];

function removeDuplicatesWithIncludes(arr) {
    const uniqueArray = [];
    for (let i = 0; i < arr.length; i++) {
        // 如果uniqueArray中不包含当前元素,则添加之
        if (!uniqueArray.includes(arr[i])) {
            uniqueArray.push(arr[i]);
        }
    }
    return uniqueArray;
}

const result = removeDuplicatesWithIncludes(arr);
console.log(result);

7. 使用reduce()方法

reduce()方法对数组中的每个元素执行一个由您提供的reducer函数,将其结果汇总为单个返回值。

javascript 复制代码
const arr = [1, 9, 8, 8, 7, 2, 5, 3, 3, 3, 2, 3, 1, 4, 5, 444, 55, 22];

function removeDuplicatesWithReduce(arr) {
    // reducer函数,检查acc(累加器)中是否已经包含当前元素,如果没有,则添加
    return arr.reduce((acc, curr) => {
        if (!acc.includes(curr)) {
            acc.push(curr);
        }
        return acc;
    }, []);
}

const result = removeDuplicatesWithReduce(arr);
console.log(result);

每种方法都有其适用场景和性能特点,选择最适合的方法取决于具体的项目需求和环境。通常,使用ES6的Setfilter()方法是最佳选择,因为它们既简洁又高效。

相关推荐
咔叽布吉14 分钟前
【前端学习笔记】ES6 新特性
前端·笔记·学习
推开世界的门1 小时前
web 中 canvas 污染 以及解决方案
前端
星离~1 小时前
css—轮播图实现
前端·css
龙雨LongYu121 小时前
vue3+ts 我写了一个跟swagger.yml生成请求和响应实体(接口)
前端·vue.js·typescript
Stanford_11062 小时前
关于IDE的相关知识之一【使用技巧】
前端·ide·windows·微信小程序·微信公众平台·twitter·微信开放平台
_志哥_2 小时前
web开发环境下启动HTTPS服务访问
前端·javascript·https
爱健身的小刘同学2 小时前
安装 electron 依赖报错
前端·javascript·electron
耶啵奶膘2 小时前
uniapp+vue2+uview2.0导航栏组件二次封装
前端·javascript·uni-app
布兰妮甜2 小时前
如何使用 Tailwind CSS 构建响应式网站:详细指南
前端·css·tailwind css
MavenTalk2 小时前
前端技术选型之uniapp
android·前端·flutter·ios·uni-app·前端开发