26个JS代码优化方案 人手必备 人手必备 查看更多
时隔半年我又回来了，期间发生了很多事情。从大学刚毕业来到一线找工作，也由于今年出现的特殊情况，掘金断就更了一段时间。嗯～，就不给自己找借口啦。现在全部安顿好了，把精力开始慢慢回归到写作上，希望在 2021 新的一年和大伙儿一起在掘金成长！
2021 第一期。
本篇文章整理了在日常开发中 30 个常见的 JavaScript 代码优化方案。
本文章已在 Github blog
收录，欢迎大伙儿～ Star，文章中若存在不足或者 issues，欢迎在下方或 Github 留言！
1、 NUll
、 Undefined
、 ''
检查
我们在创建新变量赋予一个存在的变量值的时候，并不希望赋予 null
或 undefined
，我们可以采用一下简洁的赋值方式。
if(test !== null || test !== undefined || test !== ''){ let a1 = test; } // 优化后 let a1 = test || ''
2、 null
值检查并赋予默认值
let test = null; let a1 = test || '';
3、 undefined
值检查并赋予默认值
let test = undefined; let a1 = test || '';
4、空值合并运算符（ ??
）
空值合并操作符（ ??
）是一个逻辑操作符,当左侧的操作数为 null
或者 undefined
时，返回其右侧操作数，否则返回左侧操作数。
const test= null ?? 'default string'; console.log(test); console.log(foo); // expected output: "default string" const test = 0 ?? 42; console.log(test); // expected output: 0
具体介绍可戳这 MDN
5、声明变量
当我们想要声明多个共同类型或者相同值的变量时，我们可以采用一下简写的方式。
let test1; let test2 = 0; // 优化后 let test1, test2 = 0;
6、 if
多条件判断
当我们进行多个条件判断时，我们可以采用数组 includes
的方式来实现简写。
if(test === '1' || test === '2' || test === '3' || test === '4'){ // 逻辑 } // 优化后 if(['1','2','3','4'].includes(test)){ // 逻辑处理 }
7、 if...else
的简写
当存在一层或两层 if...else
嵌套时，我们可以使用三元运算符来简写。
let test = null; if(a > 10) { test = true; } else { test = false; } // 优化后 let test = a > 10 ? true : false; // 或者 let test = a > 10;
8、多变量赋值
当我们想给多个变量赋不同的值的时候，我们可以采用一下简洁的速记方案。
let a = 1; let b = 2; let c = 3; // 优化 let [a, b, c] = [1, 2, 3];
9、算术运算简写优化
当我们在开发中经常用到算数运算符时，我们可以使用一下方式进行优化和简写。
let a = 1; a = a + 1; a = a - 1; a = a * 2; // 优化 a++; a--; a *= 2;
10、有效值判断
我们经常会在开发中用到的，在这也简单整理一下。
if (test1 === true) if (test1 !== "") if (test1 !== null) // 优化 if (test1)
11、多条件( &&
)判断
我们通常在项目中遇到条件判断后跟函数执行，我们可以使用一下简写方式。
if (test) { foo(); } //优化 test && foo();
12、多个比较 return
在 return 的语句中使用比较，可以将其进行缩写的形式如下。
let test; function checkReturn() { if (!(test === undefined)) { return test; } else { return foo('test'); } } // 优化 function checkReturn() { return test || foo('test'); }
13、 Switch
的缩写
遇到如下形式的 switch 语句，我们可以将其条件和表达式以键值对的形式存储。
switch (type) { case 1: test1(); break; case 2: test2(); break; case 3: test(); break; // ...... } // 优化 var obj = { 1: test1, 2: test2, 3: test }; obj[type] && obj[type]();
14、for 循环缩写
for (let i = 0; i < arr.length; i++) // 优化 for (let i in arr) or for (let i of arr)
15、箭头函数
function add() { return a + b; } // 优化 const add = (a, b) => a + b;
16、短函数调用
function fn1(){ console.log('fn1'); } function fn2(){ console.log('fn1'); } if(type === 1){ fn1(); }else{ fn2(); } // 优化 (type === 1 ? fn1 : fn2)();
17、数组合并与克隆
const data1 = [1, 2, 3]; const data2 = [4 ,5 , 6].concat(data1); // 优化 const data2 = [4 ,5 , 6, ...data1];
数组克隆：
const data1 = [1, 2, 3]; const data2 = test1.slice() // 优化 const data1 = [1, 2, 3]; const data2 = [...data1];
18、字符串模版
const test = 'hello ' + text1 + '.' // 优化 const test = `hello ${ text}.`
19、数据解构
const a1 = this.data.a1; const a2 = this.data.a2; const a3 = this.data.a3; // 优化 const { a1, a2, a3 } = this.data;
20、数组查找特定值
数组按照索引来查找特定值，我们可以通过逻辑位运算符 ～
来代替判断。
“~”运算符（位非）用于对一个二进制操作数逐位进行取反操作
if(arr.indexOf(item) > -1) // 优化 if(~arr.indexOf(item)) // 或 if(arr.includes(item))
21、 Object.entries()
我们可以通过 Object.values() 将对象的内容转化为数组。如下：
const data = { a1: 'abc', a2: 'cde', a3: 'efg' }; Object.entries(data); /** 输出: [ [ 'a1', 'abc' ], [ 'a2', 'cde' ], [ 'a3', 'efg' ] ] **/
22、 Object.values()
const data = { a1: 'abc', a2: 'cde' }; Object.values(data); /** 输出: [ 'abc', 'cde'] **/
23、求平方
Math.pow(2,3); // 优化 2**3；
24、指数简写
for (var i = 0; i < 100000; i++) // 优化 for (var i = 0; i < 1e4; i++) {
25、对象属性简写
let key1 = '1'; let key2 = 'b'; let obj = { key1: key1, key2: key2}; // 简写 let obj = { key1, key2 };
26、字符串转数字
let a1 = parseInt('100');
let a2 = parseFloat('10.1');
// 简写
let a1 = +'100';
let a2 = +'10.1';
历史文章
动画：《大前端吊打面试官系列》 之原生 JavaScript 精华篇
:heart: 欢迎素质三连[点赞 + 收藏 + 评论]
我是小鹿，文章同步更新 Github
，也可以在微信搜一搜「 小鹿动画学编程
」第一时间接收文章更新通知，回复“ 前端
”可获取小鹿整理的备战面试小册。
About The Author
