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

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Lua 5.1 参考手册 by Roberto Ierusalimschy, Luiz Henrique de F...
    苏黎九歌阅读 13,918评论 0 38
  • 工厂模式类似于现实生活中的工厂可以产生大量相似的商品,去做同样的事情,实现同样的效果;这时候需要使用工厂模式。简单...
    舟渔行舟阅读 7,854评论 2 17
  • --- 学习目标: - 掌握编程的基本思维 - 掌握编程的基本语法 typora-copy-images-to: ...
    YFBigHeart阅读 1,076评论 0 2
  • 单例模式 适用场景:可能会在场景中使用到对象,但只有一个实例,加载时并不主动创建,需要时才创建 最常见的单例模式,...
    Obeing阅读 2,109评论 1 10
  • 第2章 基本语法 2.1 概述 基本句法和变量 语句 JavaScript程序的执行单位为行(line),也就是一...
    悟名先生阅读 4,207评论 0 13