JavaScript如何对比两个数组？数组B根据数组A来做出增删？

Question

JavaScript如何对比两个数组？数组B根据数组A来做出增删？ (不用jquery，原生js)
具体问题是这样的：
每次我checkbox勾选后，都会将所勾选的所有value得到并声称arryA，如下:

var arrayA = ['a','b','c'];

arryB是用来渲染一个表格，一个obj就是一行。每个td里的值都是可修改的，也就是说每个num[1-4]都可修改，如下：

var arrayB = [{
    key:'a',
    num1:'1',
    num2:'2',
    num3:'3',
    tot:'6'
},{
    key:'b',
    num1:'11',
    num2:'22',
    num3:'33',
    tot:'66'
},{
    key: 'c',
    num1: '111',
    num2: '222',
    num3: '333',
    tot:666
}];

那么问题来了，每次勾选后，生成arryA的同时还要将arryB和arryA做对比，例如我勾选了一个x：
1、如果arryA中有a，arryB中没有，那么在arryB中增加一个key值为a的boj，且其他属性值可均为'0';如下： {key:'a',num1:'0',num2:'0',num3:'0',tot':0'}

2、如果arryA中有a，arryB中也有key值为a的obj,那么arryB则不改变，并且该obj里的其他属性和属性值均不变;
3、如果取消勾选a，也就是说arryA中去掉了a，那么arryB中key值为a的obj整个删掉。目的是让table里的该行删掉;

---

求各路大神解答，谢谢啦

Answer 1

一步一步来吧！
首先，arrayB的数组是根据arrayA来的，所以肯定是遍历arrayA，然后再根据arrayA的元素，在arrayB中进行查找。如果有找到记录就添加进去，没有就添加{key:'a',num1:'0',num2:'0',num3:'0',tot':0'}。下面看代码

var arrayA = ['b','c'];
var arrayB = [{
    key:'a',
    num1:'1',
    num2:'2',
    num3:'3',
    tot:'6'
},{
    key:'b',
    num1:'11',
    num2:'22',
    num3:'33',
    tot:'66'
},{
    key: 'c',
    num1: '111',
    num2: '222',
    num3: '333',
    tot:666
}];
//准备临时数组
var result=[],arr;
//遍历
for(var i=0;i<arrayA.length;i++){
    //根据arrayA[i]的值，查找arrayB，如果arrayB中的有满足条件（arrayB中的对象，有key值等于arrayA[i]）的项，就会返回满足条件的项，否则返回underfind;
    arr=arrayB.find(function(val){return val.key===arrayA[i]});
    //如果arr不是undefind，就会添加arr，否则添加{key:arrayA[i],num1:'0',num2:'0',num3:'0',tot:'0'}。
arr?result.push(arr):result.push({key:arrayA[i],num1:'0',num2:'0',num3:'0',tot:'0'});
    
}

运行一下，结果正确

但是这样肯定是不完美的，没法复用。下面用个方法封装一下。

function compareArr(arr1,arr2){
    //准备临时数组
    var result=[],arr;
    //遍历
    for(var i=0;i<arr1.length;i++){
        //根据arrayA[i]的值，查找arrayB，如果arrayB中的有满足条件（arrayB中的对象，有key值等于arrayA[i]）的项，就会返回满足条件的项，否则返回underfind;
        arr=arr2.find(function(val){return val.key===arr1[i]});
        //如果arr不是undefind，就会添加arr，否则添加{key:arrayA[i],num1:'0',num2:'0',num3:'0',tot:'0'}。
        arr?result.push(arr):result.push({key:arr1[i],num1:'0',num2:'0',num3:'0',tot:'0'});
    }
    return result;
}

代码或许会觉得有点不优雅，那就用es6优雅一点，原理是一样，遍历arrayA，根据arrayA的天涯不是有查找arrayB

function compareArr(arr1, arr2) {
    return arr1.map(item1 => {
        //如果arr2.find(item2 => item2.key === item1)，有查找到记录就返回记录，否则就返回{ key: item1, num1: '0', num2: '0', num3: '0', tot: '0' }
        return arr2.find(item2 => item2.key === item1)||{ key: item1, num1: '0', num2: '0', num3: '0', tot: '0' }
    })
}    

Answer 2

代码如下

function getNewArray(arrayA, arrayB) {
    return arrayA.map(itemA => {
        const findItem = arrayB.find(itemB => itemB.key == itemA)
        return findItem ? findItem :  { key: itemA, num1: '0', num2: '0', num3: '0', tot: '0' }
    })
}

Answer 3

不是这么比较的，你可以把你选择之后的形成的a的值保存下来，然后遍历arrayB，跟a做比较，有a就不作修改，没有就push进去

Answer 4

不就是你点一下遍历一次么,有就两个数组都删了,没有就都加上.