JavaScript数组替换：如何根据第二个数组的值匹配并替换第一个数组中的数据？

JavaScript数组数据匹配替换详解

本文介绍如何使用JavaScript高效地比较和替换两个数组中的数据。 具体问题是：根据第二个数组(arr2)的值，匹配并替换第一个数组(arr1)中特定字段(sk.value)的数据。

问题场景

假设我们有两个数组：

立即学习“Java免费学习笔记（深入）”；

arr1：

let arr1 = [
  {
    sk: [
      { name: '数据1', value: '200' },
      { name: '数据2', value: '300' },
      { name: '数据3', value: '400' },
    ],
  },
  {
    sk: [
      { name: '数据5', value: '500' },
      { name: '数据6', value: '600' },
      { name: '数据7', value: '700' },
    ],
  },
];

arr2：

let arr2 = {
  name: '数据555',
  val: [200, 300, 500],
};

目标是：如果arr1.sk.value的值存在于arr2.val中，则将对应的arr1.sk.name替换为arr2.name。

解决方案

Magician

Figma插件，AI生成图标、图片和UX文案

下载

以下JavaScript代码实现了该功能：

let result = arr1.map(item => {
  if (item.sk && item.sk.length > 0) {
    item.sk = item.sk.map(k => {
      if (arr2.val.includes(parseInt(k.value))) {
        return { ...k, name: arr2.name };
      }
      return k;
    });
  }
  return item;
});

代码说明

这段代码使用了嵌套的map()方法：

1. 外层map()遍历arr1中的每个对象。
2. if (item.sk && item.sk.length > 0) 检查item.sk是否存在且不为空，避免错误。
3. 内层map()遍历每个对象中的sk数组。
4. arr2.val.includes(parseInt(k.value)) 检查k.value (转换为整数) 是否存在于arr2.val中。
5. return { ...k, name: arr2.name }; 使用展开语法(...k)创建新的对象，并更新name属性。
6. return k; 如果value不在arr2.val中，则保持原样。

结果

执行后，result数组将变为：

[
  {
    sk: [
      { name: '数据555', value: '200' },
      { name: '数据555', value: '300' },
      { name: '数据3', value: '400' },
    ],
  },
  {
    sk: [
      { name: '数据555', value: '500' },
      { name: '数据6', value: '600' },
      { name: '数据7', value: '700' },
    ],
  },
];

关键步骤总结

1. 使用map()方法高效遍历数组。
2. 使用includes()方法进行值匹配。
3. 使用展开语法(...)创建新的对象并更新属性，避免修改原数组。
4. 添加空数组检查避免错误。

这个改进后的解决方案更简洁、高效，并且避免了潜在的错误。 它也更符合函数式编程的思想，避免了直接修改原数组。