ES6语法

•  Class基本使用和继承
• 类的由来

  // 传统方法生成实例对象
  function Point(x, y) {
    this.x = x;
    this.y = y;
  }
  
  Point.prototype.toString = function () {
    return '(' + this.x + ', ' + this.y + ')';
  };
  
  var p = new Point(1, 2);
  
  // 通过类方法生成实例对象
  class Point {
    constructor(x, y) {
      this.x = x;
      this.y = y;
    }
  
    toString() {
      return '(' + this.x + ', ' + this.y + ')';
    }
  }
  
  var Point  = new Point ()
  
  // constructor 是类的默认方法, 通过 new 生成实例对象时, 会自动调用该方法

•  类的继承 

class 可以通过 extends 关键字实现继承,

class Point {

}

// ColorPoint 继承 Point
class ColorPoint extends Point {

}

•  super 关键字 
• 即可以当做函数使用, 也可以当做对象使用

1. super 作为函数调用时, 代表父类的构造函数, ES6 要求, 子类的构造函数, 必须执行一次 super 函数
2. super 作为对象时, 在普通方法中, 指向父类的原型对象, 在静态方法中, 指向 父类

3. // super 作为对象, 指向父类的原型对象
   class A {
       p () {
           return 2
       }
   }
   
   class B extends A {
       constructor () {
           super ()
           console.log(super.p())  // 输出 2
       }
   }
   // 上面代码中，子类B当中的super.p()，就是将super当作一个对象使用。这时，super在普通方法之中，指向A.prototype，所以super.p()就相当于A.prototype.p()。

• let 和 const 的区别

              => let 可以声明一个变量

                  -> let 声明变量的时候只能声明一次, 如果重复声明会报错

                  -> 在 for 循环 和 if 语句中会形成一个块级作用域, 如果使用 var 定义一个变量 i

                      来进行 循环, 此时 i 是一个全局变量, 后面的代码 会在循环结束之后才会执行, 如果使用 let

                      会有一个 块级作用域, 变量 i 只在本轮 循环中有效, 后面的代码 会在 一轮循环结束就执行一次

                  -> let 不存在 变量提升, 不会预解析 所以用 let 定义的变量必须先定义 后使用

                  -> 会形成"暂时性死区", 只要在一个 块级作用域内, 存在 let 命令, 那么它声明的这个变量, 就绑定在这个区域内, 不受外部的影响

             => const 只能声明一个变量, 

                  -> const 一旦声明就必须立即初始化, 不能等到以后才赋值, 否则会报错

             => 代码块内如果存在 let 或者 const , 会形成一个 封闭块级作用域, 在声明变量之前使用 就会报错

             => 使用 const 最好 只声明普通数据类型,  在声明复杂数据类型时要慎重

•  解构赋值

              => 解构:  ES6 允许按照一定模式, 从数组和对象中提取值, 对变量进行赋值

                  -> 解构的源: 解构赋值表达式的右边部分

                  -> 解构赋值表达式的左边部分

                  例如: let [ a, b, c ] = [ 1, 2, 3 ]

                  -> 这种写法属于"模式匹配", 只要等号两边的模式相同, 左边的变量就会被赋予对应的值

                  -> 可以忽略中间的某个值, let [ a, , c ] = [ 1, 2, 3 ]

                  -> 不完全解构

                      let [ x, y ] = [ 1, 2, 3 ]  x = 1, y = 2

                      let [ a, [b], c ] = [ 1, [ 2, 3 ], 4 ] 

                          a = 1, b = 2, c = 4

                  -> 如果等号的右边不是数组, 或者可以循环遍历的结构, 那么会报错

                  -> 剩余运算符

                      let [a, ...b] = [ 1, 2, 3 ]

                      a = 1,  b = [ 2, 3 ]

                  -> 字符串 

                      let [ a, b, c, d, e ] = 'hello'

                          a = 'h', b = 'e', c = 'l' ...

                  -> 解构默认值: 

                      let [ foo = true ] = []     foo = true

                      let [ x, y = 'b' ] = [ 'a' ]    x = a, y = 'b'

                      let [ a = 2 ] = [ undefind ]   a = 2

                      当解构模式有匹配结果, 且匹配结果是 undefined, 会触发默认值作为返回结果

                      注意: ES6 内部使用严格相等运算符(===), 判断一个位置是否有值, 只有一个数组成员严格等于 undefined, 默认值才会生效

                  

                  -> 对象解构: 

                      let { foo, bar } = { foo: 'aaa', bar: 'bbb' }

                          foo = 'aaa',  bar = 'bbb'

                  -> 对象解构与数组的不同, 数组的元素有顺序, 解构时变量的取值由他的位置决定, 

                      而对象的属性没有次序, 变量必须与属性同名, 才能取到正确的值

              => 解构赋值的用途

                  -> 交换变量的值

                            let x = 1, let y = 2  [ x, y ] = [ y, x ]

                      -> 从函数返回多个值

                      -> 函数参数的定义

                      ->  提取 JSON 数据

