關於ES6新增的東西

查詢瀏覽器對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()); // 要飯的

 

轉載請注明‘轉載於Jason齊齊的博客http://www.cnblogs.com/jasonwang2y60/’