当前位置：首页 > news >正文

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

news 来源：原创 2025/4/22 1:13:35

接上文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);