javascript - 如果值相同或不同，请检查 2 个对象数组

Question

我有 2 个数据数组，第一个数组是旧数据（数据更改前的历史记录），新数据是当前数据将显示在网格中。首先我已经用这样的javascript创建了函数。如果新数据和旧数据具有相同的值，它会比较新数据和旧数据的ID值，如果新值与我添加<p class="red"></p>的旧值不同，如果旧值为 null 或空白但新值不是我添加<p class="grey"></p>的，如果值不变或不变。在这个例子中，我只有 3 个对象键ID作为主键，Name和Address。如果我有这么多对象的键要比较，如何使这个功能更有效或更灵活

// as a old data
var old_data = [
{"ID":4,"Name":"Sad","Address":null},
{"ID":5,"Name":"Happy","Address":"Address 2"}
]

//as a new data
var new_data = [
{"ID":4,"Name":"Very Sad","Address":"Address 1"},
{"ID":5,"Name":"Happy","Address":"Address 2 New"},
{"ID":6,"Name":"Well","Address":"Address 3"}
]

var showing = [];
var temp_old = [];
var temp_new = [];

for(var i=0;i<new_data.length;i++){ //foreach the main array
    
    temp_old = [];
    temp_new = [];
    
    if(old_data.some(item => item.ID === new_data[i].ID)){
        //showing.push(new_data[i]); //push to array will be show
        temp_old = old_data.filter(item => item.ID === new_data[i].ID);
        temp_new.push(new_data[i]);

        if(new_data[i].Name!=temp_old[0].Name){ // check if value Name at new data data change or not
            if(temp_old[0].Name!=null && temp_old[0].Name!=""){
                    temp_new[0].Name = '<p class="red">'+new_data[i].Name+'</p>'; //if change add class red
                }else{
                    temp_new[0].Name = '<p class="grey">'+new_data[i].Name+'</p>'; //if change but the old data data null or blank add class grey
            }
        }

        if(new_data[i].Address!=temp_old[0].Address){ // check if value Address at new data data change or not
            if(temp_old[0].Address!=null && temp_old[0].Address!=""){
                    temp_new[0].Address = '<p class="red">'+new_data[i].Address+'</p>'; //if change add class red
                }else{
                    temp_new[0].Address = '<p class="grey">'+new_data[i].Address+'</p>'; //if change but the old data data null or blank add class grey
            }
        }

        showing.push(temp_new[0]);
    }else{
        showing.push(new_data[i]); //push to array will be show
  
    }
}


console.log(showing);

标签： javascriptarrays

Answer 1

您可以使用Object.keys().

// as a old_data
var oldData = [{ ID: 4, Name: "Sad", Address: null, Tel: "3948238852" }];

//as a new data
var newData = [
  { ID: 4, Name: "Very Sad", Address: "Address 1", Tel: "3948238852" },
  { ID: 5, Name: "Happy", Address: "Address 2", Tel: "3948238852" },
  { ID: 6, Name: "Well", Address: "Address 3", Tel: "3948238852" },
];

const output = newData.map(n => {
  const matchOldData = oldData.find(o => o.ID === n.ID);
  if (matchOldData) {
    const newDataKeys = Object.keys(n).filter(k => k != "ID");
    return newDataKeys.reduce(
      (acc, key) => {
        if (
          matchOldData[key] === "" ||
          matchOldData[key] === null ||
          matchOldData[key] === undefined
        ) {
          acc[key] = `<p class="grey">${n[key]}</p>`;
        } else if (matchOldData[key] !== n[key]) {
          acc[key] = `<p class="red">${n[key]}</p>`;
        } else {
          acc[key] = n[key];
        }
        return acc;
      },
      { ID: n.ID }
    );
  } else {
    return n;
  }
});

console.log(output);