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

news2025/4/23 14:51:11

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