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.2
let [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)  false
console.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.js
import { 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;">//创建promise
var 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>

       先总结到这。