美文网首页
Chapter 1 ES6、模块化、打包

Chapter 1 ES6、模块化、打包

作者: weiee | 来源:发表于2018-12-03 01:17 被阅读0次

    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...

    相关文章

      网友评论

          本文标题:Chapter 1 ES6、模块化、打包

          本文链接:https://www.haomeiwen.com/subject/ygfecqtx.html