箭头函数语法咨询：如何在map中添加非undefined的数组元素

嘿，刚接触箭头函数很正常，咱们一步步捋清楚这个问题～首先先指出你代码里的两个小细节问题，再给你几种靠谱的写法：

先纠正两个小错误 #

• 你写的car.owner !== "undefined"是在判断字符串"undefined"，但我们要判断的是原始值undefined，应该去掉引号写成car.owner !== undefined；或者更严谨的可以用typeof car.owner !== "undefined"（避免属性未声明的报错）。
• 直接用map的话，条件不满足时会返回undefined，最终数组里会混进多余的undefined元素，所以最好结合filter来先筛选再处理。

推荐写法1：先筛选再映射（最清晰） #

先用filter把有owner的车筛选出来，再用map处理添加元素，这样最终的carList里不会有无效元素：

let carList = cars
  .filter(car => car.owner !== undefined)
  .map(car => {
    // 这里写你要执行的操作，返回要添加到数组的元素
    // 举个例子：返回包含owner信息的对象
    return {
      model: car.model,
      ownerName: car.owner
    };
  });

写法2：在map中处理条件（适合必须用单步map的场景） #

如果一定要在map里完成判断，记得处理条件不满足的情况，之后过滤掉无效值：

let carList = cars
  .map(car => {
    if (car.owner !== undefined) {
      // 执行你的操作，返回要添加的元素
      return car.model + " - " + car.owner;
    }
    // 条件不满足时返回undefined，后续过滤掉
  })
  .filter(item => item !== undefined);

写法3：隐式返回的简洁写法（适合简单逻辑） #

用箭头函数的隐式返回结合短路求值，一行搞定筛选+映射，最后过滤掉无效值：

let carList = cars
  .map(car => car.owner !== undefined && `${car.model} - ${car.owner}`)
  .filter(Boolean); // Boolean会自动过滤掉false、undefined、null等假值

补充箭头函数语法小提示 #

• 如果箭头函数里有多行代码（比如包含if语句），必须用{}包裹，并且手动写return来返回值；
• 如果是单行逻辑，可以省略{}和return，实现隐式返回（比如写法3里的箭头函数）。

内容的提问来源于stack exchange，提问作者J. Doe