如何在 JavaScript 中获取两个数组之间的差异？

Question

有没有办法在 JavaScript 中返回两个数组之间的差异？

例如：

var a1 = ['a', 'b'];
var a2 = ['a', 'b', 'c', 'd'];

// need ["c", "d"]

Answer 1

使用 ES7 有更好的方法：

---

交叉口

 let intersection = arr1.filter(x => arr2.includes(x));

对于[1,2,3] [2,3]，它将产生[2,3]。另一方面，[1,2,3] [2,3,5] 将返回相同的内容。

---

区别

let difference = arr1.filter(x => !arr2.includes(x));

对于[1,2,3] [2,3]，它将产生[1]。另一方面，[1,2,3] [2,3,5] 将返回相同的内容。

---

对于对称差异，您可以：

let difference = arr1
                 .filter(x => !arr2.includes(x))
                 .concat(arr2.filter(x => !arr1.includes(x)));

这样，您将得到一个数组，其中包含 arr1 中所有不在 arr2 中的元素，反之亦然

正如@Joshaven Potter 在他的回答中指出的那样，您可以将其添加到 Array.prototype 中，这样就可以像这样使用它：

Array.prototype.diff = function(arr2) { return this.filter(x => !arr2.includes(x)); }
[1, 2, 3].diff([2, 3])

Answer 2

Array.prototype.diff = function(a) {
    return this.filter(function(i) {return a.indexOf(i) < 0;});
};

//////////////
// Examples //
//////////////

const dif1 = [1,2,3,4,5,6].diff( [3,4,5] );  
console.log(dif1); // => [1, 2, 6]


const dif2 = ["test1", "test2","test3","test4","test5","test6"].diff(["test1","test2","test3","test4"]);  
console.log(dif2); // => ["test5", "test6"]

注意.indexOf()和.filter()在IE9之前不可用。

Answer 3

这个答案是 2009 年写的，所以有点过时了，对于理解这个问题也很有教育意义。我今天使用的最佳解决方案是

let difference = arr1.filter(x => !arr2.includes(x));

（此处感谢其他作者）

我假设您正在比较一个普通数组。如果不是，则需要将 for 循环更改为 for .. in 循环。

function arr_diff (a1, a2) {

    var a = [], diff = [];

    for (var i = 0; i < a1.length; i++) {
        a[a1[i]] = true;
    }

    for (var i = 0; i < a2.length; i++) {
        if (a[a2[i]]) {
            delete a[a2[i]];
        } else {
            a[a2[i]] = true;
        }
    }

    for (var k in a) {
        diff.push(k);
    }

    return diff;
}

console.log(arr_diff(['a', 'b'], ['a', 'b', 'c', 'd']));
console.log(arr_diff("abcd", "abcde"));
console.log(arr_diff("zxc", "zxc"));

Answer 4

这是迄今为止使用 jQuery 获得所需结果的最简单方法：

var diff = $(old_array).not(new_array).get();

diff 现在包含 old_array 中但不在 new_array 中的内容

Answer 5

The difference method in Underscore（或其替代品，Lo-Dash）也可以做到这一点：

(R)eturns the values from array that are not present in the other arrays

_.difference([1, 2, 3, 4, 5], [5, 2, 10]);
=> [1, 3, 4]

与任何下划线函数一样，您也可以以更面向对象的风格使用它：

_([1, 2, 3, 4, 5]).difference([5, 2, 10]);

Answer 6

纯 JavaScript

“差异”有两种可能的解释。我会让你选择你想要的。假设你有：

var a1 = ['a', 'b'     ];
var a2 = [     'b', 'c'];

1. 如果你想得到['a']，使用这个函数：

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

2. 如果你想得到['a', 'c']（所有元素都包含在其中一个 a1 或a2 中，但不是两者兼有——所谓对称差异 )，使用这个函数：

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

Lodash / 下划线

如果你使用的是lodash，你可以使用_.difference(a1, a2)（上面的案例1）或者_.xor(a1, a2)（案例2）。

如果您使用的是 Underscore.js，您可以使用 _.difference(a1, a2) 函数来处理案例 1。

