ECMAScript6

参考： ECMAScript6 入门

一、import和export

（1）、概念

1. export:用于输出本模块变量的接口
2. import：用于一个模块加载另一个含有export接口的模块。

（2）、实例1

// a.js

var sex="boy";
var echo=function(value){
　　console.log(value)
}
export {sex,echo} 


// b.js
import {sex,echo} from "./a.js" 
console.log(sex)   // boy
echo(sex) // boy

1. 通过向大括号中添加sex，echo变量并且export输出，就可以将对应变量值以sex、echo变量标识符形式暴露给其他文件而被读取到
2. 不能写成export sex这样的方式，如果这样就相当于export “boy”,外部文件就获取不到该文件的内部变量sex的值，因为没有对外输出变量接口,只是输出的字符串。
3. 通过import获取a.js文件的内部变量，{}括号内的变量来自于a.js文件export出的变量标识符。

（3）、实例2 export default

//a.js

var sex="boy";
export default sex（sex不能加大括号）


// b.js

import any from "./a.js"
import any12 from "./a.js" 
console.log(any,any12)   // boy,boy

1. b.js使用import命令的时候，用户需要知道a.js所暴露出的变量标识符，否则无法加载。可以使用export default命令，为模块指定默认输出，这样就不需要知道所要加载模块的变量名。
2. 本质上，a.js文件的export default输出一个叫做default的变量，然后系统允许你为它取任意名字。所以可以为import的模块起任何变量名，且不需要用大括号包含
3. 一条import可以同时导入默认方法和其它变量：import defaultMethod, { otherMethod } from ‘xxx.js’;
4. 一个模块只能使用 export default 一次

二、let、const和块级作用域

1. var可以变量提升，let不可以。
2. let不允许在相同作用域重复声明，var可以。
3. let的作用域是块，而var的作用域是函数。
4. let声明变量，值可以改变，const声明变量值不可变，其它属性const和let一致。

实例1：let块级作用域

{
  let a = 1;
  var b = 1;
}
a;  // Uncaught ReferenceError: a is not defined(…)
b;  // 1

实例2：let不会发生“变量提升”现象

function test(){
  console.log(a);
  console.log(b);
  var a = 1;
  let b = 1;
}
test(); // a：undefined；b：Uncaught ReferenceError: b is not defined(…)

三、箭头函数

（1）、语法

([param] [, param]) => {
   statements
}


param => expression

param 是参数，根据参数个数不同，分这几种情况：

• () => { … } // 零个参数用 () 表示；
• x => { … } // 一个参数可以省略 ()；
• (x, y) => { … } // 多参数不能省略 ()；

（2）、示例1 ：单个参数

// ES5
var selected = allJobs.filter(function (job) {
  return job.isSelected();
});

// ES6
var selected = allJobs.filter(job => job.isSelected());

（3）、示例2 ：多个参数

// ES5
var total = values.reduce(function (a, b) {
  return a + b;
}, 0);

// ES6
var total = values.reduce((a, b) => a + b, 0);

四、Use Strict严格模式

（1）概述

除了正常运行模式，ES5添加了第二种运行模式:”严格模式”（strict mode）

(2) 进入标志

“use strict”;

(3)如何调用

• 针对单个脚本

  　 < script>
  　　　　“use strict”;
  　　　　console.log(“这是严格模式。”);
  　　

• 针对单个函数

  function strict(){
  　　　　“use strict”;
  　　　　return “这是严格模式。”;
  　　}
  　　function notStrict() {
  　　　　return “这是正常模式。”;
  　　}

（4）语法与行为改变

• 严格模式禁止一个变量没有声明就赋值
• 禁止this关键字指向全局对象
• 严格模式下无法删除变量，只有configurable设置为true的对象属性，才能被删除。
• 正常模式下，如果对象有多个重名属性，最后赋值的那个属性会覆盖前面的值。严格模式下，这属于语法错误。
• 函数不能有重名的参数

五、class

(1)、基本语法

ES6引入了Class（类）这个概念，可以只看做一个语法糖。

1. constructor是构造方法。
2. 类的数据类型就是函数，类本身就指向构造函数。

实例1：

class Point {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }

  toString() {
    return '(' + this.x + ', ' + this.y + ')';
  }
}

六、super关键字

（1）、语法

super关键字用于访问父对象上的函数

• super([arguments]); //访问父对象上的构造函数
• super.functionOnParent([arguments]); //访问父对象上的方法
• super(props)的目的：在constructor中可以使用this.props

实例1：

class Person {
  constructor (name) {
    this.name = name;
  }
}
class Student extends Person {
  constructor (name, age) {
    super(); // 用在构造函数中，必须在使用this之前调用
    this.age = age;
  }
}

• super()调用会生成一个空对象，作为context来调用父类的constructor，返回this对象，作为子类constructor的context继续调用构造函数。
• 在子类的constructor中必须先调用super才能引用this

实例2：调用父类的静态函数

class Human {
  constructor() {}
  static ping() {
    return 'ping';
  }
}

class Computer extends Human {
  constructor() {}
  static pingpong() {
    return super.ping() + ' pong';
  } // 只有在子类的静态函数中才能调用父类的静态函数（babel环境测试，按理说，在实例函数中应该也可以调用，不过实际测试环境中报错）
}
Computer.pingpong(); // 'ping pong'

七、扩展运算符

扩展运算符用三个点号表示，功能是把数组或类数组对象展开成一系列用逗号隔开的值。

var foo = function(a, b, c) {
    console.log(a);
    console.log(b);
    console.log(c);
}

var arr = [1, 2, 3];

//传统写法
foo(arr[0], arr[1], arr[2]);

//使用扩展运算符
foo(...arr);
//1
//2
//3