你不知道的 JS 代码小技巧

总结了一些开发常用的 JS 小技巧，让你的代码更优雅！

1. 通过条件判断给变量赋布尔值

先来看一段代码：

handleFormChange(e) {
  let isUpload;
  if (e.target.value === 'upload') {
    isUpload = true;
  } else {
    isUpload = false;
  }
}

在项目中很多同事都会这样写，但实际上 == 和 === 的表达式可以直接给变量赋值：

handleFormChange(e) {
  let isUpload = (e.target.value === 'upload');
}

如果要取反也很简单：

handleFormChange(e) {
  let isManual = (e.target.value !== 'upload');
}

2. 有条件地向对象添加属性

可以使用展开运算符来有条件地向对象中添加属性：

const condition = true;
const person = {
  id: 1,
  name: 'John Doe',
  ...(condition && { age: 16 }),
};

如果 condition 为 true ，则 { age: 16 } 会被添加到对象中；如果 condition 为 false ，相当于展开 false ，不会对对象产生任何影响

3. 有条件地向数组添加元素

这是 CRA 中 Webpack 配置的源码：

{
  plugins: [
    new HtmlWebpackPlugin(),
    isEnvProduction &&
      new MiniCssExtractPlugin(),
    useTypeScript &&
      new ForkTsCheckerWebpackPlugin(),
  ].filter(Boolean),
}

上面代码中，只有 isEnvProduction 为 true 才会添加 MiniCssExtractPlugin 插件；当 isEnvProduction 为 false 则会添加 false 到数组中，所以最后使用了 filter 过滤

参考

我的代码简洁之道

你会用ES6，那倒是用啊！

有个开发者总结这 15 优雅的 JavaScript 个技巧