ES6

全称：ECMAScript 6.0

 Chrome 和 Firefox 浏览器对 ES6 新特性最友好，IE7~11 基本不支持 ES6(地址：http://kangax.github.io/compat-table/es6/)

1.新增两个重要的关键字 let(只在代码段内有效，且只能声明一次和不存在变量提升) const(声明的是一个只读的常量，只读的含义就是指针指向的值不变) var(在全局范围内有效，且可以声明多次)

2.解构赋值：对赋值运算符的扩展。分为数组模型和对象模型

3.Symbol:ES6 数据类型除了 Number 、 String 、 Boolean 、 Object、 null 和 undefined ，还新增了 Symbol （用来定义对象的唯一属性名）Symbol.for() 类似单例模式，首先会在全局搜索被登记的 Symbol 中是否有该字符串参数作为名称的 Symbol 值，如果有即返回该 Symbol 值，若没有则新建并返回一个以该字符串参数为名称的 Symbol 值，并登记在全局环境中供搜索

Symbol.keyFor() 返回一个已登记的 Symbol 类型值的 key ，用来检测该字符串参数作为名称的 Symbol 值是否已被登记。

 

let yellow = Symbol("Yellow");

let yellow1 = Symbol.for("Yellow");

yellow === yellow1;      // false

let yellow2 = Symbol.for("Yellow");

yellow1 === yellow2;     // true

4.MAP 保存键值对。任何值都可以作为一个键，或一个值

    通过map的get和set赋值和取值

    

 

//for...of进行迭代

var map1=new Map();

map1.set(0,"zero");

for(var [key,value] of map1){

    console.log(key+"="+value);

}

for(var key of map1.keys()){

    console.log(key);

}

//forEach()

var map2=new Map();

map2.set(0,"zero");

map2.forEach(function(value,key)){

             console.log(key+"="+value);

             },map2)

5.SET对象允许存储任何类型的唯一值，无论是原始值或者对象引用

 

let set1=new Set();

set1.add(0);

作用数组去重等

6.Proxy :可以对目标对象的读取，函数调用等操作进行拦截，然后进行操作。

 

let target = {

    name: 'Tom',

    age: 24

}

let handler = {

    get: function(target, key) {

        console.log('getting '+key);

        return target[key]; // 不是target.key

    },

    set: function(target, key, value) {

        console.log('setting '+key);

        target[key] = value;

    }

}

let proxy = new Proxy(target, handler)

proxy.name     // 实际执行 handler.get

proxy.age = 25 // 实际执行 handler.set

// getting name

// setting age

// 25

// target 可以为空对象

let targetEpt = {}

let proxyEpt = new Proxy(targetEpt, handler)

// 调用 get 方法，此时目标对象为空，没有 name 属性

proxyEpt.name // getting name

// 调用 set 方法，向目标对象中添加了 name 属性

proxyEpt.name = 'Tom'

// setting name

// "Tom"

// 再次调用 get ，此时已经存在 name 属性

proxyEpt.name

// getting name

// "Tom"

// 通过构造函数新建实例时其实是对目标对象进行了浅拷贝，因此目标对象与代理对象会互相

// 影响

targetEpt)

// {name: "Tom"}

// handler 对象也可以为空，相当于不设置拦截操作，直接访问目标对象

let targetEmpty = {}

let proxyEmpty = new Proxy(targetEmpty,{})

proxyEmpty.name = "Tom"

targetEmpty) // {name: "Tom"}

7.Reflect:将 Object 的一些明显属于语言内部的方法移植到了 Reflect 对象上（当前某些方法会同时存在于 Object 和 Reflect 对象上），未来的新方法会只部署在 Reflect 对象上。

8.字符串：

includes()：返回布尔值，判断是否找到参数字符串。

startsWith()：返回布尔值，判断参数字符串是否在原字符串的头部。

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

以上三个方法都可以接受两个参数，需要搜索的字符串，和可选的搜索起始位置索引

repeat();重复字符串的次数

padStart：返回新的字符串，表示用参数字符串从头部补全原字符串。

padEnd：返回新的字符串，表示用参数字符串从头部补全原字符串

模板字符串相当加强版的字符串，用反引号，除了作为普通字符串，还可以用来定义多行字符串（保留格式）

 

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.

 

function f(){

  return "have fun!";

}

let string2= `Game start,${f()}`;

console.log(string2);  // Game start,have fun!

 

function f(stringArr,...values){

 let result = "";

 for(let i=0;i<stringArr.length;i++){

  result += stringArr[i];

  if(values[i]){

   result += values[i];

        }

    }

 return result;

}

let name = 'Mike';

let age = 27;

f`My Name is ${name},I am ${age+1} years old next year.`;

// "My Name is Mike,I am 28 years old next year."

f`My Name is ${name},I am ${age+1} years old next year.`;

// 等价于

f(['My Name is',',I am ',' years old next year.'],'Mike',28);

9.数值

二进制表示~console.log(0b11===6);//false

