JavaScript如何對(duì)比兩個(gè)數(shù)組？數(shù)組B根據(jù)數(shù)組A來(lái)做出增刪？

JavaScript如何對(duì)比兩個(gè)數(shù)組？數(shù)組B根據(jù)數(shù)組A來(lái)做出增刪？ (不用jquery，原生js)
具體問(wèn)題是這樣的：
每次我checkbox勾選后，都會(huì)將所勾選的所有value得到并聲稱(chēng)arryA，如下:

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

arryB是用來(lái)渲染一個(gè)表格，一個(gè)obj就是一行。每個(gè)td里的值都是可修改的，也就是說(shuō)每個(gè)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
}];

那么問(wèn)題來(lái)了，每次勾選后，生成arryA的同時(shí)還要將arryB和arryA做對(duì)比，例如我勾選了一個(gè)x：
1、如果arryA中有a，arryB中沒(méi)有，那么在arryB中增加一個(gè)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，也就是說(shuō)arryA中去掉了a，那么arryB中key值為a的obj整個(gè)刪掉。目的是讓table里的該行刪掉;

求各路大神解答，謝謝啦

回答

編輯回答

萌吟

代碼如下

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' }
    })
}

2018年5月28日 01:58

編輯回答

夢(mèng)若殤

一步一步來(lái)吧！
首先，arrayB的數(shù)組是根據(jù)arrayA來(lái)的，所以肯定是遍歷arrayA，然后再根據(jù)arrayA的元素，在arrayB中進(jìn)行查找。如果有找到記錄就添加進(jìn)去，沒(méi)有就添加{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
}];
//準(zhǔn)備臨時(shí)數(shù)組
var result=[],arr;
//遍歷
for(var i=0;i<arrayA.length;i++){
    //根據(jù)arrayA[i]的值，查找arrayB，如果arrayB中的有滿足條件（arrayB中的對(duì)象，有key值等于arrayA[i]）的項(xiàng)，就會(huì)返回滿足條件的項(xiàng)，否則返回underfind;
    arr=arrayB.find(function(val){return val.key===arrayA[i]});
    //如果arr不是undefind，就會(huì)添加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'});
    
}

運(yùn)行一下，結(jié)果正確

但是這樣肯定是不完美的，沒(méi)法復(fù)用。下面用個(gè)方法封裝一下。

function compareArr(arr1,arr2){
    //準(zhǔn)備臨時(shí)數(shù)組
    var result=[],arr;
    //遍歷
    for(var i=0;i<arr1.length;i++){
        //根據(jù)arrayA[i]的值，查找arrayB，如果arrayB中的有滿足條件（arrayB中的對(duì)象，有key值等于arrayA[i]）的項(xiàng)，就會(huì)返回滿足條件的項(xiàng)，否則返回underfind;
        arr=arr2.find(function(val){return val.key===arr1[i]});
        //如果arr不是undefind，就會(huì)添加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;
}

代碼或許會(huì)覺(jué)得有點(diǎn)不優(yōu)雅，那就用es6優(yōu)雅一點(diǎn)，原理是一樣，遍歷arrayA，根據(jù)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' }
    })
}

2017年6月8日 14:45

編輯回答