javascript 数组A减去另一数组B

骑猪看日落 2022-09-16 04:54 120阅读 0赞

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

const users = [
        {
            _id: 1,
            name: '好友1'
        },
        {
            _id: 2,
            name: '好友1'
        },
        {
            _id: 3,
            name: '好友1'
        },
    ];
    const groupMembers = [
        {
            _id: 1,
            name: '好友1'
        },
        {
            _id: 2,
            name: '好友1'
        },
    ]

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

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

const arr1 = ['', '100', '120', '125', '125', '130', '130'];
    
    const arr2 = ['', '120', '125', '125', '130'];
    
    请问如何求得两个数组之差？使得新数组为 arr3 = ['100','130']

### 方法一: ###

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

### 方法二: ###

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

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()`,稍后会详细的介绍;

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中的每一项都是元素 ##

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

### 方法一 ###

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

### 方法二: ###

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

### 方法三: ###

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

const a = [
        {_id: 1},
        {_id: 2},
        {_id: 3},
    ];
    const b = [
        {_id: 2},
        {_id: 4},
    ]

### 解决方法一: ###

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

### 解决方法二: ###

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

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

### find() ###

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

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

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

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

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

### findIndex() ###

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

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

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

[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].includes(2)     // true
    [1, 2, 3].includes(4)     // false
    [1, 2, NaN].includes(NaN) // true

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

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

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

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

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

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

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

[NaN].includes(NaN)
    // true

## 参考 ##

*  [数组减去另一个数组][Link 1]
 *  [js 根据一个数组元素，删除另一个数组中的对象][js]
 *  [ECMAScript6入门之数组的拓展][ECMAScript6]

作者：牧码的星星  
链接：https://www.jianshu.com/p/6ac483fa49fc  
来源：简书  
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

[Link 1]: https://link.jianshu.com?t=https://segmentfault.com/q/1010000004981935
[js]: https://link.jianshu.com?t=https://segmentfault.com/q/1010000008836875
[ECMAScript6]: https://link.jianshu.com?t=http://es6.ruanyifeng.com/#docs/array