es6相關知識彙總

ECMAScript 6.0（如下簡稱 ES6）是 JavaScript 語言的下一代標準，已經在 2015 年 6 月正式發佈了。它的目標，是使得 JavaScript 語言能夠用來編寫複雜的大型應用程序，成爲企業級開發語言。

　　ES6 既是一個歷史名詞，也是一個泛指，含義是 5.1 版之後的 JavaScript 的下一代標準，涵蓋了 ES201五、ES201六、ES2017 等等，而 ES2015 則是正式名稱，特指該年發佈的正式版本的語言標準。本書中提到 ES6 的

　　地方，通常是　指 ES2015 標準，但有時也是泛指「下一代 JavaScript 語言」。

ECMAScript 和 JavaScript 究竟是什麼關係？

　　ECMAscript是javascript的標準，javascript是ECMAscript的實現。

　　1996 年 11 月，JavaScript 的創造者 Netscape 公司，決定將 JavaScript 提交給標準化組織 ECMA，但願這種語言可以成爲國際標準。次年，ECMA 發佈 262 號標準文件（ECMA-262）的初版，規定了瀏覽器腳本語言的標準，並將這種語言稱爲

　　ECMAScript，這個版本就是 1.0 版。該標準從一開始就是針對 JavaScript 語言制定的，可是之因此不叫 JavaScript，有兩個緣由。一是商標，Java 是 Sun 公司的商標，根據受權協議，只有 Netscape 公司能夠合法地使用 JavaScript 這個名字，且

　　JavaScript 自己也已經被 Netscape 公司註冊爲商標。二是想體現這門語言的制定者是 ECMA，不是 Netscape，這樣有利於保證這門語言的開放性和中立性。

環境支持：

　　目前各大瀏覽器基本上都支持 ES6 的新特性，其中 Chrome 和 Firefox 瀏覽器對 ES6 新特性最友好，IE7~11 基本不支持 ES6。

ES6經常使用特性：

　　Default Parameters（默認參數
　　Template Literals （模板文本）
　　Multi-line Strings （多行字符串）
　　Destructuring Assignment （解構賦值）
　　Enhanced Object Literals （加強的對象文本） 
　　Arrow Functions （箭頭函數）
　　Promises in ES6 
　　Block-Scoped Constructs Let and Const（塊做用域構造Let and Const） 
　　Classes（類） 
　　Modules（模塊）

聲明命令：

　　 1. let命令

　　　　ES6新增了let命令，用來聲明變量。它的用法相似於var，可是所聲明的變量，只在let命令所在的代碼塊內有效。
　　　　

{
  let a = 10;
  var b = 1;
}
console.log(b); // 1
console.log(a); // 報錯a沒有定義

　　 2.const命令

　　　　

const PI = 3.1415;
PI = 3; //報錯，賦值給常量
const a; //報錯，缺乏初始化

　　　　const聲明一個只讀的常量。一旦聲明，常量的值就不能改變，且聲明時必須當即初始化，不能留到之後賦值。const的做用域與let命令相同：只在聲明所在的塊級做用域內有效。

　　 3.Class命令

function Point(x, y) {
  this.x = x;
  this.y = y;
}
Point.prototype.toString = function () {
  return '(' + this.x + ', ' + this.y + ')';
};
 
// 上面爲原先寫法，下面爲ES6的Class寫法
 
class Point {
  constructor(x, y) {  // 構造方法，this關鍵字表明實例對象
    this.x = x;
    this.y = y;
  }
  toString() { // 自定義方法，方法之間不須要逗號分隔，加了會報錯
    return '(' + this.x + ', ' + this.y + ')';
  }
}

　　　　ES6 提供了更接近傳統語言的寫法，引入了Class（類）這個概念（類的數據類型就是函數，類自己就指向構造函數），做爲對象的模板。經過class關鍵字，能夠定義類。class能夠看做只是一個語法糖，它的絕大部分功能，

　　　　ES5均可以作到，新的class寫法只是讓對象原型的寫法更加清晰、更像面向對象編程的語法而已

　　 4.import命令

　　　　import雖然屬於聲明命令，但它是和export命令配合使用的。export命令用於規定模塊的對外接口，import命令用於輸入其餘模塊提供的功能。

　　　　一個模塊就是一個獨立的文件。該文件內部的全部變量，外部沒法獲取。若是外部可以讀取模塊內部的某個變量、函數或類，就必須使用export關鍵字輸出。

解構賦值

　　ES6容許按照必定模式，從數組和對象中提取值，對變量進行賦值，這被稱爲解構（Destructuring）。本質上，這種寫法屬於「模式匹配」，只要等號兩邊的模式相同，左邊的變量就會被賦予對應的值。

let a = 1;
let b = 2;
let c = 3;
// 等價於
let [a, b, c] = [1, 2, 3];
 
let [ , third] = ["foo", "bar", "baz"];
third // "bar"
 
