JavaScript数组数据匹配替换详解
本文介绍如何使用JavaScript高效地比较和替换两个数组中的数据。 具体问题是：根据第二个数组(arr2)的值，匹配并替换第一个数组(arr1)中特定字段(sk.value)的数据。
问题场景
假设我们有两个数组：
立即学习“Java免费学习笔记（深入）”；
arr1：
<code class="javascript">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' },
],
},
];</code>
arr2：
<code class="javascript">let arr2 = {
name: '数据555',
val: [200, 300, 500],
};</code>
目标是：如果arr1.sk.value的值存在于arr2.val中，则将对应的arr1.sk.name替换为arr2.name。
解决方案
以下JavaScript代码实现了该功能：
<code class="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;
});</code>
代码说明
这段代码使用了嵌套的map()方法：
- 外层
map()遍历arr1中的每个对象。 -
if (item.sk && item.sk.length > 0)检查item.sk是否存在且不为空，避免错误。 - 内层
map()遍历每个对象中的sk数组。 -
arr2.val.includes(parseInt(k.value))检查k.value(转换为整数) 是否存在于arr2.val中。 -
return { ...k, name: arr2.name };使用展开语法(...k)创建新的对象，并更新name属性。 -
return k;如果value不在arr2.val中，则保持原样。
结果
执行后，result数组将变为：
<code class="javascript">[
{
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' },
],
},
];</code>
关键步骤总结
- 使用
map()方法高效遍历数组。 - 使用
includes()方法进行值匹配。 - 使用展开语法(
...)创建新的对象并更新属性，避免修改原数组。 - 添加空数组检查避免错误。
这个改进后的解决方案更简洁、高效，并且避免了潜在的错误。 它也更符合函数式编程的思想，避免了直接修改原数组。
