---

ES6 简单入门分享

先来列一下主要都分享那些知识点：

• 变量声明关键字 let、const、var的用法
• 变量的解构赋值规则
• 函数的扩展语法
• 对象的扩展语法
• JS 第七种数据类型Symbol
• Set和Map数据结构
• Promise 对象
• 遍历器（Iterator）
• 生成器（Generator）
• 异步请求
• 类的定义语法（Class）
• 装饰器函数（Decorator）
• 模块（Module） 的用法

---

块级作用域

使用方法

ES5只有全局作用域和函数作用域，没有块级作用域。一不小心变量就会被覆盖

let 和 const 为 es6 提供了块级作用域 （所谓块级作用域就是，变量只在代码块中生效）
这两个的用途与var类似，var是全局生效的 ，
* let和const 是在当前代码块有效，并且都不能重新声明。
* const 一旦声明某个变量就不能改变其值。

    {        var a = 1;        let b = 2;        const c = 3;        c = 4;  //Uncaught TypeError: Assignment to constant variable    }    console.log(a); //1    console.log(b); //Uncaught ReferenceError: b is not defined    console.log(c); //Uncaught ReferenceError: c is not defined

变量提升问题

使用var声明变量，可以在声明之前使用这个变量，let 和 const 则不行， 使用前必须先定义 （就不用代码演示了）

暂时性死区

只要在块级作用域内，存在let 或 const。这个变量就是被绑定状态。

var tmp = 123;if (true) {  tmp = 'abc'; // ReferenceError  let tmp;}

变量的解构赋值

百科：解构可以称为结构分解。
自己理解：把某种数据类型，分解成单个变量的过程

解构规则：

1、可以为解构设置默认值
2、如果结构不成功，变量被设置为 undefined
3、数据结构具有 Iterator 接口 （ps： 新增加的一种接口形式，是可以被遍历的数据接口）
4、数组和字符串的解构是按照顺序来赋值的
5、对象是按照属性名对应变量名。因为对象的属性没有顺序

数据的解构

//看看a b c d e 的值let arr = [1,2,null];let [a,b,c,d,e='5'] = arr;

对象的解构

    let obj = {'a':1,'b':2};    let {a,b:str,c=5} = obj;    console.log(a);    console.log(str);    console.log(c);

字符串和数值也可以解构，我觉得用的不多

函数参数的解构赋值

和数组，对象解构方式类似

    let fun = function([x,y=3]){        console.log(x+y);    }    fun([1]);

    //fun 和 fun1 的区别    let fun = function({x=1,y=3}){        console.log(x+y);    }    fun();    let fun1 = function({x,y} = {x:1,y:3}){        console.log(x+y);    }    fun1();

变量解构的用途

• 提取 ajax 的 json 数据
• 函数的放回值
• 函数参数的默认值
  还是比较方便的

函数的扩展

内容大纲：

1、支持给函数增加默认值
2、变长参数 …（三个点） js中 rest
3、扩展运算符 … （还是三个点）。 是rest的反运算
4、箭头函数
5、尾调用优化

默认值

//没什么可说的function Point(x=0,y=0) {    console.log(x + j);}Point();

变长参数 （rest） 和扩展运算符

let fun = function(a,...other){  //定义函数使用rest参数 获取其余的参数    for(let v of other){        console.log(v);    }    console.log(a);}fun(1,2,3,4,5,6);let arr = [2,3,4,5,6];fun(1,...arr);  //调用参数时使用扩展运算符，给函数传参

箭头函数

var f = v => v;//等同于var f = function(v) {  return v;};

注意事项：

1、箭头函数不需要参数或需要多个参数，就使用一个圆括号代表参数部分
2、代码块部分多于一条语句，就要使用大括号将它们括起来，并且使用return语句返回
3、直接返回一个对象，必须在对象外面加上括号

let fun = (a, b) => { let c = a+b; return({a:a,b:b,c:c}) };console.log(fun(1,2));

关于函数内部this对象的问题

function abc (){    this.s1 = 0;    this.s2 = 0;    //箭头函数 this 定义时作用域    let add1 = () => {this.s1 += 1}    add1();    //普通函数 时运行作用域的this    let add2 = function(){        this.s2 += 1;    }}(function(){    console.log(new abc());})();

尾调用优化

当函数嵌套调用时，由于内存没有释放，会形成一个很大的调用栈。消耗大量内存。优化就时优化这个调用栈

//递归函数function factorial(n) {  if (n === 1) return 1;  return n * factorial(n - 1);}factorial(5) // 120//优化后function factorial(n, total) {  if (n === 1) return total;  return factorial(n - 1, n * total);}factorial(5, 1) // 120

JS第七种类型（Symbol）

这货，其实就是个对象，但是官方说它不是对象。咱们就先说他时对象吧
它的作用只有一个，就是生成一个唯一的值。用来防止属性、方法、变量重名的。

let a = Symbol('key'); //用所谓的构造函数生成的值//有啥用啊let a = Symbol('key');let b = Symbol('key');arr[a] = 1;arr[b] = 2;console.log(arr);//这样就生成了一个数组

怎么遍历这个数组？

let a = Symbol('key');let b = Symbol('key');arr[a] = 1;arr[b] = 2;for(let a of arr){    console.log(a);}//Object.getOwnPropertySymbols  方法返回一个数组，成员是当前对象的所有用作属性名的 Symbol 值

Symbol.for 和 Symbol.keyFor

这俩货时这个对象俩方法，用来查找已经生成的值的。

Symbol.for 在当前作用域下查找。找到直接返回存在的，否则新建一个
Symbol.keyFor 找不到返回undefined
现场演示吧

Set 和 Map 数据结构

1、Set 类似数组。但是值时不重复的
1、Map 类似对象，但可以用任何类型值作为键名
还有两个 WeakSet WeakMap

今天就演示一下Set。平时可能会用上

let arr = new Set([1,2,2,3,3]);  //能接受一个数组或者类似数组的对象arr.add(4);console.log(arr);

属性：

Set.prototype.constructor：构造函数，默认就是Set函数。
Set.prototype.size：返回Set实例的成员总数。

方法：

add(value)：添加某个值，返回Set结构本身。
delete(value)：删除某个值，返回一个布尔值，表示删除是否成功。
has(value)：返回一个布尔值，表示该值是否为Set的成员。
clear()：清除所有成员，没有返回值。

遍历：

keys()：返回键名的遍历器
values()：返回键值的遍历器
entries()：返回键值对的遍历器
forEach()：使用回调函数遍历每个成员

let a = new Set([1, 2, 3]);let b = new Set([4, 3, 2]);// 并集let union = new Set([...a, ...b]);// Set {1, 2, 3, 4}// 交集let intersect = new Set([...a].filter(x => b.has(x)));// set {2, 3}// 差集let difference = new Set([...a].filter(x => !b.has(x)));// Set {1}

异步对象（Promise）

所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。Promise 提供统一的 API，各种异步操作都可以用同样的方法进行处理

//异步加载图片的列子function loadimage(url) {    return new Promise(function (resolve, reject) {        var image = new Image();        image.onload = function () {            resolve(image);        }        image.onerror = function () {            reject(new Error('falid'));        }        image.src = url;    })}setTimeout(function () {    //.then 是Promise原型对象上的方法   //是为Promise实例添加状态改变时的回调函数   //第一个参数时 resolve 第二个 reject    loadimage('./123.jpg').then(function (data) {        var _Dom = document.getElementById('img');        _Dom.setAttribute('src', data.src)    }).catch(function (error) {。 //catch 是 .then(null,function(){})的别名         console.log(error);    })}, '2000')

Promise对象的构造函数需要提供一个函数，函数需要提供两个参数。resolve 和 reject 。这两个都是函数。resolve用于将Promise的状态从Pending变为Resolved（成功）。reject 用于将Promise的状态从Pending变为Rejected（失败）

为什么使用.then 和 .catch

简单的说就是 catch可以捕获错误，包括在成功状态下执行到then函数里，如果then函数里有错误也会被捕获。（如果不使用catch 代码内部的错误，不会向外传递，所以就这么些吧）

Promise.all() 合并多个Promise 实例为一个Promise实例

写一下概念：all 可以接受一个能遍历的对象作为参数。
1、所有的实例都成功，返回成功
2、只要有一个失败，就返回失败
（这个功能可以用于多个关联的ajax请求，一起成功后做处理）

var post = function(url) {    var promise = new Promise(function(resolve, reject){        var client = new XMLHttpRequest();        client.open("GET", url);        client.onreadystatechange = handler;        client.responseType = "json";        client.setRequestHeader("Accept", "application/json");        client.send();        function handler() {            if (this.readyState !== 4) {                return;            }            if (this.status === 200) {                resolve(this.response);            } else {                reject(new Error(this.statusText));            }        };    });    return promise;};var Promises = [1,2,3].map(function(id){    return post("./" + id + ".json");});Promise.all(Promises).then(function(data){    console.log(data);}).catch(function(error){    console.log(error);})

Promise.race() 和all()功能类似，只不过是这些Promise的状态是根据最快的那一个来决定的

Promise.resolve() 用于把现有的对象转为Promise对象

var jsPromise = Promise.resolve($.ajax('/whatever.json'));

1、如果 resolve 的参数时Promise对象，什么都不做返回
2、参数是一个thenable对象 （有then方法的对象） 转为Promise对象并立即执行then()
3、参数不是对象，立即返回一个 失败状态的Promise
4、不带任何参数，返回一个状态为成功的Promise对象

//很有意思的一个代码setTimeout(function () {  console.log('three');}, 0);Promise.resolve().then(function () {  console.log('two');});console.log('one');

iterator（生成器）

讲了好多原生的语法，其实重要的就是 for … of 可以自己了解一下

//看下解析之后的代码let arr = {a:1, b:2, c:3};for(let a in arr){    console.log(a);}for(let a of arr){    console.log(a);}