Chapter 1 ES6、模块化、打包

1. ES6基础

1. 语言特性：
   • const, let：const为常量，一旦定义不可修改。let为块级作用域变量。
   • 函数：
     1. 箭头函数：语法糖，为匿名函数。
     2. this在箭头函数中的使用：
        js对象中的嵌套函数this会指向global对象：

        var val = "global";
        var obj = {
            val: "locale",
            getVal: function() {
                return function() {
                  console.log(this.val);
                }
            }
        }
        obj.getVal()() //输出"global"
        

        解决方案：1.为this赋值, 2.使用bind绑定上下文

        // 定义时将this值赋值给变量
        var val = "global";
        var obj = {
            val: "locale",
            getVal: function() {
                var self = this;
                return function() {
                  console.log(self.val);
                }
            }
        }
        obj.getVal()() //输出"locale"
        

        // 使用bind绑定上下文obj
        var val = "global";
        var obj = {
            val: "locale",
            getVal: function() {
                return function() {
                  console.log(this.val);
                }.bind(this);
            }
        }
        obj.getVal()() //输出"locale"
        

        解决方案3：使用箭头函数

        var val = "global";
        var obj = {
            val: "locale",
            getVal: function() {
                return () => {
                  console.log(this.val);
                }
            }
        }
        obj.getVal()() //输出"locale"
        

     3. 函数默认参数：
        ES6前默认参数需要额外指定，例如：values = values || [];
        ES6指定函数默认参数：

        function whatsUp(name = 'Love Me Like You Do', type = 'english') {
           console.log("I'm listening an " + type + " song: " + name + ", right now.");
        }
        whatsUp();
        

     4. Rest参数：函数最后一个参数前带有...，则该参数会转换为数组。

        function restFun(name, ...args) {
          console.log("list " + name + ": " + args);
        }
        restFun();
        

        注意：Rest参数是数组，arguments只是类数组对象。Rest参数可使用数组方法，例：sort、map等。尽量使用Rest参数替代arguments。
   • 展开操作符：...即展开操作符，允许一个表达式展开。
     1. 用于函数调用：将数组依次作为参数进行调用。
        ES6前使用apply

        function test(gender, name) {
          console.log((gender === "female" ? "Her" : "His") + " name is "+ name);
        }
        test.apply(null, ["female", "Elizabeth"]); //Her name is Elizabeth          
        

        ES6使用展开操作符

        test(...["female", "Elizabeth"]);  //Her name is Elizabeth
        

     2. 用于数组字面量：数组展开

        var arr1 = [1,2,3], arr2 = ["lisa", "tom"]
        var arr3 = [...arr1, ...arr2]; //[1,2,3,"lisa","tom]
        

     3. 用于对象展开

        var teecha = {age: 23, gender: "male"}
        teecha = {...teecha, nickname: "sweettea"} // {age: 23, gender: "male", nickname: "sweettea"}
        

   • 模板字符串：使用`字符。

     var song = "红尘";
     var tpl = `${song} is one of my favorite songs,
         do you wanna try? `;
     console.log(tpl); 
     

to be continue...