你不知道的十个 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: "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");
复制代码8. 使用 includes 简化 if 判断
在项目中经常看到这样的代码：
if (a === 1 || a === 2 || a === 3 || a === 4) {
// ...
}
复制代码可以使用 includes 简化代码：
if ([1, 2, 3, 4].includes(a)) {
// ...
}
复制代码9. Number 和 String 相互转换
Number 转为 String ：
let num = 1;
num.toString(); // "1"
String(num); // "1"
num + ""; // "1"
`${num}`; // "1"
复制代码String 转为 Number ：
let s = "233";
+s; // 233
Number(s); // 233
parseInt(s); // 233
复制代码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);
复制代码