ES6

ES6官网

 ES6超全教程

以下是我整理的一些，方便自己查看学习，未完持续

ES6是什么？

ECMAScript6（以下简称ES6）是 JavaScript 语言的下一代标准，已经在2015年6月正式发布了。

ES6的目标，是使得JavaScript语言可以用来编写大型的复杂的应用程序，成为企业级开发语言。

ES6和JavaScript的关系：

前者是后者的规格，后者是前者的一种实现（另外的 ECMAScript 方言还有 JScript 和 ActionScript）。日常场合，这两个词是可以互换的。

ES6怎么用？

1.变量

var：一般函数中都是用var去定义变量，因为它是关键字可以预解析。

let：ES6中推荐使用let去定义变量，let定义的是一般变量。

const：const声明一个只读变量，声明之后不允许改变。

示例：

1.1 let 是在代码块内有效，var 是在全局范围内有效:

{
  let a = 0;
  var b = 1;
}
a  // ReferenceError: a is not defined
b  // 1

1.2不能重复声明，let 只能声明一次 var 可以声明多次:

let a = 1;
let a = 2;
var b = 3;
var b = 4;
a  // Identifier 'a' has already been declared
b  // 4

1.3 for 循环计数器很适合用 let：

for (var i = 0; i < 10; i++) {
  setTimeout(function(){
    console.log(i);
  })
}
// 输出十个 10
for (let j = 0; j < 10; j++) {
  setTimeout(function(){
    console.log(j);
  })
}
// 输出 0123456789

变量 i 是用 var 声明的，在全局范围内有效，所以全局中只有一个变量 i, 每次循环时，setTimeout 定时器里面的 i 指的是全局变量 i ，而循环里的十个 setTimeout 是在循环结束后才执行，所以此时的 i 都是 10。

变量 j 是用 let 声明的，当前的 j 只在本轮循环中有效，每次循环的 j 其实都是一个新的变量，所以 setTimeout 定时器里面的 j 其实是不同的变量，即最后输出 12345。（若每次循环的变量 j 都是重新声明的，如何知道前一个循环的值？这是因为 JavaScript 引擎内部会记住前一个循环的值）。

1.4暂时性死区

var PI = "a";
if(true){
  console.log(PI);  // ReferenceError: PI is not defined
  const PI = "3.1415926";
}

ES6 明确规定，代码块内如果存在 let 或者 const，代码块会对这些命令声明的变量从块的开始就形成一个封闭作用域。代码块内，在声明变量 PI 之前使用它会报错。

2.箭头函数

ES6允许使用“箭头”（=>）定义函数

示例：

2.1 替换匿名函数

基本用法//匿名函数
    div.onclick=function(){
        console.log("你好")
    }
    //箭头函数
    div.onclick=()=>{
        console.log("你好")
    }

2.2 有一个参数的箭头函数

var fn=(a)=>{
        console.log("abc");
    }
    //一个参数可以省略小括号，等价于：
    var fn=a=>{
        console.log("abc");
    }

2.3 有2个及更多参数的箭头函数

 var f=(a,b,c)=>{
        console.log("abc")
    }

var p={
        age:18,
        //es6中对象方法的箭头函数表示形式
        run:()=>{
            setTimeout(()=>{
                //this:window
                console.log(this);//this是window
            },100)
        },
        travel:function(){
            //this:p
            setTimeout(()=>{
                console.log(this);//this是p
            },100)
        },
        //推荐使用的方式☆☆☆：es6中对象方法的简写形式
        say(){
            console.log("say方法中的this：",this);
            setTimeout(()=>{
                console.log("say内部的延迟函数：",this);//this是p
            },100)
        },
    }

    p.run();

    p.travel();

    p.say();

2.4 箭头函数和普通匿名函数有哪些不同？

• 函数体内的this对象，就说定义所在的对象，而不是使用所在的对象
• 不可以当作构造函数，也就是说，不可以使用new命令，否则会抛出一个错误
• 不可以使用arguments对象，该对象在函数体内不存在。如果要用，可以用rest参数代替。
• 不可以使用yield命令，因此箭头函数不能用作Generator函数
• generator函数现在经常用async替代

3.class类

在ES6中，class作为对象的模板被引入，可以通过class关键字定义类，本质是function。

示例：

