在 Vue 3 中将拆分后的数组合并回原数组

接上文Vue 3 中按照某个字段将数组分成多个数组_vue3怎么进行数组对象--分割对象-CSDN博客

方法一：使用 flat() 方法

// 假设这是拆分后的多维数组
const splitArrays = [[{id: 1, category: 'A'}, {id: 3, category: 'A'}],[{id: 2, category: 'B'}, {id: 5, category: 'B'}],[{id: 4, category: 'C'}]
];// 使用 flat() 合并
const mergedArray = splitArrays.flat();
console.log(mergedArray);

方法二：使用 reduce() 方法

const mergedArray = splitArrays.reduce((acc, currentArray) => {return acc.concat(currentArray);
}, []);

方法三：使用展开运算符

const mergedArray = [].concat(...splitArrays);

方法四：如果拆分后是对象形式，转换为数组再合并

// 假设拆分后是这样的对象
const groupedByCategory = {A: [{id: 1, category: 'A'}, {id: 3, category: 'A'}],B: [{id: 2, category: 'B'}, {id: 5, category: 'B'}],C: [{id: 4, category: 'C'}]
};// 合并方法
const mergedArray = Object.values(groupedByCategory).flat();

方法五：在 Vue 3 组件中使用计算属性

import { computed } from 'vue';export default {setup() {const splitArrays = [[{id: 1, category: 'A'}, {id: 3, category: 'A'}],[{id: 2, category: 'B'}, {id: 5, category: 'B'}],[{id: 4, category: 'C'}]];const mergedArray = computed(() => splitArrays.flat());return { mergedArray };}
};

方法六：保持原始顺序的合并

如果需要保持原始数组的顺序，可以在拆分时保留索引信息

// 拆分时保留原始索引
const originalArray = [{id: 1, category: 'A', index: 0},{id: 2, category: 'B', index: 1},{id: 3, category: 'A', index: 2},{id: 4, category: 'C', index: 3},{id: 5, category: 'B', index: 4}
];// 拆分操作
const groupedByCategory = originalArray.reduce((acc, item) => {const key = item.category;if (!acc[key]) {acc[key] = [];}acc[key].push(item);return acc;
}, {});// 合并时按原始索引排序
const mergedArray = Object.values(groupedByCategory).flat().sort((a, b) => a.index - b.index).map(({index, ...rest}) => rest); // 移除临时索引console.log(mergedArray);

注意事项

1. 如果拆分后的数组结构不是简单的二维数组，可能需要先进行适当处理

2. 合并后的数组顺序可能与原数组不同，如需保持顺序需要额外处理

3. 对于大型数组，flat() 方法性能较好

4. 如果数组中包含对象引用，合并后的数组仍会引用相同的对象