ES6 Set，用于非常大的数组

上面的代码适用于所有浏览器。但是，对于超过 10,000 个项目的大型数组，它变得非常慢，因为它具有 O(n²) 复杂度。在许多现代浏览器上，我们可以利用 ES6 Set 对象来加快速度。 Lodash 在可用时自动使用Set。如果您不使用 lodash，请使用以下实现，灵感来自 Axel Rauschmayer's blog post：

function difference(a1, a2) {
  var a2Set = new Set(a2);
  return a1.filter(function(x) { return !a2Set.has(x); });
}

function symmetricDifference(a1, a2) {
  return difference(a1, a2).concat(difference(a2, a1));
}

注意事项

如果您关心-0, +0, NaN 或稀疏数组，所有示例的行为可能会令人惊讶或不明显。 （对于大多数用途，这无关紧要。）

Answer 7

ES6 中更简洁的方法是以下解决方案。

var a1 = ['a', 'b'];
var a2 = ['a', 'b', 'c', 'd'];

区别

a2.filter(d => !a1.includes(d)) // gives ["c", "d"]

交叉口

a2.filter(d => a1.includes(d)) // gives ["a", "b"]

析取联合（对称差分）

[ ...a2.filter(d => !a1.includes(d)),
  ...a1.filter(d => !a2.includes(d)) ]

Answer 8

要获得对称差异，您需要以两种方式比较数组（或者在多个数组的情况下以所有方式比较）

---

ES7 (ECMAScript 2016)

// diff between just two arrays:
function arrayDiff(a, b) {
    return [
        ...a.filter(x => !b.includes(x)),
        ...b.filter(x => !a.includes(x))
    ];
}

// diff between multiple arrays:
function arrayDiff(...arrays) {
    return [].concat(...arrays.map( (arr, i) => {
        const others = arrays.slice(0);
        others.splice(i, 1);
        const unique = [...new Set([].concat(...others))];
        return arr.filter(x => !unique.includes(x));
    }));
}

---

ES6 (ECMAScript 2015)

// diff between just two arrays:
function arrayDiff(a, b) {
    return [
        ...a.filter(x => b.indexOf(x) === -1),
        ...b.filter(x => a.indexOf(x) === -1)
    ];
}

// diff between multiple arrays:
function arrayDiff(...arrays) {
    return [].concat(...arrays.map( (arr, i) => {
        const others = arrays.slice(0);
        others.splice(i, 1);
        const unique = [...new Set([].concat(...others))];
        return arr.filter(x => unique.indexOf(x) === -1);
    }));
}

---

ES5 (ECMAScript 5.1)

// diff between just two arrays:
function arrayDiff(a, b) {
    var arrays = Array.prototype.slice.call(arguments);
    var diff = [];

    arrays.forEach(function(arr, i) {
        var other = i === 1 ? a : b;
        arr.forEach(function(x) {
            if (other.indexOf(x) === -1) {
                diff.push(x);
            }
        });
    })

    return diff;
}

// diff between multiple arrays:
function arrayDiff() {
    var arrays = Array.prototype.slice.call(arguments);
    var diff = [];

    arrays.forEach(function(arr, i) {
        var others = arrays.slice(0);
        others.splice(i, 1);
        var otherValues = Array.prototype.concat.apply([], others);
        var unique = otherValues.filter(function (x, j) { 
            return otherValues.indexOf(x) === j; 
        });
        diff = diff.concat(arr.filter(x => unique.indexOf(x) === -1));
    });
    return diff;
}

示例：

// diff between two arrays:
const a = ['a', 'd', 'e'];
const b = ['a', 'b', 'c', 'd'];
arrayDiff(a, b); // (3) ["e", "b", "c"]

// diff between multiple arrays
const a = ['b', 'c', 'd', 'e', 'g'];
const b = ['a', 'b'];
const c = ['a', 'e', 'f'];
arrayDiff(a, b, c); // (4) ["c", "d", "g", "f"]

---

对象数组的区别

