两个数组合并;合并数组;前端 JS 如果有两个数组,想将B数组的数据按顺序填入A数组中;也就是想将一个数组的数据按顺序填入另一个数组中。
tableList: [],
getReceiveRead(ids).then(res=>{}))
在这里我的res返回的值也是数组也是[]
你也可以定义两个
tableList: [],
res: [],
看你自己的需求;
现在希望按顺序将 res
返回的值依次添加到 tableList
中。可以使用 Array
对象的 map
方法来实现这一目标。(教学看注解)
getReceiveRead(ids).then(res => {
// 检查 res 的长度是否与 tableList 的长度相同
if (res.length === this.tableList.length) {
// 使用 map 方法将 res 的值依次添加到 tableList 中
this.tableList = this.tableList.map((item, index) => {
// 将 res 中对应索引的值添加到 tableList 中
return {
...item, // 保留原始对象的其他属性
// 假设 res 返回的值是一个对象,您可以根据实际情况调整此处的写法
newProperty: res[index] // 这里假设要添加一个名为 newProperty 的属性
};
});
} else {
console.error("Length of 'res' is not equal to the length of 'tableList'");
}
});
res
和 tableList
都是数组,且它们的长度相同。它使用 map
方法遍历 tableList
,并将 res
中相应索引的值添加到每个对象中。
可以根据实际情况进行调整,例如,如果 res
返回的是一个对象而不是单个值,您需要相应地更改添加到 tableList
中的属性。
数组添加新元素:例如:我想在 A 数组后面将 B 数组里面的各个数据添加到 A 数组当中;
下面我给的示范的例子:
this.form.attachmentList = [];【这是 A 数组】
electedAttachmentList【这是 B 数组】
现在两个数组都有值,我想将 B 内的值添加到 A 数组中:如果我们直接使用 = ;A=B 那么 A 数组内的所有数据都会被 B 数组覆盖掉了;如果想要将 selectedAttachmentList(B)
添加到 this.form.attachmentList(A)
中而不是覆盖它,您可以使用数组的合并方法,例如 push
或者 concat
。下面是使用 push
方法的示例(想了解更多看注解):
submitAttachmentBind(selectedAttachmentList) {
// 清空原有数据
this.form.attachmentList = [];
// 将 selectedAttachmentList 中的元素逐个添加到 this.form.attachmentList 中
selectedAttachmentList.forEach(item => {
this.form.attachmentList.push(item
});
// 或者可以使用 ES6 的展开运算符来合并数组
// this.form.attachmentList.push(...selectedAttachmentList);
this.openEmailAttachment = false
}
这样,您就可以将 selectedAttachmentList
中的元素添加到 this.form.attachmentList
中而不是覆盖它。
当您使用 concat
方法时,它会返回一个新数组,该数组包含原始数组(即 this.form.attachmentList
)和要添加的新元素数组(即 selectedAttachmentList
)中的所有元素。它不会修改原始数组,而是返回一个新数组,其中包含了合并后的结果。
以下是如何使用 concat
方法来合并数组的示例:
submitAttachmentBind(selectedAttachmentList) {
// 使用 concat 方法将原始数组和新数组合并,并将结果赋值给 this.form.attachmentList
this.form.attachmentList = this.form.attachmentList.concat(selectedAttachmentList);
// 其他
this.openEmailAttachment = false;
c
}
通过这种方式,您可以确保 this.form.attachmentList
中保留了原有的元素,并且添加了 selectedAttachmentList
中的元素,而不是直接覆盖原有的值。
在这种情况下,两种方法都是有效的,但通常来说,使用 concat
方法更为常见和推荐。原因如下:
-
不会修改原始数组:
concat
方法不会修改原始数组this.form.attachmentList
,而是返回一个新数组,这样可以保持原始数据的不变性。这对于函数式编程和数据不可变性是很重要的概念。 -
函数式编程风格: 使用
concat
方法更符合函数式编程的风格,因为它是一个纯函数,不会改变原始数据,而是返回一个新的合并后的数组。 -
代码清晰度:
concat
方法在语义上更清晰,因为它明确表示将两个数组连接在一起,而不是直接修改一个数组的内容。
综上所述,虽然两种方法都可以实现您的需求,但使用 concat
方法更为常见和推荐,因为它更符合函数式编程的思想,并且可以更清晰地表达您的意图。
重点:选用哪个看你喜欢咯,还有看你需求咯
补充一点:在追加新数据内容的时候;可以先加一个判断;就可以避免 A B 相同的数据重复出现;
submitAttachmentBind(selectedAttachmentList) {
// 确保 this.form.attachmentList 已经被初始化为一个数组
if (!Array.isArray(this.form.attachmentList)) {
this.$set(this.form, 'attachmentList', []);
}
// 遍历 selectedAttachmentList,将不重复的附件添加到 this.form.attachmentList 中
selectedAttachmentList.forEach(selectedItem => {
// 检查 this.form.attachmentList 中是否已存在相同 id 的附件
const existingAttachment = this.form.attachmentList.find(item => item.id === selectedItem.id);
if (!existingAttachment) {
this.form.attachmentList.push(selectedItem);
}
});
// 更新
this.openEmailAttachment = fals
}
总结:
当需要将两个数组中的值按顺序匹配并合并时,map
方法通常是一个非常方便的工具。
-
检查长度匹配:
在合并两个数组时,首先应该确保它们的长度相同,以免出现数据不匹配的情况。如果两个数组的长度不同,可能会导致数据丢失或错误的情况。因此,代码中的第一步是检查res
和tableList
的长度是否相同。 -
使用
map
方法:
一旦确认了长度匹配,就可以使用map
方法来遍历tableList
数组。map
方法对数组中的每个元素执行指定的操作,并返回一个新的数组,其中包含每个元素的处理结果。在这种情况下,我们希望将res
中相应索引的值添加到tableList
中的每个对象。 -
添加新属性:
在map
方法的回调函数中,我们可以通过索引来访问res
中对应的值,并将其添加到tableList
中的每个对象中。在示例中,假设res
中的值是一个新属性,我们将其添加到每个对象中。可以根据实际情况修改这个过程。 -
保留原始对象的其他属性:
在添加新属性之前,我们使用对象的展开语法 (...item
) 来保留原始对象的其他属性。这样可以确保我们不会丢失原始数据中的其他信息。
通过这种方式,我们可以确保将两个数组中的值按顺序匹配,并将它们合并成一个数组,以便进一步处理或显示。这种方法简洁而有效,适用于许多类似的情况。
如果文章对你有帮助,记得 点赞、收藏、关注👍⭐🧧