你不知道的十个 JS 小技巧

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

1. 使用 const 定义

在开发中不要过度声明变量，尽量使用表达式和链式调用形式。然后一般能用 const 就不要用 let 。这种模式写多了之后，你会发现在项目中几乎找不到几个用 let 的地方：

// bad
let result = false;
if (userInfo.age > 30) {result = true;
}
// good
const result = userInfo.age > 30;
复制代码

在项目中很多同事都会这样写，

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

但实际上 == 和 === 的表达式可以直接给变量赋值：

handleFormChange(e) {const isUpload = (e.target.value === 'upload');
}
复制代码

如果要取反也很简单：

handleFormChange(e) {const isManual = (e.target.value !== 'upload');
}
复制代码

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

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

const condition = true;
const person = {id: 1,name: "dby",...(condition && { age: 12 }),
};
复制代码

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

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

这是 CRA 中 Webpack 配置的源码：

module.exports = {plugins: [new HtmlWebpackPlugin(),isEnvProduction &&new MiniCssExtractPlugin(),useTypeScript &&new ForkTsCheckerWebpackPlugin(),].filter(Boolean),
}
复制代码

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

4. 解构赋值

解构赋值很方便，项目中经常会用到，可以分为以下两个场景：

对象/数组的解构；
函数参数解构；

这里介绍四种常用技巧。

1) 深度解构

大部分时候我们只会解构一层，但实际上解构赋值是可以深度解构的：

let obj = {name: "dby",a: {b: 1}
}
const { a: { b } } = obj;
console.log(b); // 1
复制代码

2) 解构时使用别名

假如后端返回的对象键名不是我们想要的，可以使用别名：

const obj = {// 这个键名太长了，我们希望把它换掉aaa_bbb_ccc: {name: "dby",age: 12,sex: true}
}
const { aaa_bbb_ccc: user } = obj;
console.log(user); // { name: "dby", age: 12, sex: true }
复制代码

3) 解构时使用默认值

对象的解构可以使用默认值，默认值生效的条件是，对象的属性值严格等于 undefined ：

fetchUserInfo().then(({ aaa_bbb_ccc: user = {} }) => {// ...})
复制代码

以上三个特性可以结合使用

4) 使用短路避免报错

解构赋值虽然好用，但是要注意解构的对象不能为 undefined 、null ，否则会报错，故要给被解构的对象一个默认值：

const {a,b,c,d,e} = obj || {};
复制代码

5. 展开运算符

使用展开运算符合并两个数组或者两个对象：

const a = [1,2,3];
const b = [1,5,6];
// bad
const c = a.concat(b);
// good
const c = [...new Set([...a,...b])];const obj1 = { a:1 };
const obj2 = { b:1 };
// bad
const obj = Object.assign({}, obj1, obj2);
// good
const obj = { ...obj1, ...obj2 };
复制代码

这里要注意一个问题，对象和数组合并虽然看上去都是 ... ，但是实际上是有区别的。

ES2015 扩展运算符只规定了在数组和函数参数中使用，但并没有规定可以在对象中使用，并且是基于 for...of 的，因此被展开的只能是数组、字符串、Set、Map 等可迭代对象，假如将普通对象展开到数组就会报错。

对象中的 ... 实际上是 ES2018 中的对象展开语法，相当于 Object.assign ：

babeljs.io/docs/en/bab…

6. 检查属性是否存在对象中

可以使用 in 关键字检查对象中是否存在某个属性：

const person = { name: "dby", salary: 1000 };
console.log('salary' in person); // true
console.log('age' in person); // false
复制代码

但是 in 关键字其实并不安全，会把原型上的属性也包括进去，例如：

"hasOwnProperty" in {}; // true
"toString" in {}; // true
复制代码

所以推荐使用下面的方法进行判断：

Object.prototype.hasOwnProperty.call(person, "salary"); // true
复制代码

不过上面这样的问题就是太长了，每次使用都要这样写很麻烦。ECMA 有一个新的提案 Object.hasOwn() ，相当于 Object.prototype.hasOwnProperty.call() 的别名：

Object.hasOwn(person, "salary"); // true
复制代码

developer.mozilla.org/en-US/docs/…

需要注意这个语法存在兼容性问题（Chrome > 92），不过只要正确配置 polyfill 就可以放心使用。

7. 对象的遍历

项目中很多同事都会这样写：

for (let key in obj) {if (Object.prototype.hasOwnProperty.call(obj, key)) {// ...}
}
复制代码

吐槽：用 Object.keys 或者 Object.entries 转成数组就可以用数组方法遍历了，而且遍历的是自身属性，不会遍历到原型上。

Object.keys(obj).forEach(key => {// ...
})Object.entries(obj).forEach(([key, val]) => {// ...
})
复制代码

反驳：有时候不想遍历整个对象，数组方法不能用 break 终止循环呀。

吐槽：看来你对数组方法掌握还是不够彻底，使用 find 方法找到符合条件的项就不会继续遍历。

Object.keys(obj).find(key => key === "name");
复制代码

总结：在开发中尽量不要写 for 循环，无论数组和对象。对象就通过 Object.keys 、Object.values 、Object.entries 转为数组进行遍历。这样可以写成 JS 表达式，充分利用函数式编程。

8. 使用 includes 简化 if 判断

在项目中经常看到这样的代码：

if (a === 1 || a === 2 || a === 3 || a === 4) {// ...
}
复制代码

可以使用 includes 简化代码：

if ([1, 2, 3, 4].includes(a)) {// ...
}
复制代码

9. Promise 两个小技巧

1) async/await 优雅异常处理

在 async 函数中，只要其中某个 Promise 报错，整个 async 函数的执行就中断了，因此异常处理非常重要。但实际上 async 函数的异常处理非常麻烦，很多同事都不愿意写。有没有一种简单的方法呢？看到一个 async-to-js 的 npm 包，可以优雅处理 async 函数的异常，不需要手动添加 try...catch 捕获异常：

import to from 'await-to-js';async function asyncFunctionWithThrow() {const [err, user] = await to(UserModel.findById(1));if (!user) throw new Error('User not found');
}
复制代码

实际上就是在 await 前面返回的 Promise 封装了一层，提前处理异常。源码非常简单，本人自己也实现了下：

function to(awaited) {// 不管是不是 Promise 一律转为 Promiseconst p = Promise.resolve(awaited);// await-to-js 采用 then...catch 的用法// 但实际上 then 方法第一个回调函数里面并不包含会抛出异常的代码// 因此使用 then 方法第二个回调函数捕获异常，不需要额外的 catchreturn p.then(res => {return [null, res];},err => {return [err, undefined];})
}
复制代码

2) Promise 作为状态机