function arrayDiffByKey(key, ...arrays) {
    return [].concat(...arrays.map( (arr, i) => {
        const others = arrays.slice(0);
        others.splice(i, 1);
        const unique = [...new Set([].concat(...others))];
        return arr.filter( x =>
            !unique.some(y => x[key] === y[key])
        );
    }));
}

示例：

const a = [{k:1}, {k:2}, {k:3}];
const b = [{k:1}, {k:4}, {k:5}, {k:6}];
const c = [{k:3}, {k:5}, {k:7}];
arrayDiffByKey('k', a, b, c); // (4) [{k:2}, {k:4}, {k:6}, {k:7}]

Answer 9

在这种情况下，您可以使用Set。它针对这种操作（联合、交叉、差异）进行了优化。

确保它适用于您的案例，一旦它不允许重复。

var a = new JS.Set([1,2,3,4,5,6,7,8,9]);
var b = new JS.Set([2,4,6,8]);

a.difference(b)
// -> Set{1,3,5,7,9}

Answer 10

function diff(a1, a2) {
  return a1.concat(a2).filter(function(val, index, arr){
    return arr.indexOf(val) === arr.lastIndexOf(val);
  });
}

合并两个数组，唯一值只会出现一次，因此 indexOf() 将与 lastIndexOf() 相同。

Answer 11

随着带有集合和 splat 运算符的 ES6 的到来（当时仅在 Firefox 中有效，请查看compatibility table），您可以编写以下一行：

var a = ['a', 'b', 'c', 'd'];
var b = ['a', 'b'];
var b1 = new Set(b);
var difference = [...new Set(a.filter(x => !b1.has(x)))];

这将导致[ "c", "d" ]。

Answer 12

要从另一个数组中减去一个数组，只需使用下面的 sn-p：

var a1 = ['1','2','3','4','6'];
var a2 = ['3','4','5'];

var items = new Array();

items = jQuery.grep(a1,function (item) {
    return jQuery.inArray(item, a2) < 0;
});

