如何在React组件中用ES6在对象数组交替位置插入对象？

你要的在对象数组交替位置插入指定对象的需求，用ES6的数组方法就能轻松搞定，我给你两种实用的实现方式：

方法一：使用flatMap（最简洁的写法） #

flatMap是ES6新增的数组方法，它会先对每个元素执行映射操作，再将结果扁平化（相当于map + flat），刚好契合我们的场景：

const arr1 = [{test: 1},{test: 2},{test: 3},{test: 4}];
const result = arr1.flatMap((item, index, array) => {
  // 最后一个元素只保留自身，其余元素后面追加dummy对象
  return index === array.length - 1 ? [item] : [item, {dummy: 1}];
});

console.log(result);
// 输出：[{test: 1},{dummy:1},{test: 2},{dummy:1},{test: 3},{dummy:1},{test: 4}]

这种写法非常紧凑，一行核心逻辑就能完成需求，可读性也很强。

方法二：使用reduce（更灵活，适合扩展复杂逻辑） #

如果你之后需要给插入的dummy对象添加动态逻辑（比如根据原元素的属性生成dummy值），reduce会更灵活：

const arr1 = [{test: 1},{test: 2},{test: 3},{test: 4}];
const result = arr1.reduce((acc, item, index, array) => {
  // 先把当前元素加入结果数组
  acc.push(item);
  // 非最后一个元素时，插入dummy对象
  if (index !== array.length - 1) {
    acc.push({dummy: 1});
    // 如果需要动态生成dummy值，比如和test对应：acc.push({dummy: item.test})
  }
  return acc;
}, []);

console.log(result);
// 输出和上面一致

reduce通过累加器逐步构建结果数组，你可以在里面添加更多判断或处理逻辑，扩展性更好。

内容的提问来源于stack exchange，提问作者sachin kumar