ES6学习札记

            由于JavaScript语言的缺点和弱点，加之上次ESMCScript修订还是在2009年。es6终于在2015年闪亮现身了，并越来越多的运用在实际开发中。整理一下学到的新特性：

            1、新增let和const关键字

            ① 在之前的标准中，是没有块级作用域的。

<span style="font-size:14px;"> for (var i = 0; i < 3;i++){     setTimeout(function(){console.log(i)},1000); }    //输出全是2</span>

            我们只能通过闭包的方式模仿块级作用域。

<span style="font-size:14px;">for (var i = 0; i < 3;i++){  ;(function(i){       setTimeout(function(){              console.log(i)       },1000);})(i);    }    </span>

           通过let定义变量，便可以产生块级作用域，即只在let所在的代码块内是有效的。

            ②当在全局情况下定义时，变量并不会污染window。

<span style="font-size:14px;">var a = 'a';let b = 'b';console.log(window.b);//undefined</span>

            ③不像var那样会产生变量提升。不过实际开发中，变量提升的情况我们也用的比较少。

            ④不能在相同的作用域中使用let重复声明同一个变量。

            ⑤不能再函数内部重新声明参数。

           使用const定义变量后，表明其实常量，一旦定义后不可修改。

          2 、解构赋值

          实际上就是对变量进行批量赋值。

<span style="font-size:14px;">let arr = [3,32,3,4];let m = Math.max(...arr);console.log(m)</span>

又如：

<span style="font-size:14px;">let arr = [1,[2.1,2.2],3];let [, [,x]] =arr; console.log(x)//x=2.2let [a,b,...other] =arr; //...叫拓展运算符，把后面的整体放在一个数组中，但是拓展运算符不能放在中间console.log(other);//3</span>

        3、箭头

<span style="font-size:14px;">let say = name =>name; //第一个name是参数，第二个参数是返回值//相当于下面的写法/*var say = function(name){    return name}*/</span>

 又如：

<span style="font-size:14px;">let say2 = (name2,age2) => {    var a =5;    return `${name2} ${age2} ${a}`}//相当于let say3 = function(name2,age2){    var a =5;    return `${name2} ${age2} ${a}`}</span>

         4、新增数据类型Symbol

          是第七种数据类型，通常用于共同操作DOM的时候。不可参与运算，toString后才可以。

<span style="font-size:14px;">let sybx =Symbol('subx');let syby =Symbol('suby');console.log(sybx,syby,sybx == syby);//Symbol(subx)  Symbol(suby)  falseconsole.log(typeof sybx,sybx.toString() === syby.toString());//symbol false</span>

         5、Set和Map

         ①set：存的是类似数组的东西，相当于集合的概念，会自动在里面进行去重。

<span style="font-size:14px;">let set = new Set(['a','b','c','c']);let arr = [...set];console.log(arr);//a,b,c</span>

        set的并差交集

<span style="font-size:14px;">let s1 = new Set([1,3,5,7]);let s2 = new Set([1,4,5,8]);//并集合let sb = new Set([...s1,...s2]);console.log(sb);//交集let sj = new Set([...s1].filter(item =>s2.has(item)));console.log(sj);//差集let cj = new Set([...s1].filter(item =>!s2.has(item)));console.log(cj);</span>

        Weakset：如：let arr = =[1,2,3,4,obj]如果把引用类型obj删掉了，weakset里会释放掉它，不会出现内存泄漏。不会占着它不让释放此对象。

 ②Map：比如你写动画时，dom元素上绑x，y元素，想要一种数据结构，key是dom元素，value是对dom的描述。适合用map
            Weakmap:它的key是个对象，如果此对象被外界删除了，它不会再引用，不会出现内存泄漏的问题。

          6、类

          很像java中的类的概念

<span style="font-size:14px;">class Person{    constructor(name){        this.name=name;        this.hobbies = [];    }    getName(){        console.log(this.name);        return this.name;    }    get hobby(){        return this.hobbies;    }    set hobby(hobby){        this.hobbies.push(hobby);    }}class Student extends Person{    constructor(name){        super(name);//子类中先调用父类构造函数        this.name = name;    }    getStuNum(){        console.log('988')    }    getName(){        console.log(super.getName(),this.name);    }}var p = new Person('qiqi');p.hobby = 'smoking';p.hobby = 'drinking';console.log(p.hobby)p.getName()var g= new Student('qiqi1');g.getName();g.getStuNum();</span>

      7、字符串扩展

     有很多变化，目前只接触到模板字符串     

<span style="font-size:14px;">let name = 'qiqi';let age = 6;console.log(`${name} is ${age} years old`)//相当于下者</span><pre name="code" class="javascript"><span style="font-size:14px;">console.log(name+" is "+ age +' years old')//qiqi is 6 years old</span>

      8、模块

      如果你想将所有js放在一个文件中，或者你要在应用的不同地方使用相同的功能，你就要使用模块，记住魔术的关键词是export，在你的函数之前使用export。假设Project 和 WebProject 都储存在application.js文件中，如下源码结构：

<span style="font-size:14px;">  myproject (folder) | -- modules (folder) |   | |   -- helpers.js | -- application.js</span>

        如果我们从application.js中分离arrayToString()，然后放入modules/helpers.js，这样我们在其他地方可以重用它：

<span style="font-size:14px;">//这样我们只需要导入我们的模块即可：// application.jsimport { arrayToString } from 'modules/helpers';class WebProject extends Project {  constructor(name, technologies) {    super(name);    this.technologies = technology;  }  info() {    return this.name + " uses " + arrayToString(this.technology);  }}</span>

         9、Promise

         Promises是处理异步操作的一种模式，之前在很多三方库中有实现，比如jQuery的deferred对象。当你发起一个异步请求，并绑定了.when(), .done()等事件处理程序时，其实就是在应用promise模式。

<span style="font-size:14px;">//创建promisevar promise = new Promise(function(resolve, reject) {    // 进行一些异步或耗时操作    if ( /*如果成功 */ ) {        resolve("Stuff worked!");    } else {        reject(Error("It broke"));    }});//绑定处理程序promise.then(function(result) {//promise成功的话会执行这里    console.log(result); // "Stuff worked!"}, function(err) {//promise失败会执行这里    console.log(err); // Error: "It broke"});</span>

       先总结到这。