如何使用另一个JS数组替换JS数组属性值

Question

我想使用另一个JS数组替换JS数组属性的值。如下所述。

const arr1 = [
{
  code: "XXY",
  dis: "cont1",
  note: "Note for cont1"
}, 
{
  code: "AAW",
  dis: "cont2",
  note: "Note for cont2"
}, 
{
  code: "TTR",
  dis: "cont5",
  note: "Note for cont5"
}, 
{
  code: "MMN",
  dis: "cont10",
  note: "Note for cont10"
}]

const new_array = [
  {
    "code": "AAW",
    "dis": "cont2 new",
    "note": "Note for cont2"
  },
  {
    "code": "TTR",
    "dis": "cont5",
    "note": "New Note for cont5"
  }]

期望输出：

[
 {
  code: "XXY",
  dis: "cont1",
  note: "Note for cont1"
 }, 
 {
  code: "AAW",
  dis: "cont2 new",
  note: "Note for cont2"
 }, 
 {
  code: "TTR",
  dis: "cont5",
  note: "New Note for cont5"
 }, 
 {
  code: "MMN",
  dis: "cont10",
  note: "Note for cont10"
 }
]

我们需要检查所有arr1元素，其中等于new_arr.code的元素与arr1.code进行比较，并比较dis和note属性。如果arr1.dis不等于new_arr.dis，则应将arr1.dis的值替换为new_arr.dis的值。对于note属性也是如此。

尝试的代码:

arr1.forEach(function(item1) {
        var item2 = arr1.find(function (item2) {
            return arr1.code === new_array.code;
        });
    })

console.log(arr1);

当前输出：

[
  {
    "code": "XXY",
    "dis": "cont1",
    "note": "Note for cont1"
  },
  {
    "code": "AAW",
    "dis": "cont2",
    "note": "Note for cont2"
  },
  {
    "code": "TTR",
    "dis": "cont5",
    "note": "Note for cont5"
  },
  {
    "code": "MMN",
    "dis": "cont10",
    "note": "Note for cont10"
  }
]

我该如何解决这个问题？

- aer-der

---

“仅仅说‘不工作’无法帮助我们诊断问题。请提供输出信息，是否有错误提示？” - Lioness100

如果您想检查第一个数组的每个元素与第二个数组的每个元素是否匹配，那么仅通过循环其中一个数组是行不通的。 - CBroe

你需要使用的是数组 find() 方法。 - epascarello

我们需要检查所有arr1元素，其中new_arr.code等于arr1.code，并比较dis和note属性。- 没错...那就这么做吧。 - Taplar

Answer 1

使用第二个数组创建一个对象，其中code作为键来在O(1)时间内查找元素，因此复杂性降低到O(n)时间。

const arr1 = [{
    code: "XXY",
    dis: "cont1",
    note: "Note for cont1"
  },
  {
    code: "AAW",
    dis: "cont2",
    note: "Note for cont2"
  },
  {
    code: "TTR",
    dis: "cont5",
    note: "Note for cont5"
  },
  {
    code: "MMN",
    dis: "cont10",
    note: "Note for cont10"
  }
]

const new_array = [{
    "code": "AAW",
    "dis": "cont2 new",
    "note": "Note for cont2"
  },
  {
    "code": "TTR",
    "dis": "cont5",
    "note": "New Note for cont5"
  }
]

const t = new_array.reduce((res, item) => {
  res[item.code] = item
  return res;
}, {})

arr1.forEach(item => {
  const found = t[item.code]
  if (found) {
    item.dis = found.dis
    item.note = found.note
  }
})
console.log(arr1)

- deepak

Answer 2

new_array.forEach(o1 => { // for every replacement object
  // find the corresponding object in the original array
  const found = arr1.find(o2 => o2.code === o1.code); 
  // if there is a corresponding object
  if (found) {
    // copy its properties over
    found.dis = o1.dis;
    found.note = o1.note;
  }
})

注意，这里时间复杂度为较差的O(n^2)，如果你有一个大数据集，请考虑使用其他答案建议的set进行更快的查找。

- Rubydesic

Answer 3

给定一个可以将原始项目与可能更新的数组合并的方法：

const mergeItem = (item, arr, finder) =>{
  var other = arr.find(x => finder(item,x));
  if(other != null){
    Object.entries(other).forEach(([key,value]) => item[key] = value);
  }
  return item;
}

合并这两个数组的代码非常简单。

var result = arr1.map(item => mergeItem(item,new_array, (x,y) => x.code == y.code));

实时示例：

const arr1 = [{"code":"XXY","dis":"cont1","note":"Note for cont1"},{"code":"AAW","dis":"cont2","note":"Note for cont2"},{"code":"TTR","dis":"cont5","note":"Note for cont5"},{"code":"MMN","dis":"cont10","note":"Note for cont10"}];
const new_array = [{"code":"AAW","dis":"cont2 new","note":"Note for cont2"},{"code":"TTR","dis":"cont5","note":"New Note for cont5"}];
  
  
const mergeItem = (item, arr, finder) =>{
  var other = arr.find(x => finder(item,x));
  if(other != null){
    Object.entries(other).forEach(([key,value]) => item[key] = value);
  }
  return item;
}

var result = arr1.map(item => mergeItem(item,new_array, (x,y) => x.code == y.code));

console.log(result);

- Jamiec

Answer 4

const mappedArray = arr1.map((x) => {
  const filteredValue = new_array.filter((y) => y.code === x.code);
  return filteredValue.length > 0 ? filteredValue[0] : x;
});

- Ivan Mihajlov

---

我认为如果您在回答@aer-der的问题时解释一下您在他们的代码中做了哪些更改，那么这将会改善您的答案。 - Dylan Landry