它将返回 ['1,'2','6'] ，它们是第一个数组中不存在的第二个数组的项。

因此，根据您的问题示例，以下代码是确切的解决方案：

var array1 = ["test1", "test2","test3", "test4"];
var array2 = ["test1", "test2","test3","test4", "test5", "test6"];

var _array = new Array();

_array = jQuery.grep(array2, function (item) {
     return jQuery.inArray(item, array1) < 0;
});

Answer 13

解决问题的另一种方法

function diffArray(arr1, arr2) {
    return arr1.concat(arr2).filter(function (val) {
        if (!(arr1.includes(val) && arr2.includes(val)))
            return val;
    });
}

diffArray([1, 2, 3, 7], [3, 2, 1, 4, 5]);    // return [7, 4, 5]

另外，你可以使用箭头函数语法：

const diffArray = (arr1, arr2) => arr1.concat(arr2)
    .filter(val => !(arr1.includes(val) && arr2.includes(val)));

diffArray([1, 2, 3, 7], [3, 2, 1, 4, 5]);    // return [7, 4, 5]

Answer 14

ES2015 的函数式方法

计算两个数组之间的difference 是Set 操作之一。该术语已经表明应使用本机 Set 类型，以提高查找速度。无论如何，当您计算两组之间的差异时，会出现三种排列：

[+left difference] [-intersection] [-right difference]
[-left difference] [-intersection] [+right difference]
[+left difference] [-intersection] [+right difference]

这是一个反映这些排列的函数式解决方案。

左difference：

// small, reusable auxiliary functions

const apply = f => x => f(x);
const flip = f => y => x => f(x) (y);
const createSet = xs => new Set(xs);
const filter = f => xs => xs.filter(apply(f));


// left difference

const differencel = xs => ys => {
  const zs = createSet(ys);
  return filter(x => zs.has(x)
     ? false
     : true
  ) (xs);
};


// mock data

const xs = [1,2,2,3,4,5];
const ys = [0,1,2,3,3,3,6,7,8,9];


// run the computation

console.log( differencel(xs) (ys) );

对difference：

differencer 是微不足道的。它只是带有翻转参数的differencel。为方便起见，您可以编写一个函数：const differencer = flip(differencel)。就是这样！

对称difference:

现在我们有了左右一个，实现对称difference 也变得很简单：

// small, reusable auxiliary functions

const apply = f => x => f(x);
const flip = f => y => x => f(x) (y);
const concat = y => xs => xs.concat(y);
const createSet = xs => new Set(xs);
const filter = f => xs => xs.filter(apply(f));


// left difference

const differencel = xs => ys => {
  const zs = createSet(ys);
  return filter(x => zs.has(x)
     ? false
     : true
  ) (xs);
};


// symmetric difference

const difference = ys => xs =>
 concat(differencel(xs) (ys)) (flip(differencel) (xs) (ys));

// mock data

const xs = [1,2,2,3,4,5];
const ys = [0,1,2,3,3,3,6,7,8,9];


// run the computation

console.log( difference(xs) (ys) );

我想这个例子是了解函数式编程意味着什么的一个很好的起点：

使用可以以多种不同方式组合在一起的构建块进行编程。

Answer 15

一个衬垫

const unique = (a) => [...new Set(a)];
const uniqueBy = (x,f)=>Object.values(x.reduce((a,b)=>((a[f(b)]=b),a),{}));
const intersection = (a, b) => a.filter((v) => b.includes(v));
const diff = (a, b) => a.filter((v) => !b.includes(v));
const symDiff = (a, b) => diff(a, b).concat(diff(b, a));
const union = (a, b) => diff(a, b).concat(b);

const a = unique([1, 2, 3, 4, 5, 5]);
console.log(a);
const b = [4, 5, 6, 7, 8];

console.log(intersection(a, b), diff(a, b), symDiff(a, b), union(a, b));

console.log(uniqueBy(
  [
{ id: 1, name: "abc" },
{ id: 2, name: "xyz" },
{ id: 1, name: "abc" },
  ],
  (v) => v.id
));

const intersectionBy = (a, b, f) => a.filter((v) => b.some((u) => f(v, u)));

console.log(intersectionBy(
 [
  { id: 1, name: "abc" },
  { id: 2, name: "xyz" },
 ],
 [
  { id: 1, name: "abc" },
  { id: 3, name: "pqr" },
 ],
 (v, u) => v.id === u.id
));

const diffBy = (a, b, f) => a.filter((v) => !b.some((u) => f(v, u)));

console.log(diffBy(
 [
  { id: 1, name: "abc" },
  { id: 2, name: "xyz" },
 ],
 [
  { id: 1, name: "abc" },
  { id: 3, name: "pqr" },
 ],
 (v, u) => v.id === u.id
));

Answer 16

使用indexOf() 的解决方案适用于小型数组，但随着它们长度的增长，算法的性能接近O(n^2)。这是一个解决方案，通过使用对象作为关联数组将数组条目存储为键，对于非常大的数组表现更好；它还自动消除重复条目，但仅适用于字符串值（或可以安全存储为字符串的值）：

function arrayDiff(a1, a2) {
  var o1={}, o2={}, diff=[], i, len, k;
  for (i=0, len=a1.length; i<len; i++) { o1[a1[i]] = true; }
  for (i=0, len=a2.length; i<len; i++) { o2[a2[i]] = true; }
  for (k in o1) { if (!(k in o2)) { diff.push(k); } }
  for (k in o2) { if (!(k in o1)) { diff.push(k); } }
  return diff;
}

var a1 = ['a', 'b'];
var a2 = ['a', 'b', 'c', 'd'];
arrayDiff(a1, a2); // => ['c', 'd']
arrayDiff(a2, a1); // => ['c', 'd']

Answer 17

Joshaven Potter 的上述回答很棒。但它返回数组 B 中不在数组 C 中的元素，但反之则不然。例如，如果var a=[1,2,3,4,5,6].diff( [3,4,5,7]);，那么它将输出：==> [1,2,6]，但不是 [1,2,6,7]，这是两者之间的实际区别。您仍然可以使用上面的 Potter 代码，但也只需向后重做一次比较：

Array.prototype.diff = function(a) {
    return this.filter(function(i) {return !(a.indexOf(i) > -1);});
};

////////////////////  
// Examples  
////////////////////

var a=[1,2,3,4,5,6].diff( [3,4,5,7]);
var b=[3,4,5,7].diff([1,2,3,4,5,6]);
var c=a.concat(b);
console.log(c);

这应该输出：[ 1, 2, 6, 7 ]

Answer 18

使用 JavaScript 过滤功能的非常简单的解决方案：

var a1 = ['a', 'b'];
var a2 = ['a', 'b', 'c', 'd'];

function diffArray(arr1, arr2) {
  var newArr = [];
  var myArr = arr1.concat(arr2);
  
    newArr = myArr.filter(function(item){
      return arr2.indexOf(item) < 0 || arr1.indexOf(item) < 0;
    });
   alert(newArr);
}

diffArray(a1, a2);

Answer 19

Array.prototype.difference = function(e) {
    return this.filter(function(i) {return e.indexOf(i) < 0;});
};

eg:- 

[1,2,3,4,5,6,7].difference( [3,4,5] );  
 => [1, 2, 6 , 7]

Answer 20

这个怎么样：

Array.prototype.contains = function(needle){
  for (var i=0; i<this.length; i++)
    if (this[i] == needle) return true;

  return false;
} 

Array.prototype.diff = function(compare) {
    return this.filter(function(elem) {return !compare.contains(elem);})
}

var a = new Array(1,4,7, 9);
var b = new Array(4, 8, 7);
alert(a.diff(b));

所以这样你就可以通过array1.diff(array2) 来获得它们的差异（虽然算法的时间复杂度很可怕 - 我相信 O(array1.length x array2.length)）

Answer 21

function diffArray(arr1, arr2) {
  var newArr = arr1.concat(arr2);
  return newArr.filter(function(i){
    return newArr.indexOf(i) == newArr.lastIndexOf(i);
  });
}

这对我有用

Answer 22

使用http://phrogz.net/JS/ArraySetMath.js，您可以：

var array1 = ["test1", "test2","test3", "test4"];
var array2 = ["test1", "test2","test3","test4", "test5", "test6"];

var array3 = array2.subtract( array1 );
// ["test5", "test6"]

var array4 = array1.exclusion( array2 );
// ["test5", "test6"]

Answer 23

• 纯 JavaScript 解决方案（无库）
• 兼容旧版浏览器（不使用filter）
• O(n^2)
• 可选的fn回调参数，可让您指定如何比较数组项

function diff(a, b, fn){
    var max = Math.max(a.length, b.length);
        d = [];
    fn = typeof fn === 'function' ? fn : false
    for(var i=0; i < max; i++){
        var ac = i < a.length ? a[i] : undefined
            bc = i < b.length ? b[i] : undefined;
        for(var k=0; k < max; k++){
            ac = ac === undefined || (k < b.length && (fn ? fn(ac, b[k]) : ac == b[k])) ? undefined : ac;
            bc = bc === undefined || (k < a.length && (fn ? fn(bc, a[k]) : bc == a[k])) ? undefined : bc;
            if(ac == undefined && bc == undefined) break;
        }
        ac !== undefined && d.push(ac);
        bc !== undefined && d.push(bc);
    }
    return d;
}

alert(
    "Test 1: " + 
    diff(
        [1, 2, 3, 4],
        [1, 4, 5, 6, 7]
      ).join(', ') +
    "\nTest 2: " +
    diff(
        [{id:'a',toString:function(){return this.id}},{id:'b',toString:function(){return this.id}},{id:'c',toString:function(){return this.id}},{id:'d',toString:function(){return this.id}}],
        [{id:'a',toString:function(){return this.id}},{id:'e',toString:function(){return this.id}},{id:'f',toString:function(){return this.id}},{id:'d',toString:function(){return this.id}}],
        function(a, b){ return a.id == b.id; }
    ).join(', ')
);

Answer 24

要找出 2 个不重复的数组的差异：

function difference(arr1, arr2){

  let setA = new Set(arr1);
  let differenceSet = new Set(arr2.filter(ele => !setA.has(ele)));
  return [...differenceSet ];

}

1.difference([2,2,3,4],[2,3,3,4]) 将返回[]

2.difference([1,2,3],[4,5,6]) 将返回[4,5,6]

3.difference([1,2,3,4],[1,2]) 将返回[]

4.difference([1,2],[1,2,3,4]) 将返回[3,4]

注意：上述解决方案要求您始终将较大的数组作为第二个参数发送。要找到绝对差异，您需要先找到两者中较大的数组，然后对其进行处理。

要找出 2 个没有重复的数组的绝对差异：

function absDifference(arr1, arr2){

  const {larger, smaller} = arr1.length > arr2.length ? 
  {larger: arr1, smaller: arr2} : {larger: arr2, smaller: arr1}
  
  let setA = new Set(smaller);
  let absDifferenceSet = new Set(larger.filter(ele => !setA.has(ele)));
  return [...absDifferenceSet ];

}

1.absDifference([2,2,3,4],[2,3,3,4]) 将返回[]

2.absDifference([1,2,3],[4,5,6]) 将返回[4,5,6]

3.absDifference([1,2,3,4],[1,2]) 将返回[3,4]

4.absDifference([1,2],[1,2,3,4]) 将返回[3,4]

注意两个解决方案中的示例 3

Answer 25

我想要一个类似的函数，它接收一个旧数组和一个新数组，并给我一个添加项数组和一个删除项数组，我希望它高效（所以没有 .contains！）。

您可以在这里使用我提出的解决方案：http://jsbin.com/osewu3/12。

任何人都可以看到该算法的任何问题/改进吗？谢谢！

代码清单：

function diff(o, n) {
  // deal with empty lists
  if (o == undefined) o = [];
  if (n == undefined) n = [];

  // sort both arrays (or this won't work)
  o.sort(); n.sort();

  // don't compare if either list is empty
  if (o.length == 0 || n.length == 0) return {added: n, removed: o};

  // declare temporary variables
  var op = 0; var np = 0;
  var a = []; var r = [];

  // compare arrays and add to add or remove lists
  while (op < o.length && np < n.length) {
      if (o[op] < n[np]) {
          // push to diff?
          r.push(o[op]);
          op++;
      }
      else if (o[op] > n[np]) {
          // push to diff?
          a.push(n[np]);
          np++;
      }
      else {
          op++;np++;
      }
  }

  // add remaining items
  if( np < n.length )
    a = a.concat(n.slice(np, n.length));
  if( op < o.length )
    r = r.concat(o.slice(op, o.length));

  return {added: a, removed: r}; 
}

Answer 26

你可以使用 underscore.js ：http://underscorejs.org/#intersection

你需要数组的方法：

_.difference([1, 2, 3, 4, 5], [5, 2, 10]);
=> [1, 3, 4]

_.intersection([1, 2, 3], [101, 2, 1, 10], [2, 1]);
=> [1, 2]

Answer 27

这是可行的：基本上合并两个数组，查找重复项并将未重复的内容推送到一个新数组中，这就是区别。

function diff(arr1, arr2) {
  var newArr = [];
  var arr = arr1.concat(arr2);
  
  for (var i in arr){
    var f = arr[i];
    var t = 0;
    for (j=0; j<arr.length; j++){
      if(arr[j] === f){
        t++; 
        }
    }
    if (t === 1){
      newArr.push(f);
        }
  } 
  return newArr;
}

Answer 28

//es6方法

function diff(a, b) {
  var u = a.slice(); //dup the array
  b.map(e => {
    if (u.indexOf(e) > -1) delete u[u.indexOf(e)]
    else u.push(e)   //add non existing item to temp array
  })
  return u.filter((x) => {return (x != null)}) //flatten result
}

Answer 29

对称和线性复杂度。需要 ES6。

function arrDiff(arr1, arr2) {
    var arrays = [arr1, arr2].sort((a, b) => a.length - b.length);
    var smallSet = new Set(arrays[0]);

    return arrays[1].filter(x => !smallSet.has(x));
}

Answer 30

还有另一个答案，但似乎没有人提到 jsperf，他们比较了几种算法和技术支持：https://jsperf.com/array-difference-javascript 似乎使用过滤器得到了最好的结果。谢谢