3.1 类定义：

// 匿名类
let Example = class {
    constructor(a) {
        this.a = a;
    }
}
// 命名类
let Example = class Example {
    constructor(a) {
        this.a = a;
    }
}

注意：不可以重复声明一个类

class Example{}
class Example{}
// Uncaught SyntaxError: Identifier 'Example' has already been 
// declared
 
let Example1 = class{}
class Example{}
// Uncaught SyntaxError: Identifier 'Example' has already been 
// declared

3.2 继承 子类 constructor 方法中必须有 super ，且必须出现在 this 之前。

class Poetry {
  constructor(){
    console.log('山有木兮木有之');
  }
}
class Person extends Poetry{
  constructor(){
    super();
    console.log('本是青灯不归客');
  }
}
let ht = new Person();

4.解构赋值

解构赋值是对赋值运算的扩展。它是一种针对数组或者对象进行模式匹配，然后对其中的变量进行赋值。

在解构中，有两部分：

• 解构的源，解构赋值表达式的右边部分。
• 解构的目标，解构赋值表达式的左边部分。

4.1 数组模型的解构

//1.基本
let [a, b, c] = [1, 2, 3];
// a = 1
// b = 2
// c = 3

//2.可嵌套
let [a, [[b], c]] = [1, [[2], 3]];
// a = 1
// b = 2
// c = 3

//3.可忽略
let [a, , b] = [1, 2, 3];
// a = 1
// b = 3

//4.不完全解构
let [a = 1, b] = []; // a = 1, b = undefined

//5.剩余运算符
let [a, ...b] = [1, 2, 3];
//a = 1
//b = [2, 3]

//6.字符串等
//在数组的解构中，解构的目标若为可遍历对象，皆可进行解构赋值。可遍历对象即实现 //Iterator 接口的数据。
let [a, b, c, d, e] = 'hello';
// a = 'h'
// b = 'e'
// c = 'l'
// d = 'l'
// e = 'o'

//7.解构默认值
let [a = 2] = [undefined]; // a = 2
//当解构模式有匹配结果，且匹配结果是 undefined 时，会触发默认值作为返回结果。
let [a = 3, b = a] = [];     // a = 3, b = 3
let [a = 3, b = a] = [1];    // a = 1, b = 1
let [a = 3, b = a] = [1, 2]; // a = 1, b = 2

4.2对象模型的解构

//1.基本
let { foo, bar } = { foo: 'aaa', bar: 'bbb' };
// foo = 'aaa'
// bar = 'bbb'
 
let { baz : foo } = { baz : 'ddd' };
// foo = 'ddd'

//2.可嵌套可忽略
let obj = {p: ['hello', {y: 'world'}] };
let {p: [x, { y }] } = obj;
// x = 'hello'
// y = 'world'
let obj = {p: ['hello', {y: 'world'}] };
let {p: [x, {  }] } = obj;
// x = 'hello'

//3.不完全解构
let obj = {p: [{y: 'world'}] };
let {p: [{ y }, x ] } = obj;
// x = undefined
// y = 'world'

//4.剩余运算符
let {a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40};
// a = 10
// b = 20
// rest = {c: 30, d: 40}

//5.解构默认值
let {a = 10, b = 5} = {a: 3};
// a = 3; b = 5;
let {a: aa = 10, b: bb = 5} = {a: 3};
// aa = 3; bb = 5;

5.模板字符串

模板字符串相当于加强版的字符串，用反引号`，除了作为普通字符串，还可以用来定义多行字符串，还可以在字符串中加入变量和表达式。

5.1普通字符串

let string = `Hello'
'world`;
console.log(string); 
// "Hello'
// 'world"

5.2多行字符串

let string1 =  `Hey,
can you stop angry now?`;
console.log(string1);
// Hey,
// can you stop angry now?

5.3字符串插入变量和表达式

变量名写在${}中，${}中可以放入JavaScript表达式。

let name = "Mike";
let age = 27;
let info = `My Name is ${name},I am ${age+1} years old next year.`
console.log(info);
// My Name is Mike,I am 28 years old next year.

5.4字符串中调用函数

function f(){
  return "have fun!";
}
let string2= `Game start,${f()}`;
console.log(string2);  // Game start,have fun!

注意：模板字符串中的换行和空格都是会被保留的