let [head, ...tail] = [1, 2, 3, 4];
head // 1
tail // [2, 3, 4]
let [x, y, ...z] = ['a'];
x // "a"
y // 變量解構不成功，賦值爲undefined
z // 數組解構不成功，賦值爲[]


let { bar, foo } = { foo: "aaa", bar: "bbb" };
foo // "aaa"
bar // "bbb"
 
let { abc } = { foo: "aaa", bar: "bbb" };
abc // undefined
 
let { foo: baz } = { foo: 'aaa', bar: 'bbb' };
baz // "aaa"

 超引用

// ...   超引用
        function fun(...args){
            // console.log(arguments);     //obj
            console.log(args);     //arr  --1,2,3,4,5,6
            args.push(7);
            console.log(args);  //arr  --1,2,3,4,5,6,7
        }
        fun(1,2,3,4,5,6)


　　　　// ES5的寫法
 　　　　　　Math.max.apply(null, [14, 3, 77]) 
　　　　// ES6的寫法 
　　　　　　Math.max(...[14, 3, 77]) 
　　　　// 等同於 
　　　　　　Math.max(14, 3, 77);

模板字符串

　　模板字符串是爲了解決使用+號拼接字符串的不便利而出現的。它的功能很是強大，可是咱們大多數時候使用它則很是簡單。

　　模板字符串用反引號(`)，英文輸入法下跟波浪線~鍵同一個按鍵)表示，它能夠表示普通的字符串，也能夠表示多行字符串，同時還能夠插入變量。

　　使用 `` 將整個字符串包裹起來，而在其中使用 ${} 來包裹一個變量或者一個表達式。

// es6
const a = 20;
const b = 30;
const string = `${a}+${b}=${a+b}`;

// es5var string = a + "+" + b + "=" + (a + b);

箭頭函數

　　箭頭函數提供了一種更加簡潔的函數書寫方式。基本語法是：參數 => 函數體

　　箭頭函數表達式的語法比函數表達式更簡潔，而且沒有本身的this，arguments，super或 new.target。這些函數表達式更適用於那些原本須要匿名函數的地方，而且它們不能用做構造函數。

//一個參數
        var fun = a => a + b;
        //等價
        function fun(a){
            return a + b
        }
        //沒有參數或多個函數時要用()括起來
        //無參,一條語句能夠省略{}
        var fun1 = () => a + b;
        //多參,執行多條語句要用{}括起來
        var fun2 = (a,b,c) =>{
             let sum = a + b + c;
             return sum;
        }

        //當箭頭函數要返回對象的時候，爲了區分於代碼塊，要用 () 將對象包裹起來
        // 報錯
        var f = (id,name) => {id: id, name: name};
        f(6,2);  // SyntaxError: Unexpected token :
         
        // 不報錯
        var f = (id,name) => ({id: id, name: name});
        f(6,2);  // {id: 6, name: 2}

異步處理 Promise()

　　主要用於獲取異步數據

　　語法 new Promise((resolve, reject) => { })
　　resolve 異步成功後的回調函數
　　reject 異步失敗後的回調函數
　　Promise.prototype.then() 方法
　　Promise實例狀態（fullfiled、rejected）改變時的執行回調
　　Promise.prototype.catch() 方法
　　是.then(null,rejeaction)的別名，用於指定發生錯誤時的回調函數。

//eg1:
var pro = new Promise(function(resolve,reject){
            // resolve(data)
            resolve(123);     //這個是成功的，我要把成功後的數據123傳遞出去
            // reject(456)   //失敗時傳出去
        })


        pro.then(function(val){      //then方法執行完成之後又返回了一個promise對象
            //這個是成功的回調
            console.log("成功了,接收到的數據爲：" + val);
            return val + 1;
        },function(err){
            //這個是失敗的回調
            console.log(err);
        }).then(function(val){
            console.log(val)
        },function(err){})

//eg2:ajax與promise
<div id="box"></div>
    <button id="btn">展現</button>
    <script>
        var box = document.getElementById("box");
        var btn = document.getElementById("btn");
        function ajax(url,succ,erro){
            var xhr = new XMLHttpRequest();
            xhr.open("GET",url,true);
            xhr.send();
            xhr.onload = function(){
                if(xhr.readyState == 4 && xhr.status == 200){
                    succ(xhr.responseText);
                }else{
                    erro(xhr.status);
                }
            }
        }

        btn.onclick = function(){
            var p = new Promise(function(resolve,reject){
                ajax('04.txt',function(data){
                    resolve(data);
                },function(status){
                    reject(status);
                })
            });
            p.then(function(data){
                box.innerHTML = data;
            },function(err){
                box.innerHTML = err;
            })
        }
</script>

Generator

生成器對象是由一個 generator function 返回的,而且它符合可迭代協議和迭代器協議。普通函數是一路執行到底，Generator能夠中間暫停。

function show(){
    alert("a")
    alert("b")
}
show(); //一次性執行完整個函數

function *show2(){
    yield "a"
    yield "b"
}
let fun = show2();
for(var i of fun){
     console.log(i)        
}
//a
//b