如何将嵌套数组对象提取至selectedItems根数组层级？

嘿马克！我明白你遇到的问题了——用map处理数组后直接push，结果把整个数组作为单个元素塞进了selectedItems，导致嵌套结构，而你想要的是像selectedFolder那样让元素直接处于根层级。

问题根源 #

items.map((item) => item)会返回一个新数组，如果你直接执行selectedItems.push(这个新数组)，就相当于把整个数组当成一个元素添加进去，自然就形成了嵌套。而selectedFolder的元素应该是逐个被push进去的，所以能保持根层级结构。

解决方案 #

这里有几种简单的方法可以实现你想要的效果：

1. 使用扩展运算符（...）展开数组

扩展运算符可以把map返回的数组“拆开”，将里面的元素逐个添加到selectedItems中：

// 如果只是原样添加元素，甚至可以省略map，直接展开items
selectedItems.push(...items);

// 如果你需要先对item做处理再添加，保留map即可
selectedItems.push(...items.map(item => {
  // 这里可以对item进行自定义处理，比如修改属性
  return { ...item, processed: true };
}));

2. 使用concat方法合并数组

concat方法会把传入的数组元素合并到目标数组中，返回一个新数组（如果不想修改原selectedItems的话很适合）：

// 原样合并
selectedItems = selectedItems.concat(items);

// 处理后合并
selectedItems = selectedItems.concat(items.map(item => {
  return { ...item, processed: true };
}));

3. 使用forEach逐个添加

如果需要对每个元素做更复杂的逻辑处理，forEach是更直观的选择，它不会返回数组，而是直接遍历并执行操作：

items.forEach(item => {
  // 这里可以加入任意处理逻辑
  const processedItem = { ...item, processed: true };
  selectedItems.push(processedItem);
});

效果验证 #

假设你的items是[item1, item2, item3]，使用上述方法后，selectedItems会变成：
[...原selectedItems元素, item1, item2, item3]
完全和selectedFolder的元素结构一致，没有嵌套问题。

内容的提问来源于stack exchange，提问作者M dunbavan