ES6学习笔记

本文是笔者学习ES6的一些笔记。

Posted by 南三号 on April 15, 2018
  • const:指的是声明出来的变量存的是固定地址。

    • 简单数据类型值不可修改。
    • 复合类型如数组,对象则不能换成另一个数组或者对象,但是可以修改数组内的值或者是对象的属性。
  • 变量的解构赋值

    • 只要某种数据结构具有 Iterator 接口,都可以采用数组形式的解构赋值。
    • 注意,ES6 内部使用严格相等运算符(===),判断一个位置是否有值。所以,只有当一个数组成员严格等于undefined,默认值才会生效。

    • 默认值可以引用解构赋值的其他变量,但该变量必须已经声明。

    • 数组的元素是按次序排列的,变量的取值由它的位置决定;而对象的属性没有次序,变量必须与属性同名,才能取到正确的值。

    • 对象的解构赋值是下面形式的简写(参见《对象的扩展》一章)。对象的解构赋值的内部机制,是先找到同名属性,然后再赋给对应的变量。真正被赋值的是后者,而不是前者

      let { foo: foo, bar: bar } = { foo: "aaa", bar: "bbb" };
      
    • 如果解构模式是嵌套的对象,而且子对象所在的父属性不存在,那么将会报错。

    • 大括号写在行首会造成解释错误。

    • 对象的解构赋值,可以很方便地将现有对象的方法,赋值到某个变量。

      let { log, sin, cos } = Math;
      
    • 由于数组本质是特殊的对象,因此可以对数组进行对象属性的解构。

      let arr = [1, 2, 3];
      let {0 : first, [arr.length - 1] : last} = arr;
      first // 1
      last // 3
      

      上面代码对数组进行对象解构。数组arr0键对应的值是1[arr.length - 1]就是2键,对应的值是3。方括号这种写法,属于“属性名表达式”(参见《对象的扩展》一章)

    • 可以使用圆括号的情况只有一种:赋值语句的非模式部分,可以使用圆括号。

    • 用途

      • 交换变量的值

      • 从函数返回多个值

      • 函数参数的定义

      • 解构赋值对提取 JSON 对象中的数据,尤其有用。

      • 函数参数的默认值

      • 遍历 Map 结构

      • 输入模块的指定方法

        加载模块时,往往需要指定输入哪些方法。解构赋值使得输入语句非常清晰。

        const { SourceMapConsumer, SourceNode } = require("source-map");
        
  • this的工作原理:就是定义时所在的对象

    • 全局范围内:this指向全局对象
    • 普通的函数调用:this指向全局对象
    • 对象的方法调用:this指向该对象
    • 调用构造函数:在该函数内部,this指向新创建的对象
    • 当使用 Function.prototype 上的 call 或者 apply 方法时,函数内的 this 将会被 显式设置为函数调用的第一个参数。
  • 箭头函数:

    • 箭头函数的语法非常简单,看一下最简单的箭头函数表示法 () => console.log('Hello')箭头左是参数,箭头右是函数主体。
    • 箭头函数特点:
      • 不绑定this,arguments
        • 箭头函数使用了定义时上下文的this,且与在哪里调用没有关系。
      • 更简化的代码语法,简化回调函数。
    • 注意:
      • 不可以当作构造函数
      • 不可以使用arguments对象,该对象在函数体内不存在。如果要用,可以用 rest 参数代替。
      • 不可以使用yield命令,因此箭头函数不能用作 Generator 函数。
      • 箭头函数里面根本没有自己的this,而是引用外层的this
      • 除了this,以下三个变量在箭头函数之中也是不存在的,指向外层函数的对应变量:argumentssupernew.target
      • 另外,由于箭头函数没有自己的this,所以当然也就不能用call()apply()bind()这些方法去改变this的指向。
  • 双冒号运算符:

    • 存在的理由:箭头函数可以绑定this对象,大大减少了显式绑定this对象的写法(callapplybind)。但是,箭头函数并不适用于所有场合,所以现在有一个提案,提出了“函数绑定”(function bind)运算符,用来取代callapplybind调用。
    • 用法说明:双冒号左边是一个对象,右边是一个函数。该运算符会自动将左边的对象,作为上下文环境(即this对象),绑定到右边的函数上面。
  • 扩展运算符:

    • 扩展运算符(spread)是三个点(...)。它好比 rest 参数的逆运算,将一个数组转为用逗号分隔的参数序列。
    • 即可以用来替代函数的apply方法。
    • 扩展运算符的应用:
      • 复制数组
      • 合并数组
      • 与解构赋值结合
  • 尾调用优化(只在严格模式下开启)

    • 尾调用(Tail Call)是函数式编程的一个重要概念,本身非常简单,一句话就能说清楚,就是指某个函数的最后一步是调用另一个函数。
    • 尾调用由于是函数的最后一步操作,所以不需要保留外层函数的调用帧,因为调用位置、内部变量等信息都不会再用到了,只要直接用内层函数的调用帧,取代外层函数的调用帧就可以了。(即删除外层的调用帧,加入内层调用帧,节省内存)
    • 尾递归:只有一个调用帧,不易发生栈溢出。节省内存。
    • 函数式编程有一个概念,叫做柯里化(currying),意思是将多参数的函数转换成单参数的形式。
  • 函数默认参数

    • 参数变量是默认声明的,所以不能用letconst再次声明。

      function foo(x = 5) {
        let x = 1; // error
        const x = 2; // error
      }
      
    • 使用参数默认值时,函数不能有同名参数。

    • 参数默认值不是传值的,而是每次都重新计算默认值表达式的值。也就是说,参数默认值是惰性求值的。

    • 如果非尾部的参数设置默认值,实际上这个参数是没法省略的。

    • 指定了默认值以后,函数的length属性,将返回没有指定默认值的参数个数。也就是说,指定了默认值后,length属性将失真。

    • 如果设置了默认值的参数不是尾参数,那么length属性也不再计入后面的参数了。

    • 一旦设置了参数的默认值,函数进行声明初始化时,参数会形成一个单独的作用域(context)。等到初始化结束,这个作用域就会消失。这种语法行为,在不设置参数默认值时,是不会出现的。

    • 利用参数默认值,可以指定某一个参数不得省略,如果省略就抛出一个错误

    • 将参数默认值设为undefined,表明这个参数是可以省略的。

    • rest参数:

      • ES6 引入 rest 参数(形式为...变量名),用于获取函数的多余参数,这样就不需要使用arguments对象了。rest 参数搭配的变量是一个数组,该变量将多余的参数放入数组中。
      • rest 参数之后不能再有其他参数(即只能是最后一个参数),否则会报错。
      • 函数的length属性,不包括 rest 参数。
  • 函数name属性,返回该函数的函数名。

  • export命令可以出现在模块的任何位置,只要处于模块顶层就可以。如果处于块级作用域内,就会报错

  • import命令具有提升效果,会提升到整个模块的头部,首先执行。

  • Set和Map

    • set是没有重复值的数组

      • 一种数组去重的方式:

        let arr = [3, 5, 2, 2, 5, 5];
        //方法一
        Array.from(new Set(arr))
        //方法二
        let unique = [...new Set(arr)];
        
      • 容易实现交集并集差集(数组实现需要先去重,再找相同的元素)

      • weakSet:成员是对象的Set

    • map是键值对,与对象的键值对(完成了字符串与值的对应)不同的地方是,完成了值与值的对应。

      • weakMap:只接受对象作为键名
  • 字符串

    • 同样具有遍历接口(ES6加入),可被for…of遍历
    • normalize()方法,用来将字符的不同表示方法统一为同样的形式,这称为 Unicode 正规化
    • 标签模板
  • Symbol

    • ES5 的对象属性名都是字符串,这容易造成属性名的冲突。比如,你使用了一个他人提供的对象,但又想为这个对象添加新的方法(mixin 模式),新方法的名字就有可能与现有方法产生冲突。如果有一种机制,保证每个属性的名字都是独一无二的就好了,这样就从根本上防止属性名的冲突。这就是 ES6 引入Symbol的原因。
  • proxy

    • Proxy 用于修改某些操作的默认行为,等同于在语言层面做出修改,所以属于一种“元编程”(meta programming),即对编程语言进行编程。
  • generator

    • yield表达式只能用在 Generator 函数里面,用在其他地方都会报错
    • Generator 函数也不能跟new命令一起用,会报错。
    • 运用:
      • 状态机
      • 协程,协作的线程或者函数
      • 上下文
      • 异步操作的同步化表达
      • 控制流管理
      • 部署 Iterator 接口

作为数据结构