如何在JS对象数组中条件插入指定元素，避免生成空对象

你可以通过展开运算符+条件数组的方式实现，不会产生多余的空元素，语法和你想要的条件渲染逻辑完全一致：

var audi = false;
var cars= [
   {header: 'fiat',accessor: row},
   // 条件为真时展开包含audi对象的数组，为假时展开空数组，无任何冗余元素
   ...(audi ? [{header: 'audi',accessor: row}] : []),
   {header: 'bmw',accessor: row}
]

实现原理 #

当audi为true时，三元表达式返回包含audi配置对象的数组，通过展开运算符...把对象插入到原数组的对应位置；当audi为false时，返回空数组，展开后不会在数组中留下任何元素，完美避免了空对象的问题。

如果不习惯上述写法，也可以先声明固定元素的基础数组，再根据条件插入对应项：

var audi = false;
// 先声明固定存在的元素
var cars= [
   {header: 'fiat',accessor: row},
   {header: 'bmw',accessor: row}
];
// 条件满足时插入audi项，splice可指定插入位置，需要加在末尾直接用push即可
if (audi) {
  cars.splice(1, 0, {header: 'audi',accessor: row});
}

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