// 返回一个数组

function example() {
  return [1, 2, 3];
}
let [a, b, c] = example();

// 返回一个对象

function example() {
  return {
    foo: 1,
    bar: 2
  };
}
let { foo, bar } = example();

// 函数参数的定义

// 参数是一组有次序的值
function f([x, y, z]) { ... }
f([1, 2, 3]);

// 参数是一组无次序的值
function f({x, y, z}) { ... }
f({z: 3, y: 2, x: 1});


// 提取 JSON 数据
let jsonData = {
  id: 42,
  status: "OK",
  data: [867, 5309]
};

let { id, status, data: number } = jsonData;

console.log(id, status, number);
// 42, "OK", [867, 5309]


// 函数参数的默认值
jQuery.ajax = function (url, {
  async = true,
  beforeSend = function () {},
  cache = true,
  complete = function () {},
  crossDomain = false,
  global = true,
  // ... more config
} = {}) {
  // ... do stuff
};

// 遍历 Map 结构
const map = new Map();
map.set('first', 'hello');
map.set('second', 'world');

for (let [key, value] of map) {
  console.log(key + " is " + value);
}
// first is hello
// second is world

 // 获取键名
for (let [key] of map) {  
// ...}
// 获取键值
for (let [,value] of map) {  
// ...}


// 输入模块的指定方法
const { SourceMapConsumer, SourceNode } = require("source-map");

         

•  字符串扩展方法:

        indludes()   返回布尔值, 判断是否找到参数, 字符串

        startWith()  返回布尔值, 判断参数字符串是否在原字符串的头部

        endsWith() 返回布尔值, 判断参数字符串是否在原字符串的尾部

        以上方法 都可以接收两个参数, 第一个: 需要搜索的字符串, 第二个: 可选的搜索起始位置索引

• 字符串重复: 

         repeat()：返回新的字符串，表示将字符串重复指定次数返回, 如果是小数会被向下取整

函数的扩展: 

•  可以给函数形参设置默认值
• 使用参数默认值时, 函数不能有同名参数, 否则会报错
• 不定参数,  参数个数不确定是可以用 ...变量名

 数组的扩展:

• 扩展运算符: console.log(...[1, 2, 3])

        提供了复制数组的简便写法:

// 复制数组的简便写法
const a1 = [1, 2];
// 写法一
const a2 = [...a1];
// 写法二
const [...a2] = a1;

// 合并数组
const arr1 = ['a', 'b'];
const arr2 = ['c'];
const arr3 = ['d', 'e'];

// ES5 的合并数组
arr1.concat(arr2, arr3);
// [ 'a', 'b', 'c', 'd', 'e' ]

// ES6 的合并数组
[...arr1, ...arr2, ...arr3]
// [ 'a', 'b', 'c', 'd', 'e' ]

• 但是这两种方法都是浅拷贝, 如果修改了原数组的成员, 会同步映射到新数组

 对象的扩展:

•          ES6 允许在大括号里面, 直接写入变量和函数, 作为对象的属性和方法