日常开发 26 个常见的 JavaScript 代码优化方案

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、空值合并运算符（??）

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

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:
         test3();
     break;
     // ……
 }
 // 优化后
 var obj = {
     1: test1,
     2: test2,
     3: test3
 };
 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('fn2');
 }
 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()

const data = {a1: 'abc',a2:'cde',a3:'efg'};
 Object.entries(data);
 /** 输出:
 [ [ 'a1', 'abc' ],
   [ 'a2', 'cde' ],
   [ 'a3', 'efg' ]
 ]
 **/

22、Object.values()

我们可以通过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 < 10000; 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';