优化JS代码的34种方法（上）

1. 含有多个条件的if语句

//longhand
if(x === 'abc' || x === 'def' || x === 'ghi' || x == 'jkl'){//logic
}//shorthand
if(['abc','def','ghi','jkl'].includes(x)){//logic
}

2. if…else的缩写法

当我们在if-else条件下的逻辑比较简单时，我们可以使用三元条件运算符。

//longhand
let test:boolean;
if(x > 100){test = true
}else{test = false
}
//shorthand
let test = (x > 10) ? true : false;//or we can use directly
let test = x > 10;console.log(test);

如果包含嵌套条件，也可以使用这种方法。

let x = 300;
test2 = (x > 100) ? 'greater 100' : (x < 50) ? 'less 50' : 'between 50 and 100'console.log(tet2);//'greater 100'

3. 定义变量

当我们想要定义两个变量，并且这两个变量拥有相的值或者类型的话，我们可以运用这种简略的表达方式。

// longhand
let test = 1;
let test2 = 3;//shorthand
let test1, test2 = 1;

4. 关于Null,undefined的检查

当我们创建新的变量时，有时候需要检查我们引用变量的值是否为null,或是否是undefined,js本身就有一种缩写法能实现这个功能。

//longhand
if(test !== null || test1 !== undefined || test !== '' ){let test2 = test1;
}//shorthand
let test2 = test1 || '';

5. Null检查与指定默认值

let test1 = null, test2 = test || '';
conosle.log('null check',test2);//output will be ""

6. Undefined值检查与默认赋值

let test1 = undefined ,test2 = test1 || ''
console.log("undefined check",test2);//output will be ""

正常值检查

let test1 = 'test',test2 = test1 || ''
console.log(test2);//output:'test'

7.聚合运算符

？？是聚合运算符，如果左值为null或undefined, 就返回右值。默认值返回左值。

const test = null ?? 'default';
console.log(test);
// expected output : 'default' const test1 = 0 ?? 2;
console.log(test1);
//expected output:0;

8. 为多个变量赋值

当我们处理多个变量，想为不同的变量赋不同的值时，就会发现这种简略的表达方式的实用之处了。

// longhand
let test1 , test2 , test3;
test1 = 1;
test2 = 2;
test3 = 3;//shorthangd
let [test1, test2, test3] = [1,2,3]

9. 赋值运算符简略的表达方式

通常，我们会在程序中处理大量的算术运算符。而对于JavaScript变量的赋值运算符来说，这是其中一个实用的技巧。

//longhand
test1 = test1 + 1;
test2 = test2 - 1;
test3 = test3 * 20;//shorthand
test1++;
test2--;
test3*=20;

10. 判断变量是否存在的缩写法

这是我们工作中常用的缩写表达方式之一，如今它仍然值得被提起。

// langhand
if(tets === true) or if(test !== "") or if(test !== null)//shorthand
if(test1)

注意：如果test1有任何值，程序都会执行if(test1){} 内的逻辑，这种写法在判断NULL或undefined值时普遍使用。

11. 多种条件下的与(&&)运算符

如果我们只在变量为true的时候调用函数，那么我们就可以运用&&运算符。

//longhand
if(test1){callMethod();
}//shorthand
tets1 && callMethod();

12. foreach循环简略的表达方式

这是迭代常用的简略的表达方式技巧之一。

//longhand
for(var i = 0; i<testData.length; i++)//shorthand
for(let i in testData) or for(let i in testData)

每个变量的数组

function testData(element,index,array){console.log('test['+index+']='+element);
}
[11,24,32].forEach(testData);
//log:test[0] = 11,test[1] = 24, test[2] = 32

13. 比较结果的返回值

在return语句中，我们也可以使用比较的语句。这样，原来需要5行代码才能实现的功能，现在只需要1行，大大减少了代码量。

// langhand
let test;
function chechReturn(){if(!(test === undefined)){return test;}else{return callMe('test');}
}
var data = checkReturn();
console.log(data);//output testfunction callMe(val){console.log(val)
}//shorthand
function checkReturn(){return test || callMe('test')
}

14. 箭头函数

//longhand
function add(a,b){return a + b;
}//shorthand
const add = (a,b) => a + b;

更多实例如下

function callMe(){console.log("Hello",name);
}
callMe = name => console.log("Hello", name);

15. 调用短函数

我们可以运用三元运算符实现如下功能

// longhand
function test1(){console.log('test');
}
function test2(){console.log('test2')
}
var test3 = 1;
if(test3 == 1){tet(1);
}else{test2()
}//shorthand
(test3 === 1 ? tets1 : test2)();