数组减去另一数组(数组的每一项都是一个对象)

title
做聊天项目的时候遇要实现这样的一个功能: 邀请新的好友入群;点击邀请好友会弹出一个好友列表,显示你除了在群里面的好友外剩下的所有好友;
我的思路是取到你所有的好友,然后所有好友中过滤掉已经是群成员的好友

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
const users = [
{
_id: 1,
name: '好友1'
},
{
_id: 2,
name: '好友1'
},
{
_id: 3,
name: '好友1'
},
];
const groupMembers = [
{
_id: 1,
name: '好友1'
},
{
_id: 2,
name: '好友1'
},
]

现在一步一步来看数组的操作

一,两个数组里的每一项分别为元素时

1
2
3
4
5
const arr1 = ['', '100', '120', '125', '125', '130', '130'];

const arr2 = ['', '120', '125', '125', '130'];

请问如何求得两个数组之差?使得新数组为 arr3 = ['100','130']

方法一:

思路:用for循环比较arr1和arr2的每一项,如果相等,就删除

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
const arr1 = ['', '120', '125', '125', '130', '130', '130', '130', '130'];

const arr2 = ['', '120', '125', '130'];

for (let i = arr1.length - 1; i >= 0; i--) {
a = arr1[i];
for (let j = arr2.length - 1; j >= 0; j--) {
b = arr2[j];
if (a == b) {
arr1.splice(i, 1);
arr2.splice(j, 1);
break;
}
}
}

console.log(arr1); // ['125','130','130','130','130']

方法二:

思路:将第一个数组存入一个对象,这样就已经去重了;再把第二个数组中的元素当作key从对象中删除。

1
2
3
4
const m = {};
arr1.forEach(function(al){m[al]=al;})
arr2.forEach(function(bl){delete m[bl];})
console.dir(Object.keys(m))

方法三:

思路:声明一个新的数组arr3,比较arr1和arr2,如果arr1中有和arr2不相等的就放入arr3中,用到了es6中关于数组的新方法findIndex(),稍后会详细的介绍;

1
2
3
4
5
6
7
8
9
const arr1 = ['', '100', '120', '125', '125', '130', '130'];
const arr2 = ['', '120', '125', '125', '130'];
const arr3 = [];
arr1.forEach((a)=>{
let c = arr2.findIndex(b =>a === b);
if (c > -1) delete arr2[c];
else arr3.push(a);
});
console.log(arr3) //['100', '130']

二, arr1中的每一项都是对象,arr2中的每一项都是元素

1
2
const a = [{ id: 15 }, { id: -1 }, { id: 0 }, { id: 3 }, { id: 12.2 }];
const b = [15, 3];

方法一

1
2
3
a.filter(item => { return !b.includes(item.id); });

a.filter(item => { return b.indexOf(item.id) === -1; });

方法二:

1
a=a.filter((x)=>b.every((y)=>y!=x.id))

方法三:

1
2
3
4
5
6
7
8
9
10
11
const a = [{ id: 15 }, { id: -1 }, { id: 0 }, { id: 3 }, { id: 12.2 }];
const b = [15, 3];
for(index in a){
if(b.indexOf(a[index]['id'])>=0)
a.splice(index,1);
}
console.log(a);

const result = a.filter(function (item) {
return b.indexOf(item.id) < 0;
})

三,arr1中的每一项都是对象,arr2中的每一项也都是对象,现在回到主题

1
2
3
4
5
6
7
8
9
const a = [
{_id: 1},
{_id: 2},
{_id: 3},
];
const b = [
{_id: 2},
{_id: 4},
]

解决方法一:

1
const c = a.filter(x => !b.find(y => y._id === x._id)); // [ { _id: 1 }, { _id: 3} ]

解决方法二:

1
const c = a.filter(x => b.every(y => y._id !== x._id));

四,介绍一下上面用到的数组实例中的find(), findIndex(), includes()

find()

find()用于找出第一个符合条件的数组成员,它的参数是一个回调函数,所有的数组成员依次执行该回调函数,直到找到第一个返回值为true的成员,然后返回该成员,如果没有的话,返回undefined

1
2
[0, 4, -5, -10].find((n) => n < 0);
// -5

上面代码找出数组中第一个小于0的成员

1
2
3
4
[1, 5, 10, 15].find(function(value, index, arr) {
return value > 9;
})
// 10

find方法的回调函数可以接受三个参数,当前的值,当前的位置和原数组

findIndex()

findIndex()方法的用法与find()方法类似,返回第一个符合条件的数组成员的位置,如果所有成员都不符合,则返回-1.

1
2
3
4
[1, 5, 10, 15].findIndex(function(value, index, arr) {
return value > 9;
})
// 2

两个方法都可以发现NAN,弥补了数组的indexOf方法的不足

1
2
3
4
5
[NaN].indexOf(NaN)
// -1

[NaN].findIndex(y => Object.is(NaN, y))
// 0

indexOf方法无法识别数组的NaN成员,但是findIndex方法可以借助Object.is方法做到

includes()

Array.prototype.includes方法返回一个布尔值,表达某个数组是否包含给定的值,与字符串的includes方法类似

1
2
3
[1, 2, 3].includes(2)     // true
[1, 2, 3].includes(4) // false
[1, 2, NaN].includes(NaN) // true

该方法的第二个参数表示搜索的起始位置,默认为0,如果第二个参数为负数,表示倒数的位置;如果这是它大于数组长度(比如第二个参数为-4.但是数组长度为3),则会重置为从0开始

1
2
[1, 2, 3].includes(3, 3);  // false
[1, 2, 3].includes(3, -1); // true

没有该方法之前,我们通常使用数组的indexOf方法,检查是否包含某个值

1
2
3
if (arr.indexOf(el) !== -1) {
// ...
}

indexOf方法有两个缺点,一是不够语义化.它的含义是找到参数值的第一个出现位置.所以要去比较是否不等于-1,而是,它内部使用严格相等运算符(===)进行判断,这会导致对NaN的误判

1
2
[NaN].indexOf(NaN)
// -1

includes使用的是不一样的判断算法,就没有这个问题。

1
2
[NaN].includes(NaN)
// true

参考