本篇文章我们一起来看一下JavaScript的18个优化技巧，适合所有正在使用 JavaScript 编程的开发人员阅读，本文的目的在于帮助大家更加熟练的运用 JavaScript 语言来进行开发工作，希望对大家有帮助。
1. 多个条件的判断
当我们需要进行多个值的判断时，我们可以使用数组的includes方法。
//Badif (x === 'iphoneX' || x === 'iphone11' || x === 'iphone12') {//code... }//Goodif (['iphoneX', 'iphone11', 'iphone12'].includes(x)) {//code...}2. If true … else
当if-else条件的内部不包含更大的逻辑时，三目运算符会更好。
// Badlet test= boolean;if (x > 100) { test = true;} else { test = false;}// Goodlet test = (x > 10) ? true : false;//or we can simply uselet test = x > 10;嵌套条件后，我们保留如下所示的内容（复杂点的三目）：
let x = 300,let test2 = (x > 100) ? 'greater 100' : (x < 50) ? 'less 50' : 'between 50 and 100';console.log(test2); // "greater than 100"
3. Null、Undefined、’’ 空值检查
有时要检查我们为值引用的变量是否不为null或Undefined 或 '' ,我们可以使用短路写法
// Badif (first !== null || first !== undefined || first !== '') { let second = first;}// Good 短路写法let second = first|| '';4. 空值检查和分配默认值
当我们赋值，发现变量为空需要分配默认值 可以使用以下短路写法
let first = null,let second = first || 'default'console.log(second)
5. 双位操作符
位操作符是 JavaScript 初级教程的基本知识点，但是我们却不常使用位操作符。因为在不处理二进制的情况下，没有人愿意使用 1 和 0。
但是双位操作符却有一个很实用的案例。你可以使用双位操作符来替代 Math.floor( )。双否定位操作符的优势在于它执行相同的操作运行速度更快
// BadMath.floor(4.9) === 4 //true// Good~~4.9 === 4 //true
6. ES6常见小优化 - 对象属性
const x,y = 5// Badconst obj = { x:x, y:y }// Goodconst obj = { x, y }
7. ES6常见小优化-箭头函数
//Badfunction sayHello(name) { console.log('Hello', name);}setTimeout(function() { console.log('Loaded')}, 2000)list.forEach(function(item) { console.log(item)})// Goodconst sayHello = name => console.log('Hello', name)setTimeout(() => console.log('Loaded'), 2000)list.forEach(item => console.log(item))8. ES6常见小优化-隐式返回值
返回值是我们通常用来返回函数最终结果的关键字。只有一个语句的箭头函数，可以隐式返回结果（函数必须省略括号（{ }），以便省略返回关键字）。
要返回多行语句（例如对象文本），需要使用（）而不是{ }来包裹函数体。这样可以确保代码以单个语句的形式进行求值。
//Badfunction calcCircumference(diameter) { return Math.PI * diameter}// Goodconst calcCircumference = diameter => ( Math.PI * diameter)9. ES6常见小优化-解构赋值
const form = { a:1, b:2, c:3 }//Badconst a = form.aconst b = form.bconst c = form.c// Goodconst { a, b, c } = form10. ES6常见小优化-展开运算符
返回值是我们通常用来返回函数最终结果的关键字。只有一个语句的箭头函数，可以隐式返回结果（函数必须省略括号（{ }），以便省略返回关键字）。
要返回多行语句（例如对象文本），需要使用（）而不是{ }来包裹函数体。这样可以确保代码以单个语句的形式进行求值。
const odd = [ 1, 3, 5 ]const arr = [ 1, 2, 3, 4 ]// Badconst nums = [ 2, 4, 6 ].concat(odd)const arr2 = arr.slice( )// Goodconst nums = [2 ,4 , 6, ...odd]const arr2 = [...arr]
11. 数组常见处理
掌握数组常见方法，记在脑子里，不要写的时候再去看API了，这样可以有效提升编码效率，毕竟这些方法每天都在用
every some filter map forEach find findIndex reduce includes
const arr = [1,2,3]//every 每一项都成立，才会返回trueconsole.log( arr.every(it => it>0 ) ) //true//some 有一项都成了，就会返回trueconsole.log( arr.some(it => it>2 ) ) //true//filter 过滤器console.log( arr.filter(it => it===2 ) ) //[2]//map 返回一个新数组console.log( arr.map(it => it==={id:it} ) ) //[ {id:1},{id:2},{id:3} ]//forEach 没有返回值console.log( arr.forEach(it => it===console.log(it)) ) //undefined//find 查找对应值 找到就立马返回符合要求的新数组console.log( arr.find(it => it===it>2) ) //3//findIndex 查找对应值 找到就立马返回符合要求新数组的下标console.log( arr.findIndex(it => it===it>2) ) //2//reduce 求和或者合并数组console.log( arr.reduce((prev,cur) => prev+cur) ) //6//includes 求和或者合并数组console.log( arr.includes(1) ) //true//数组去重const arr1 = [1,2,3,3]const removeRepeat = (arr) => [...new Set(arr1)]//[1,2,3]//数组求最大值Math.max(...arr)//3Math.min(...arr)//1//对象解构 这种情况也可以使用Object.assign代替let defaultParams={ pageSize:1, sort:1}//goods1let reqParams={ ...defaultParams, sort:2}//goods2Object.assign( defaultParams, {sort:2} )12. 比较返回
在return语句中使用比较可以将代码从5行减少到1行。
// Badlet testconst checkReturn = () => { if (test !== undefined) { return test; } else { return callMe('test'); }}// Goodconst ch