为什么JavaScript要书写优化？

第一个原因：我们写代码是给机器看的，也是给程序员看的

第二个原因：JS是弱类型语言，写得太随意编码风格就不好

第三个原因：潜移默化提高程序性能

那要怎么书写优化？

1. 要按强类型风格写代码

   var num,str,obj;                            // 没有指明类型
   var numVal = 0, strVal = '', objVal = null; // 指明变量类型
   

2. 不要随意改变变量类型

   var num = 7;               // num类型为number
   num = '-' + num;           // num类型变为string
   // 优秀写法
   var numVal = 7;            // numVal类型为number
   var strVal = '-' + numVal; // 重新定义一个变量没有影响到numVal类型
   

3. 要函数返回类型确定

   const getMoney = (num) => {
     if(num < 0) return '';  // 返回类型为string
     else return num * 2;    // 返回类型为number
   }
   // 优秀写法
   const getPrice = (num) => {
    if(num < 0) return -1;   // 返回类型为number,-1表示不合法
     else return num * 2;    // 返回类型为number
   }
   

4. 要让代码运行在局部作用域

   在一个script标签里面，代码的上下文都是全局作用域，全局作用域比较复杂，查找起来比较慢。可以使用function制造一个局部作用域，或者使用ES6的块级作用域。

   <script>
     !function(){
       var myId = document.querySelector('#my-id');
       myId.style.width = '666px';
     }()
   </script>
   

5. 不要滥用闭包

   const getMoney = (num) => {
      num++;
      return (() => {
        var factor = 2;
        return num * factor - 5;
      })()
   }
   // 优秀写法
   const getPrice = (num) => {
      num++;
      return ((num) => {
        var factor = 2;
        return num * factor - 5;
      })(num)
   }
   

   闭包的作用在于可以让子级作用域使用父级作用域的变量，同时变量在不同闭包是不可见的。第一种写法中num就会一级一级往上查找，如果闭包嵌套越深，变量查找时间越长；第二种写法就保证了num变量和factor变量查找时间是一样的，都是当前作用域。

6. 避免==的使用

   （1）类型确定没必要使用==

   （2）类型不确定，可以手动类型转换

   （3）使用==，用JSLint检查会报错

   （4）使用==可能出现一些奇怪的现象，会给代码埋下地雷，随时引爆

   null == undefined               // true
   '' == '0'                       // false
   0 == ''                         // true
   0 == '0'                        // true
   ' \t\r\n' == 0                  // true
   new String('abc') == 'abc'      // true
   new Boolean(true) == true       // true
   true == 1                       // true
   NaN == NaN                      // false
   

7. 要合并表达式

   // 1.使用三目运算符取代简单的if-else
   const getPrice = (num) => {
     return num < 0 ? return -1 : num * 2;
   }
   // 2.使用连等
   var obj = {...};
   // 3.使用自增
   var num = 2;
   num++;
   

8. 要减少魔数

   // 魔数
   const fn = ('seller','sell', 5, true) => {};
   // 可以给变量起个名字
   let naireType = 'seller';
   let dialogType = 'seller';
   let questionNum = 5;
   let disable = true;
   const fn1 = (naireType,dialogType,questionNum,disable) => {};
   

9. 使用ES6简化代码

   （1）使用箭头函数取代小函数

   （2）使用ES6的class

   （3）字符串拼接

   （4）块级作用域变量

参考书籍：《高效前端：Web高效编程与优化实践》