ES6新增（1）

查询浏览器对ES6的支持情况https://kangax.github.io/compat-table/es6/

Chrome、MS Edge、Firefox、Safari、Node和其它很多环境都已经嵌入程序以支持 JavaScript ES6 的大部分功能。

一、变量和变量的作用域
ES5：
定义变量用 var=5；
使用var来定义变量会使变量泄露到其他的代码块，并且使用var来定义变量会产生预解析，即变量的声明提前了，但是变量的初始化并没有提前，如果想使用var来声明变量，一定要在函数的顶部声明；

ES6：
定义变量加入了 let const

1》使用let来定义变量
let 会将变量提升到块顶部（而非像ES5是函数顶部）。
但是在变量声明前引用变量会造成错误。
let 是块作用域的，不可以在声明前使用。
块开始到变量生的区域：temporal dead zone；

2》const
如果不希望变量的值在发生改变，使用const声明变量。

总结：使用let和const代替var，尽量使用const来定义变量，如果变量在后续代码中需要更改变化，则使用let来声明

二、封闭空间
ES5：
(function(参数){})(传参);
ES5中封闭空间避免了污染全局环境

ES6：
为了避免污染全局环境污染不必再使用封闭空间，在局部环境中使用let来定义变量就解决了所有问题

    {        let  a=5;    }    alert(a);  //undefined

三、字符串和变量的拼接
1》单行字符串和变量的拼接
ES5：
字符串和变量的拼接：变量不加''，字符串加''，字符串和变量的拼接使用+

        eg：          var name=jason;        var age=18;        alert('His name is'+name+',He is'+age);

ES6:
字符串和变量的拼接，在拼接的整个作用域内加``(就是键盘1前面那个键的反引号)，变量和字符串都不再加''，变量使用${变量名}；
eg：

        const name=jason;        const age=18;        alert(`His name is ${name},He is ${age}`);

2》多行字符串
在进行DOM操作的时候免不了需要进行多行字符串的操作
ES5:
eg：

            var oLi='<li>n'+                        <div>我是ES5</div>n'+                        '<p>这是我的拼接</p>n'+                    '</li>';

ES6:

        eg:            const oLi=`<li>                         <div>我是ES6</div>                         <p>这是我的拼接</p>                       </li>`

四、解构赋值
1》数组的操作
ES5：

            var arr=[1,2,3,4,5];            var s=arr[0];            var n=arr[4];            alert(s,n);//1,5

ES6：

            const arr=[1,2,3,4,5];            const [s,,,,n]=arr;            alert(s,n);

2》值的对调：例如冒泡排序中的数组的值的对调
ES5：

            function BubbleSort(arr){                for(var i=0;i<arr.length;i++){                    for(var j=0;j<arr.length-1;j++){                        if(arr[j]>arr[j+1]){                            var tmp=arr[j];                            arr[j]=arr[j+1];                            arr[j+1]=tmp                        }                    }                }                return arr;            }

ES6:

             function BubbleSort(arr){                for(var i=0;i<arr.length;i++){                    for(var j=0;j<arr.length-1;j++){                        if(arr[j]>arr[j+1]){                            [arr[j],arr[j+1]]=[arr[j+1],arr[j]];                        }                    }                }                return arr;            }

3》查找返回值(包含多个值的时候)；
ES5:

            function obj() {              var left=1, right=2, top=3, bottom=4;              return { left: left, right: right, top: top, bottom: bottom };            }            var data = obj();            var left = data.left;            var bottom = data.bottom;            console.log(left, bottom); // 1 4

ES6:

            function obj(){                const left=1, right=2, top=3, bottom=4;                return    {left,right,top,bottom};            }            const {left,bottom}=obj();            console.log(left, bottom); // 1 4

还有
ES5：

            function settings() {              return { display: { color: 'red' }, keyboard: { layout: 'querty'} };            }            var tmp = settings();            var displayColor = tmp.display.color;            var keyboardLayout = tmp.keyboard.layout;            console.log(displayColor, keyboardLayout); // red querty

ES6：

            function settings() {              return { display: { color: 'red' }, keyboard: { layout: 'querty'} };            }            const { display: { color: displayColor }, keyboard: { layout: keyboardLayout }} = settings();            console.log(displayColor, keyboardLayout); // red querty

五、类和面向对象
在 JavaScript 中，每个对象都有原型对象。所有 JavaScript 对象都从原型上继承方法和属性。
ES5中，属性放在构造函数（constructor）里，方法放在原型(prototype)上;
ES6中引入了类（class）来代替构造函数（constructor）；
1》面向对象：ES6中引入了类（class）
ES5:

            function Person(name,age){                this.name=name;                this.age=age;            }            Person.prototype.showName=function(){                return this.name;            }            var P1 = new Person('jason','18');            alert(P1.showName());//jason

ES6:

            class Person {              constructor(name) {                this.name = name;              }              showName() {                return this.name;              }            }            const P1 = new Person('jason');            alert(P1.showName()); //jason

2》继承：提供了新的关键字 extends 和 super
ES5：

            function Person (name,age){                this.name = name;                this.age = age;            }            Person.prototype.showName = function(){                return this.name;            };            Person.prototype.showAge = function(){                return this.age;            };                        function Worker (name,age,job){                //属性继承                Person.call(this,name,age);                //Person.apply(this,arguments);                this.job = job;            }            //方法继承            Worker.prototype = new Person();            Worker.prototype.constructor = Worker;            Worker.prototype.showJob = function(){                return this.job;            };            //             var w1 = new Worker('jason',18,'要饭的');            alert(w1.showJob());//要饭的

ES6：

            class Person {                constructor(name,age) {                  this.name = name;                  this.age=age;                }                showName() {                  return this.name;                }                showAge(){                  return this.age;                }            }            class Worker extends Person {                  constructor(name,age,job){                      super(name,age);                      this.job=job;                  }                  showJob(){                      return this.job;                  }            }            const W1 = new Worker('jason',18,'要饭的');            alert(W1.showJob()); // 要饭的