JavaScript中合并两个数组并去重的方法

技术背景

在JavaScript开发中，经常会遇到需要合并两个数组并去除重复元素的场景。例如在处理用户输入、数据筛选或合并多个数据源时，都可能会用到数组的合并与去重操作。掌握这些方法能够提高代码的效率和可维护性。

实现步骤

1. 简单合并数组（不考虑去重）

• ES5版本：使用Array.concat方法。

var array1 = ["Vijendra", "Singh"];
var array2 = ["Singh", "Shakya"];
array1 = array1.concat(array2);
console.log(array1);

• ES6版本：使用扩展运算符...。

const array1 = ["Vijendra", "Singh"];
const array2 = ["Singh", "Shakya"];
const array3 = [...array1, ...array2];

2. 合并数组并去重

2.1 使用Set对象

const array1 = ["Vijendra", "Singh"];
const array2 = ["Singh", "Shakya"];
const array3 = [...new Set([...array1, ...array2])];
console.log(array3); 

2.2 手动去重

function arrayUnique(array) {
    var a = array.concat();
    for(var i = 0; i < a.length; ++i) {
        for(var j = i + 1; j < a.length; ++j) {
            if(a[i] === a[j])
                a.splice(j--, 1);
        }
    }
    return a;
}
var array1 = ["Vijendra", "Singh"];
var array2 = ["Singh", "Shakya"];
var array3 = arrayUnique(array1.concat(array2));

2.3 使用filter和indexOf方法

var a = [1, 2, 3], b = [101, 2, 1, 10];
var c = a.concat(b);
var d = c.filter((item, pos) => c.indexOf(item) === pos);
console.log(d); 

2.4 使用lodash库的union方法

console.log(_.union([1, 2, 3], [101, 2, 1, 10], [2, 1]));

3. 处理对象数组的合并与去重

var arr1 = [ {a: 1}, {a: 2}, {a: 3} ];
var arr2 = [ {a: 1}, {a: 2}, {a: 4} ];
var arr3 = arr1.concat(arr2.filter( ({a}) => !arr1.find(f => f.a == a) ));
console.log(arr3); 

核心代码

使用Set实现数组合并与去重

const mergeAndDedupe = (arr1, arr2) => {
    return [...new Set([...arr1, ...arr2])];
};
const array1 = [1, 2, 3];
const array2 = [3, 4, 5];
const result = mergeAndDedupe(array1, array2);
console.log(result); 

使用filter和includes方法实现数组合并与去重

const mergeAndDedupe = (arr1, arr2) => {
    return arr1.concat(arr2.filter(item => !arr1.includes(item)));
};
const array1 = [1, 2, 3];
const array2 = [3, 4, 5];
const result = mergeAndDedupe(array1, array2);
console.log(result); 

最佳实践

• 性能考虑：当数组元素较少时，使用Set对象的方法简单且性能较好；当数组元素较多时，使用filter和includes方法可能会更高效。
• 代码可读性：使用Set对象的方法代码简洁，易于理解；手动去重的方法代码复杂，但可以根据具体需求进行定制。
• 兼容性：如果需要兼容旧版本浏览器，可以使用Array.concat和手动去重的方法。

常见问题

1. 性能问题

当数组元素较多时，使用嵌套循环的手动去重方法性能会较差。可以考虑使用Set对象或filter和includes方法来提高性能。

2. 兼容性问题

Set对象和扩展运算符...是ES6的特性，在旧版本浏览器中可能不支持。可以使用Array.concat和手动去重的方法来解决兼容性问题。

3. 对象数组去重问题

对象数组去重需要根据对象的某个属性进行比较。可以使用find和filter方法来实现。