获取JavaScript数组中的所有唯一值（去除重复项）

技术背景

在JavaScript开发中，经常会遇到需要从数组中去除重复项以获取唯一值的需求。随着JavaScript版本的不断更新，有多种方法可以实现这一功能，每种方法都有其特点和适用场景。

实现步骤

使用 filter 和 indexOf 方法（ES5）

function onlyUnique(value, index, array) {
    return array.indexOf(value) === index;
}

// 用法示例
var a = ['a', 1, 'a', 2, '1'];
var unique = a.filter(onlyUnique);
console.log(unique); // ['a', 1, 2, '1']

此方法利用 filter 方法遍历数组，并通过 indexOf 检查当前元素是否是第一次出现。如果是，则保留该元素。

使用 filter 和 indexOf 方法（ES6 箭头函数）

var myArray = ['a', 1, 'a', 2, '1'];
var unique = myArray.filter((value, index, array) => array.indexOf(value) === index);
console.log(unique); // ['a', 1, 2, '1']

这是 ES6 语法的简化版本，使用箭头函数使代码更简洁。

使用 Set 对象（ES6）

var myArray = ['a', 1, 'a', 2, '1'];
let unique = [...new Set(myArray)];
console.log(unique); // ['a', 1, 2, '1']

Set 是 ES6 引入的新对象，用于存储唯一的值。通过扩展运算符 ... 将 Set 转换为数组。

使用对象 { } 防止重复

function uniqueArray1(ar) {
    var j = {};
    ar.forEach(function (v) {
        j[v + '::' + typeof v] = v;
    });
    return Object.keys(j).map(function (v) {
        return j[v];
    });
}

该方法通过对象的属性唯一性来防止重复，最后将对象的属性值转换为数组。

使用辅助数组 [ ]

function uniqueArray2(arr) {
    var a = [];
    for (var i = 0, l = arr.length; i < l; i++)
        if (a.indexOf(arr[i]) === -1 && arr[i]!== '')
            a.push(arr[i]);
    return a;
}

遍历数组，将未在辅助数组中出现过的元素添加到辅助数组中。

核心代码

以下是几种方法的核心代码汇总：

// 使用 filter + indexOf
function uniqueArray3(a) {
    function onlyUnique(value, index, self) {
        return self.indexOf(value) === index;
    }
    var unique = a.filter(onlyUnique);
    return unique;
}

// 使用 ES6 Set
function uniqueArray4(a) {
    return [...new Set(a)];
}

最佳实践

• 对于现代浏览器：优先使用 Set 对象，因为它代码简洁，性能也较好。

const array = [1, 2, 2, 3, 4, 4];
const uniqueArray = [...new Set(array)];
console.log(uniqueArray); // [1, 2, 3, 4]

• 对于需要支持旧浏览器（如 IE9 以下）：可以使用 filter 和 indexOf 方法。

function getUniqueArray(arr) {
    return arr.filter((value, index, array) => array.indexOf(value) === index);
}
const oldBrowserArray = [1, 2, 2, 3, 4, 4];
const oldBrowserUniqueArray = getUniqueArray(oldBrowserArray);
console.log(oldBrowserUniqueArray); // [1, 2, 3, 4]

常见问题

数组元素为对象时如何去重

当数组元素为对象时，简单的 indexOf 方法无法正确判断对象是否重复。可以使用 findIndex 方法根据对象的特定属性来判断。

let array = [
    { name: '@deep-foundation/core', version: '0.0.2' },
    { name: '@deep-foundation/capacitor-device', version: '10.0.1' },
    { name: '@deep-foundation/capacitor-device', version: '10.0.2' },
];

function filterUniqueObjects(value, index, self) {
    return (
        self.findIndex(
            (obj) => obj.name === value.name
        ) === index
    );
};

let uniqueArray = array
   .reverse() // 如果需要保留最新的重复项
   .filter(filterUniqueObjects)
   .reverse(); // 恢复原始顺序

console.log(uniqueArray);

性能问题

不同方法的性能可能会有所不同，尤其是在处理大规模数组时。一般来说，使用 Set 对象的性能较好，但在某些特定场景下，使用对象 { } 防止重复的方法可能更优。可以通过性能测试工具（如 JSBench）来选择最适合的方法。