两个数组合并；合并数组；前端 JS 如果有两个数组，想将B数组的数据按顺序填入A数组中；数组添加新元素；

本文链接：https://blog.csdn.net/m0_74132943/article/details/139495187

两个数组合并；合并数组；前端 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) 来保留原始对象的其他属性。这样可以确保我们不会丢失原始数据中的其他信息。

通过这种方式，我们可以确保将两个数组中的值按顺序匹配，并将它们合并成一个数组，以便进一步处理或显示。这种方法简洁而有效，适用于许多类似的情况。

如果文章对你有帮助，记得点赞、收藏、关注👍⭐🧧