使用三元运算符向JavaScript数组中插入其他数组元素

我有一个由对象组成的数组，每个对象对应React表单的一个字段。现在需要根据布尔状态shortForm展示不同的字段序列——在指定位置要么插入单个对象，要么插入三个对象。单个对象的插入已经实现，但不知道怎么插入多个对象。

const [shortForm] = useState(false);

const shortFormFields = {"fieldName":"foo"}

const longFormFields = [
      {"fieldName":"bar"},
      {"fieldName":"baz"},
      {"fieldName":"qux"}]


const finalFieldList = [
      {"fieldName":"waldo"},
      shortForm === true? shortFormFields : INSERT-BAR-BAZ-QUX-HERE,
      {"fieldName":"xyzzy"}]

解决方案 #

直接用**数组展开运算符（...）**就能解决这个问题，它可以把数组的元素平铺到目标数组中，避免嵌套：

const finalFieldList = [
  {"fieldName":"waldo"},
  // 把短表单的单个字段包装成数组，统一用展开处理
  ...(shortForm ? [shortFormFields] : longFormFields),
  {"fieldName":"xyzzy"}
];

原理说明

• 当shortForm为true时，[shortFormFields]是包含单个对象的数组，展开后会把这个对象直接放到finalFieldList的对应位置；
• 当shortForm为false时，直接展开longFormFields数组，把里面的三个对象依次插入到对应位置；
• 这种写法保证了finalFieldList始终是一维数组，符合React表单字段数组的要求。

替代方案（使用concat）

如果不习惯展开运算符，也可以用数组的concat方法拼接：

// 先统一中间部分为数组格式
const middleFields = shortForm ? [shortFormFields] : longFormFields;
// 拼接前后字段数组
const finalFieldList = [{"fieldName":"waldo"}].concat(middleFields).concat([{"fieldName":"xyzzy"}]);

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