安全整数~表示在 JavaScript 中能够精确表示的整数，安全整数的范围在 2 的 -53 次方到 2 的 53 次方之间（不包括两个端点），超过这个范围的整数无法精确表示

 

Number.MAX_SAFE_INTEGER + 1 === Number.MAX_SAFE_INTEGER + 2; // true

Number.MAX_SAFE_INTEGER === Number.MAX_SAFE_INTEGER + 1;     // false

Number.MAX_SAFE_INTEGER - 1 === Number.MAX_SAFE_INTEGER - 2; // false

新方法：Number.isFinite() 用来检查一个数值是否为有限的（finite）

               Number.parseInt('12.63');//12 用来将给顶字符串转化为指定进制的整数

                Number.parseFloat('11');

Math对象的扩展

                Math.cbrt()//用于计算一个数字的立方根

                Math.hypot(3,4);//用于计算所有参数的平方根

10.对象

ES6允许对象的属性直接写变量，这时候属性名就是变量名，属性值就是变量值

 

const age = 12;

const name = "Amy";

const person = {age, name};

person   //{age: 12, name: "Amy"}

//等同于

const person = {age: age, name: name}

方法名也可以简写

 

const person = {

  sayHi(){

    console.log("Hi");

  }

}

person.sayHi();  //"Hi"

//等同于

const person = {

  sayHi:function(){

    console.log("Hi");

  }

}

person.sayHi();//"Hi

对象的拓展运算符

拓展运算符（...）用于取出参数对象所有可遍历属性然后拷贝到当前对象

 

let person = {name: "Amy", age: 15};

let someone = { ...person };

someone;  //{name: "Amy", age: 15}

let age = {age: 15};

let name = {name: "Amy"};

let person = {...age, ...name};

person;  //{age: 15, name: "Amy"}

Object.assign(target, source_1, ···)

用于将源对象的所有可枚举属性复制到目标对象中。

 

let target = {a: 1};

let object2 = {b: 2};

let object3 = {c: 3};

Object.assign(target,object2,object3);  

// 第一个参数是目标对象，后面的参数是源对象

target;  // {a: 1, b: 2, c: 3}

Object.is(value1, value2) 

用来比较两个值是否严格相等，与（===）基本类似

11.数组

12.函数

基本用法

 

function fn(name,age=17){

 console.log(name+","+age);

}

fn("Amy",18);  // Amy,18

fn("Amy","");  // Amy,

fn("Amy");     // Amy,17

不定参数

 

function f(...values){

    console.log(values.length);

}

f(1,2);      //2

f(1,2,3,4);  //4

箭头函数

格式：参数=>函数体

基本用法

 

var f = v => v;

//等价于

var f = function(a){

 return a;

}

f(1);  //1

当箭头函数要返回对象的时候，为了区分于代码块，要用 () 将对象包裹起来

箭头函数体中的 this 对象，是定义函数时的对象，而不是使用函数时的对象

 

// 回调函数

var Person = {

    'age': 18,

    'sayHello': function () {

      setTimeout(function () {

        console.log(this.age);

      });

    }

};

var age = 20;

Person.sayHello();  // 20

var Person1 = {

    'age': 18,

    'sayHello': function () {

      setTimeout(()=>{

        console.log(this.age);

      });

    }

};

var age = 20;

Person1.sayHello();  // 18

13.迭代器

一个新的遍历机制

两个核心概念

迭代器是一个统一的接口，它的作用是使各种数据结构可被便捷的访问，它是通过一个键为Symbol.iterator 的方法来实现。

迭代器是用于遍历数据结构元素的指针（如数据库中的游标）

迭代过程

            通过 Symbol.iterator 创建一个迭代器，指向当前数据结构的起始位置

随后通过 next 方法进行向下迭代指向下一个位置， next 方法会返回当前位置的对象，对象包含了 value 和 done 两个属性， value 是当前属性的值， done 用于判断是否遍历结束

当 done 为 true 时则遍历结束

 

const items = ["zero", "one", "two"];

const it = items[Symbol.iterator]();

it.next();

>{value: "zero", done: false}

it.next();

>{value: "one", done: false}

it.next();

>{value: "two", done: false}

it.next();

>{value: undefined, done: true}

可迭代的数据结构

Array String Map Set Dom

使用for...of进行迭代

14.类

class 的本质是function

 

// 匿名类

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

静态属性

 

class Example {

// 新提案

    static a = 2;

}

公共属性

 

class Example{}

Example.prototype.a = 2;

实例属性

 

class Example {

    a = 2;

    constructor () {

        console.log(this.a);

    }

}

name属性-返回类名

 

let Example=class Exam {

    constructor(a) {

        this.a = a;

    }

}

console.log(Example.name); // Exam

let Example=class {

    constructor(a) {

        this.a = a;

    }

}

console.log(Example.name); // Example

constructor方法

类的默认方法，创建类的时候被调用

 

class Example{

    constructor(){

      console.log('我是constructor');

    }

}

