使用扩展运算符在数组内映射数组时返回结果异常的问题

问题原因 #

你遇到的问题核心是逗号运算符的特性：在return语句中用逗号分隔两个对象时，JavaScript会忽略逗号前面的表达式，只返回最后一个表达式的值。所以你的map每次迭代都只返回了第二个{age, color}对象，最终数组自然只有这部分内容。

解决方案 #

方法1：使用flatMap（推荐）

flatMap可以先对数组元素执行map操作，再将结果扁平化一层，正好满足你需要将每个元素映射为两个对象并平铺到最终数组的需求：

const cats = ["Tom", "Ginger", "Angela"];

const array = [
  // 若需要保留Ben的对象，取消下方注释
  // {
  //   name: "Ben",
  //   sex: "male"
  // },
  ...cats.flatMap((element) => [
    {
      name: element,
      sex: element !== "Angela" ? "male" : "female"
    },
    {
      age: element !== "Angela" ? "20" : "18",
      color:
        element === "Tom" ? "black" :
        element === "Ginger" ? "orange" : "white"
    }
  ])
];

console.log(array);

方法2：map + flat 组合

如果你更习惯分开写逻辑，也可以先用map返回包含两个对象的数组，再用flat()扁平化：

const cats = ["Tom", "Ginger", "Angela"];

const array = [
  // {
  //   name: "Ben",
  //   sex: "male"
  // },
  ...cats.map((element) => [
    {
      name: element,
      sex: element !== "Angela" ? "male" : "female"
    },
    {
      age: element !== "Angela" ? "20" : "18",
      color:
        element === "Tom" ? "black" :
        element === "Ginger" ? "orange" : "white"
    }
  ]).flat()
];

console.log(array);

方法3：手动遍历推送对象

如果偏好命令式写法，直接用forEach遍历数组，逐个将两个对象推送到结果数组中：

const cats = ["Tom", "Ginger", "Angela"];
const array = [];

// 若需要保留Ben的对象，取消下方注释
// array.push({ name: "Ben", sex: "male" });

cats.forEach((element) => {
  array.push(
    {
      name: element,
      sex: element !== "Angela" ? "male" : "female"
    },
    {
      age: element !== "Angela" ? "20" : "18",
      color:
        element === "Tom" ? "black" :
        element === "Ginger" ? "orange" : "white"
    }
  );
});

console.log(array);

结果验证 #

以上三种方法都能输出你预期的数组：

[{"name": "Tom", "sex": "male"},
{"age":"20","color":"black"},
{"name": "Ginger", "sex": "male"},
{"age":"20","color":"orange"},
{"name": "Angela", "sex": "female"},
{"age":"18","color":"white"}]

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