ES5和ES6如何实现数组去重

在JavaScript中，数组去重是一个常见的需求。无论是处理用户输入、API返回的数据，还是在数据处理过程中，我们经常需要去除数组中的重复元素。本文将介绍如何使用ES5和ES6的方法来实现数组去重。

1. ES5实现数组去重

在ES5中，我们可以使用多种方法来实现数组去重。以下是几种常见的方法：

1.1 使用双重循环

这是最基础的方法，通过双重循环遍历数组，检查每个元素是否已经存在于新数组中。

function unique(arr) {
    var result = [];
    for (var i = 0; i < arr.length; i++) {
        var isDuplicate = false;
        for (var j = 0; j < result.length; j++) {
            if (arr[i] === result[j]) {
                isDuplicate = true;
                break;
            }
        }
        if (!isDuplicate) {
            result.push(arr[i]);
        }
    }
    return result;
}

var arr = [1, 2, 2, 3, 4, 4, 5];
console.log(unique(arr)); // [1, 2, 3, 4, 5]

1.2 使用indexOf方法

indexOf方法可以检查元素是否存在于数组中，如果不存在则返回-1。我们可以利用这一点来实现去重。

function unique(arr) {
    var result = [];
    for (var i = 0; i < arr.length; i++) {
        if (result.indexOf(arr[i]) === -1) {
            result.push(arr[i]);
        }
    }
    return result;
}

var arr = [1, 2, 2, 3, 4, 4, 5];
console.log(unique(arr)); // [1, 2, 3, 4, 5]

1.3 使用filter方法

filter方法可以创建一个新数组，其中包含通过所提供函数实现的测试的所有元素。我们可以结合indexOf方法来实现去重。

function unique(arr) {
    return arr.filter(function(item, index, array) {
        return array.indexOf(item) === index;
    });
}

var arr = [1, 2, 2, 3, 4, 4, 5];
console.log(unique(arr)); // [1, 2, 3, 4, 5]

1.4 使用对象属性

我们可以利用对象的属性名不能重复的特性来实现去重。

function unique(arr) {
    var obj = {};
    var result = [];
    for (var i = 0; i < arr.length; i++) {
        if (!obj[arr[i]]) {
            obj[arr[i]] = true;
            result.push(arr[i]);
        }
    }
    return result;
}

var arr = [1, 2, 2, 3, 4, 4, 5];
console.log(unique(arr)); // [1, 2, 3, 4, 5]

2. ES6实现数组去重

ES6引入了许多新特性，使得数组去重的实现更加简洁和高效。以下是几种常见的方法：

2.1 使用Set数据结构

Set是ES6中引入的一种新的数据结构，它类似于数组，但成员的值都是唯一的，没有重复的值。我们可以利用Set来实现数组去重。

function unique(arr) {
    return [...new Set(arr)];
}

var arr = [1, 2, 2, 3, 4, 4, 5];
console.log(unique(arr)); // [1, 2, 3, 4, 5]

2.2 使用Array.from方法

Array.from方法可以将一个类数组对象或可迭代对象转换为数组。我们可以结合Set来实现去重。

function unique(arr) {
    return Array.from(new Set(arr));
}

var arr = [1, 2, 2, 3, 4, 4, 5];
console.log(unique(arr)); // [1, 2, 3, 4, 5]

2.3 使用reduce方法

reduce方法可以对数组中的每个元素执行一个由您提供的reducer函数（升序执行），将其结果汇总为单个返回值。我们可以利用reduce方法来实现去重。

function unique(arr) {
    return arr.reduce((prev, curr) => {
        if (!prev.includes(curr)) {
            prev.push(curr);
        }
        return prev;
    }, []);
}

var arr = [1, 2, 2, 3, 4, 4, 5];
console.log(unique(arr)); // [1, 2, 3, 4, 5]

2.4 使用Map数据结构

Map是ES6中引入的另一种新的数据结构，它类似于对象，但键可以是任意类型。我们可以利用Map来实现去重。

function unique(arr) {
    const map = new Map();
    return arr.filter(item => !map.has(item) && map.set(item, true));
}

var arr = [1, 2, 2, 3, 4, 4, 5];
console.log(unique(arr)); // [1, 2, 3, 4, 5]

3. 总结

在ES5中，我们可以使用双重循环、indexOf、filter、对象属性等方法来实现数组去重。这些方法虽然有效，但在处理大数据量时可能会影响性能。

在ES6中，我们可以使用Set、Array.from、reduce、Map等新特性来实现数组去重。这些方法不仅代码简洁，而且性能更优，特别是在处理大数据量时表现尤为突出。

根据实际需求和项目环境，选择合适的方法来实现数组去重，可以提高代码的可读性和执行效率。