看到有同事写过这样的代码：

function validateUserInfo(user) {if (!userList.find(({ id }) => id === user.id)) {return {code: -1,message: "用户未注册"}}if (!userList.find(({ username, password }) =>username === user.username &&password === user.password)) {return {code: -1,message: "用户名或密码错误"}}return {code: 0,message: "登录成功"}
}
复制代码

观察发现这边其实就是两个状态，然后还需要一个字段提示操作结果。这种情况下我们可以使用 Promise 。有人说为啥咧，明明没有异步逻辑啊。我们知道，Promise 其实就是一个状态机，即使不需要处理异步逻辑，我们也可以使用状态机的特性：

function validateUserInfo(user) {if (!userList.find(({ id }) => id === user.id)) {return Promise.reject("用户未注册");}if (!userList.find(({ username, password }) =>username === user.username &&password === user.password)) {return Promise.reject("用户名或密码错误");}return Promise.resolve("登录成功");
}// 使用如下
validateUserInfo(userInfo).then(res => {message.success(res);}).catch(err => {message.error(err);})
复制代码

明显这样代码就变得非常优雅了，但其实还可以更优雅。我们知道 async 函数返回值是一个 Promise 实例，因此下面两个函数是等价的：

// 普通函数返回一个 Promsie.resolve 包裹的值
const request = (x) => Promise.resolve(x);// async 函数返回一个值
const request = async (x) => x;
复制代码

既然最后返回一个 Promise ，为何不直接在函数前面加 async 修饰符呢。这样成功的结果只要直接返回就行，不用 Promise.resolve 包裹：

async function validateUserInfo(user) {if (!userList.find(({ id }) => id === user.id)) {return Promise.reject("用户未注册");}if (!userList.find(({ username, password }) =>username === user.username &&password === user.password)) {return Promise.reject("用户名或密码错误");}return "登录成功";
}
复制代码

对 async 函数不熟悉的同学，可以参考阮一峰 ES6 教程

更进一步，由于在 Promise 内部抛出异常等同于被 reject ，因此我们可以使用 throw 语句替代 Promise.reject() ：

async function validateUserInfo(user) {if (!userList.find(({ id }) => id === user.id)) {throw "用户未注册";}if (!userList.find(({ username, password }) =>username === user.username &&password === user.password)) {throw "用户名或密码错误";}return "登录成功";
}
复制代码

throw 语句的用法可以参考 MDN 文档

10. 字符串不满两位补零

这个需求在开发中挺常见。例如，调用 Date api 获取到日期可能只有一位：

let date = new Date().getDate(); // 3
复制代码

常规做法:

if (data.toString().length == 1) {date = `0${date}`；
}
复制代码

使用 String.prototype.slice ：

// 不管几位，都在前面拼接一个 0 ，然后截取最后两位
date = `0${date}`.slice(-2);
复制代码

使用 String.prototype.padStart ：

// 当字符串长度小于第一个参数值，就在前面补第二个参数
date = `${date}`.padStart(2, 0);
复制代码

希望能对你有所帮助！

需要领取免费资料的小伙伴们，添加小助手vx：SOSOXWV 即可免费领取资料哦！