总结了一些开发常用的 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
:
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
复制代码
需要注意这个语法存在兼容性问题(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 一律转为 Promise
const p = Promise.resolve(awaited);
// await-to-js 采用 then...catch 的用法
// 但实际上 then 方法第一个回调函数里面并不包含会抛出异常的代码
// 因此使用 then 方法第二个回调函数捕获异常,不需要额外的 catch
return 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 即可免费领取资料哦!