JS数组扩展运算符作用及三元表达式结合使用问题

一、扩展运算符在数组中的作用 #

在你提供的CSV转换代码里，...data的作用是把data数组中的每一个元素单独展开，添加到新数组中。

举个具体例子：

• 假设columns是{name: "姓名", age: "年龄"}，data是[{name: "张三", age: 25}, {name: "李四", age: 30}]
• 用[columns, ...data]会生成新数组：[{name: "姓名", age: "年龄"}, {name: "张三", age: 25}, {name: "李四", age: 30}]
• 而如果写成[columns, data]，新数组是：[{name: "姓名", age: "年龄"}, [{name: "张三", age: 25}, {name: "李四", age: 30}]]

这就是为什么不用扩展运算符会得到[object Object]：当map遍历到第二个元素（整个data数组）时，Object.values(row)处理的是数组对象，最终转成字符串就会显示[object Object]，而不是你需要的每一行数据。

二、结合三元运算符的正确写法 #

你之前的写法不被允许，是因为扩展运算符不能直接跟在三元表达式的分支后面。正确的做法是先通过三元表达式选择要使用的数组，再对这个数组使用扩展运算符，代码如下：

const csv = [
  columns,
  ...(condition ? anotherData : data)
].map((row) => {
  return Object.values(row).join(",");
}).join("\n");

这里的逻辑是：先判断condition的真假，选择anotherData或data其中一个数组，然后用...把选中数组的所有元素展开，添加到包含columns的新数组中，这样就能正常遍历每一行数据生成CSV了。

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