在数组中的每个其他项目之间插入项目，类似于 Array.join答案

【问题标题】：Insert item between every other item in array similar to Array.join在数组中的每个其他项目之间插入项目，类似于 Array.join
【发布时间】：2022-08-24 22:39:11
【问题描述】：

Array.join 很有用，因为它通过分隔符将字符串数组粘合在一起，同时考虑到空数组并且不在输出字符串的任一端填充分隔符。

我正在制作一个 React 应用程序，我想找到一个类似的本机函数，但是，我的 React.ReactNode 元素数组将被映射和渲染，所以我不想用分隔符加入数组并输出字符串，我只想用字符串分隔符连接数组，但保持数组结构。我可以使用 javascript/typescript/react 原生的东西来实现以下伪代码吗？

let parts: React.ReactNode[] = [];
if (conditionA) {
  parts.push(<div>Component One</div>);
}
if (conditionB) {
  parts.push(<div>Component Two</div>);
}
parts = joinByDelimiterButKeepAsArray(parts, \'|\');
// I wants parts to now equal
// [<div>Component One</div>, \'|\', <div>Component Two</div>]
// if conditionA and conditionB are both true
return (
  <>
    {parts.map((part, i) => return (
      <React.ReactFragment key={i}>{part}</React.ReactFragment>
    ))}
  </>
)

标签： javascript reactjs arrays typescript join

【解决方案1】：

韦尔普，有点回答了我自己的问题。目前，我使用以下功能来实现这一点：

function joinByDelimiterButKeepAsArray<T>(a: T[], delimiter: T): T[] {
  return a.flatMap((n, i) => (i + 1 < a.length ? [n, delimiter] : [n]));
}

例子：

if (conditionA) {
  parts.push(<div>Component One</div>);
}
if (conditionB) {
  parts.push(<div>Component Two</div>);
}
console.log(joinByDelimiterButKeepAsArray(parts, '|'));
/// [[<React.ReactNode>...], '|', [<React.ReactNode>...]]

【讨论】：