JavaScript中是否有兼容零值的默认值设置简写操作符？

嘿，这个坑我踩过好多次！你说的||运算符的问题确实头疼——当配置项的值是0、''、false这些合法的假值时，||会把它们当成“没有传入有效值”，直接用默认值，完全不符合我们的预期。

不用写一堆if (xxx !== undefined)的显式检查，有几种简洁的写法可以解决这个问题：

1. 空值合并运算符（??）+ 可选链（ES2020+） #

这是目前最简洁且语义明确的方案，??只会在左侧值为null或undefined时才使用右侧的默认值，完美避开0、''这些假值的误判：

class Derp {
  constructor(config) {
    // 可选链?. 防止config本身为undefined时报错
    this.index = config?.index ?? null;
    this.name = config?.name ?? "derpy";
  }
}

现在哪怕你传入{ index: 0 }，this.index也会正确设为0，而不是被替换成null。

2. 解构赋值+默认值 #

这种写法可读性很强，把所有配置项的默认值集中在一起，一眼就能看明白每个属性的默认值是什么：

class Derp {
  // 给config设默认空对象，避免不传参数时解构报错
  constructor(config = {}) {
    const { index = null, name = "derpy" } = config;
    this.index = index;
    this.name = name;
  }
}

解构时的默认值规则和??一致，只有当config中对应属性为undefined时才会用默认值，0这类假值会被正常保留。

3. Object.assign结合默认对象 #

如果你的类有很多属性，这种方式可以把默认值统一放到一个对象里，看起来更整洁：

class Derp {
  constructor(config = {}) {
    const defaults = {
      index: null,
      name: "derpy"
    };
    // 按顺序覆盖：defaults的属性会被config的同名属性替换
    Object.assign(this, defaults, config);
  }
}

只要config里存在某个属性（哪怕值是0），就会覆盖默认值，完全不会出现误判的情况。

如果你的项目环境支持ES2020+，首推第一种??的写法，简洁又直观；如果需要兼容旧浏览器，解构赋值的方案兼容性更好。

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