new Example(); // 我是constructor

原型方法

 

class Example {

    sum(a, b) {

        console.log(a + b);

    }

}

let exam = new Example();

exam.sum(1, 2); // 3

实例方法

 

class Example {

    constructor() {

        this.sum = (a, b) => {

            console.log(a + b);

        }

    }

}

class 的实例化必须通过new关键字

共享原型对象

 

class Example {

    constructor(a, b) {

        this.a = a;

        this.b = b;

        console.log('Example');

    }

    sum() {

        return this.a + this.b;

    }

}

let exam1 = new Example(2, 1);

let exam2 = new Example(3, 1);

console.log(exam1._proto_ == exam2._proto_); // true

exam1._proto_.sub = function() {

    return this.a - this.b;

}

console.log(exam1.sub()); // 1

console.log(exam2.sub()); // 2

decorator 是一个函数，用来修改类的行为，在代码编译时产生作用。

getter/setter

 

class Example{

    constructor(a, b) {

        this.a = a; // 实例化时调用 set 方法

        this.b = b;

    }

    get a(){

        console.log('getter');

        return this.a;

    }

    set a(a){

        console.log('setter');

        this.a = a; // 自身递归调用

    }

}

let exam = new Example(1,2); // 不断输出 setter ，最终导致 RangeError

class Example1{

    constructor(a, b) {

        this.a = a;

        this.b = b;

    }

    get a(){

        console.log('getter');

        return this._a;

    }

    set a(a){

        console.log('setter');

        this._a = a;

    }

}

let exam1 = new Example1(1,2); // 只输出 setter , 不会调用 getter 方法

console.log(exam._a); // 1, 可以直接访问

通过 extends 实现类的继承

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

 

class Father {

    test(){

        return 0;

    }

    static test1(){

        return 1;

    }

}

class Child extends Father {

    constructor(){

        super();

    }

}

调用父类方法, super 作为对象，在普通方法中，指向父类的原型对象，在静态方法中，指向父类

 

class Child2 extends Father {

    constructor(){

        super();

        // 调用父类普通方法

        console.log(super.test()); // 0

    }

    static test3(){

        // 调用父类静态方法

        return super.test1+2;

    }

}

Child2.test3(); // 3

15.模块

ES6 的模块自动开启严格模式，不管你有没有在模块头部加上 use strict;。

基本用法

模块导入导出各种类型的变量，如字符串，数值，函数，类。

导出的函数声明与类声明必须要有名称（export default 命令另外考虑）。 

不仅能导出声明还能导出引用（例如函数）。

export 命令可以出现在模块的任何位置，但必需处于模块顶层。

import 命令会提升到整个模块的头部，首先执行。

 

/*-----export [test.js]-----*/

let myName = "Tom";

let myAge = 20;

let myfn = function(){

    return "My name is" + myName + "! I'm '" + myAge + "years old."

}

let myClass =  class myClass {

    static a = "yeah!";

}

export { myName, myAge, myfn, myClass }

/*-----import [xxx.js]-----*/

import { myName, myAge, myfn, myClass } from "./test.js";

console.log(myfn());// My name is Tom! I'm 20 years old.

console.log(myAge);// 20

console.log(myName);// Tom

console.log(myClass.a );// yeah!

as 用法

 

/*-----export [test.js]-----*/

let myName = "Tom";

export { myName as exportName }

/*-----import [xxx.js]-----*/

import { exportName } from "./test.js";

console.log(exportName);// Tom

使用 as 重新定义导出的接口名称，隐藏模块内部的变量

/*-----export [test1.js]-----*/

let myName = "Tom";

export { myName }

/*-----export [test2.js]-----*/

let myName = "Jerry";

export { myName }

/*-----import [xxx.js]-----*/

import { myName as name1 } from "./test1.js";

import { myName as name2 } from "./test2.js";

console.log(name1);// Tom

console.log(name2);// Jerry

16.Promise对象

从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。

异步编程的一种方案

 Promise 异步操作有三种状态：pending（进行中）、fulfilled（已成功）和 rejected（已失败）。除了异步操作的结果，任何其他操作都无法改变这个状态。

Promise 对象只有：从 pending 变为 fulfilled 和从 pending 变为 rejected 的状态改变。只要处于 fulfilled 和 rejected ，状态就不会再变了即 resolved（已定型）

 

then 方法接收两个函数作为参数，第一个参数是 Promise 执行成功时的回调，第二个参数是 Promise 执行失败时的回调，两个函数只会有一个被调用。

17.Generator函数

ES6 新引入了 Generator 函数，可以通过 yield 关键字，把函数的执行流挂起，为改变执行流程提供了可能，从而为异步编程提供解决方案。

调用 Generator 函数和调用普通函数一样，在函数名后面加上()即可，但是 Generator 函数不会像普通函数一样立即执行，而是返回一个指向内部状态对象的指针，所以要调用遍历器对象Iterator 的 next 方法，指针就会从函数头部或者上一次停下来的地方开始执行。