0. ECMAScript 6 簡介

• ECMAScript 6.0?
  ES6是 JavaScript 語言的下一代標(biāo)準(zhǔn)，已經(jīng)在 2015 年 6 月正式發(fā)布了。它的目標(biāo)，是使得 JavaScript 語言可以用來編寫復(fù)雜的大型應(yīng)用程序，成為企業(yè)級開發(fā)語言。
  在ES6之前，js只有全局作用域和函數(shù)作用域，ES6中l(wèi)et關(guān)鍵字為其引入了塊級作用域。
• ECMAScript 和 JavaScript 的關(guān)系?。
  ECMAScript 和 JavaScript 的關(guān)系：前者是后者的語法規(guī)格，后者是前者的一種實(shí)現(xiàn).
  我把JavaScript近似等同于ECMAScript(ES), 而ES6 = ES5 + 新特性，所以ES6和ES5都相當(dāng)于JavaScript。

1. 塊級作用域的引入

{
var a = 5;
let  b = 6;
}
console.log(a);     //5
console.log(b);     //b is undefined

let聲明的變量只能在其所在的代碼塊內(nèi)才能訪問，var聲明的變量由于是全局變量，因此可以在代碼塊外訪問

2. 暫時(shí)性死區(qū)

var聲明的變量可以在聲明之前使用，相當(dāng)于默認(rèn)為其聲明其值為undefined了；

但是，let聲明的變量一旦用let聲明，那么在聲明之前，此變量都是不可用的，術(shù)語稱為“暫時(shí)性死區(qū)”。

console.log(a);                     //undefined
var a=8;
console.log("----------");
console.log(b);                     //控制臺報(bào)錯(cuò)
let b=9;

所以我們要養(yǎng)成變量先聲明再使用的好習(xí)慣。

3. const命令

const用來定義常量，相當(dāng)于java中的final關(guān)鍵字。

并且const聲明常量之后就必須立即初始化！

4. 解構(gòu)賦值

let [a,b,c] = [1,2,3];
let{x1,x2} = {x2:5,x1:6};
const [a,b,c,d,e]= "hello";
let {data} = await http.post(url,params);
function  add([i,j]) {}---add([5,6]);

可以理解為“模式匹配”

5.模板字符串

// 普通字符串
`In JavaScript '\n' is a line-feed.`

// 多行字符串
`In JavaScript this is
 not legal.`

console.log(`string text line 1
string text line 2`);

// 字符串中嵌入變量
let name = "Bob", time = "today";
`Hello ${name}, how are you ${time}?`

${主體}，其中主體可以是表達(dá)式、運(yùn)算、對象屬性還可以是函數(shù)，若是字符串將直接輸出該字符串。

6. 含參函數(shù)的調(diào)用

function say(something){
    console.log("she say"+" '"+something+"'" );
}
say`hello`;                             //she say 'hello'

7.數(shù)值拓展

ES6也為數(shù)值類對象例如Number、Math添加了新的方法以及屬性（常量）

    // 檢查是不是有限的 (-2^53,2^53)
    console.log(Number.isFinite(1)) // true
    console.log(Number.isFinite(NaN)) // false
    console.log(Number.isFinite(1/0)) // false
   
     // 檢查是不是NaN
    console.log(Number.isNaN(NaN)) // true
    console.log(Number.isNaN(0)) // false
   // 檢查是不是整數(shù)
    console.log(Number.isInteger(1)) //true
    // 這要注意
    console.log(Number.isInteger(1.0)) //true
    
    console.log(Number.isInteger(1.1)) //false
    console.log(Number.isInteger('1')) //false
   // 最大和最小安全數(shù)值
    console.log(Number.MAX_SAFE_INTEGER)
    console.log(Number.MIN_SAFE_INTEGER)
    
    console.log(Number.isSafeIntger(1)) //true
  // 取整
    console.log(Math.trunc(1.1)) //1
    console.log(Math.trunc(1.9)) //1
    //判斷一個(gè)數(shù)到底是正數(shù)、負(fù)數(shù)、還是零
    console.log(Math.sign(-2)) //-1
    console.log(Math.sign(0)) // 0
    console.log(Math.sign(2)) // 1
    console.log(Math.sign('2')) // 1
    console.log(Math.sign('aa')) // NaN

8. 函數(shù)function

function show(name="jack",sex="boy"){
    console.log(name+" is a "+sex+"!");
}
show();                                  //jack is a boy!
show('judy');                            //judy is a boy!
show('judy','girl');                     //judy is a girl!

為函數(shù)的參數(shù)添加默認(rèn)值，執(zhí)行函數(shù)時(shí)如果不傳該參數(shù)，那么就用默認(rèn)值代替。
箭頭函數(shù)：

var f = v => v;
//等同于
var f = function(v) {
  return v;
};

var f = () => 5;
// 等同于
var f = function () { return 5 };

var sum = (num1, num2) => num1 + num2;
// 等同于
var sum = function(num1, num2) {
  return num1 + num2;
};

注意：如果return的是一個(gè)對象{id:id,age:age},那么箭頭右邊要用括號包起來().

9. 數(shù)組的擴(kuò)展

擴(kuò)展運(yùn)算符為三個(gè)點(diǎn)（...）,將一個(gè)數(shù)組轉(zhuǎn)化為參數(shù)序列，通常與函數(shù)一起使用，show(...['judy','girl'])。

數(shù)組合并：[...arr1,...arr2,...arr3]

字符串轉(zhuǎn)字符數(shù)組：[..."hello"]--------------["h","e","l","l","o"]

將實(shí)現(xiàn)Iterator接口的對象轉(zhuǎn)化為真正的數(shù)組：[...nodelist]，這里的nodelist是一個(gè)類似于數(shù)組的nodelist對象
Generator 函數(shù)：該函數(shù)執(zhí)行后返回一個(gè)遍歷器對象，拓展運(yùn)算符也可將其轉(zhuǎn)化為數(shù)組。

let a =function*(){
    yield 3;
    yield 4;
    yield 5;
    return 6;
};
console.log([...a()]); 

只有執(zhí)行a().next()，函數(shù)內(nèi)部的語句才會執(zhí)行一次，每調(diào)用一次next()函數(shù)執(zhí)行一次內(nèi)部函數(shù).
next()函數(shù)有一個(gè)可選參數(shù)，用來表示上一次yield表達(dá)式值。
e.g:

function* foo(x) {
  var y = 2 * (yield (x + 1));
  var z = yield (y / 3);
  return (x + y + z);
}

var b = foo(5);
b.next()                   // { value:6, done:false }
b.next(12)                 // { value:8, done:false }
b.next(13)                 // { value:42, done:true }

解析：
第一次next()，x=5，那么yield(x+1)=6---{value:6,done:false}
第二次next(12)，令yield(x+1)=12，那么y=24,輸出yield(y/3)=8---{value:8,done:false}
第三次next(13)，令yield(y/3)=13，前面yield(x+1)=12，那么最終z=13，y=24，x=5，return (x+y+z)=42---{value:42,done:true}

10. 數(shù)組的方法

Array.from(對象，對新數(shù)組各項(xiàng)的改動(dòng)規(guī)則)
這里的對象只適合①類數(shù)組對象②實(shí)現(xiàn)Iterator接口的對象；后面的規(guī)則可選
e.g:
Array.from([1, 2, 3], (x) => x * x) //這里將數(shù)組每項(xiàng)按一定規(guī)則改變生成新數(shù)組[1,4,9]

Array.of(數(shù)據(jù)1，數(shù)據(jù)2，數(shù)據(jù)3)
將一組數(shù)據(jù)轉(zhuǎn)化為數(shù)組
e.g：
Array.of(1,2,3,4,5) //[1,2,3,4,5]
find(規(guī)則)、findIndex(規(guī)則)

這里的規(guī)則是一個(gè)回調(diào)函數(shù)，找到了就返回這個(gè)數(shù)組項(xiàng)/索引，找不到返回undefined/-1
e.g：
[9,8,7,6,5,4,3].find(n=>n<5) //返回4

還可以添加第二個(gè)參數(shù)，如下

function f(v){
    return v > this.age;
}
let  c =function(v){
    return v > this.age;
}
let person = {name: 'John', age: 20};
let a  =[10, 12, 26, 15].find(c, person);            //c、f都可以  
console.log(a);

for...of遍歷數(shù)組的鍵、值、以及各項(xiàng)鍵值對信息

for (let index of ['a', 'b'].keys()) {
    console.log(index);
}
// 0
// 1

for (let elem of ['a', 'b'].values()) {
    console.log(elem);
}
// 'a'
// 'b'

for (let [index, elem] of ['a', 'b'].entries()) {
    console.log(index, elem);
}
// 0 "a"
// 1 "b"

11. 對象的拓展

對象里面可以直接寫入變量和函數(shù)

//before：
var person = {
    name:'eco',
    age:18,
    say:function(something){
        console.log("hello "+something);
    }
};
person.say('world');

//now:
var firstname='jack';
var man = {
    firstname,
    say(something){
        console.log(this.firstname);
        console.log("hello "+something);
    }
};
man.say('world');

Object.is(值1，值2)用于比較兩個(gè)值是否相等，返回布爾值

Object.assign(targetobject,sourceobject1,sourceobject2)

Object.assign([],old,new); // 返回一個(gè)合并后的對象

用于對象的合并，將源對象合并到目標(biāo)對象，若有相同屬性源對象屬性覆蓋目標(biāo)對象屬性
如果源對象是其他數(shù)據(jù)類型，只有字符串會以字符數(shù)組形式拷到目標(biāo)對象，其他類型不會有效果。

const v1 = 'abc';
const v2 = true;
const v3 = 10;

const obj = Object.assign({}, v1, v2, v3);
console.log(obj);           // { "0": "a", "1": "b", "2": "c" }

12. Set和Map數(shù)據(jù)結(jié)構(gòu)

• Set：成員不重復(fù)的類數(shù)組結(jié)構(gòu)

Set屬性：size---返回成員總數(shù)

Set操作方法：add(value)---返回Set、delete(value)---返回布爾、has(value)---返回布爾、clear()---無返回值

Set遍歷方法：keys()---返回鍵（索引）的遍歷器、values()---返回值的遍歷器、
WeakSet：類似于Set，只是它的成員只能是對象，沒有size，不能遍歷

• Map：廣義上的鍵值對集合，鍵的范圍不局限于字符串，對象也可以當(dāng)作鍵
  Map操作方法：set(key,value)---設(shè)置成員、get(key)---讀取指定鍵的值，若無返回undefined

const set = new Set([1, 2, 3, 4, 4]);
//[...set]---[1,2,3,4]

const map = new Map([
    ['name', '張三'],
    ['title', 'Author']
]);

13.類

// Before
// define a class
function Cat(name,color){
            return {
                name:name,
                color:color
            }
        }

var cat1 = Cat('big','yellow');
var cat2 = Cat('small','black');

console.log(cat1.name +' '+cat1.color);
console.log(cat2.name+' '+cat2.color);

ES6之前的類繼承

// 利用空對象做中介

function Animal(){}

Animal.prototype.species = 'Animal';

function Cat(name,color){
    this.name = name;
    this.color = color;
}

// 封裝繼承函數(shù)
function extend(Child,Parent){
    var F = function(){};
    F.prototype = Parent.prototype;
    Child.prototype = new F();
    Child.prototype.constructor = Child;
    // 備用性質(zhì)
    Child.uber = Parent.prototype;
    // 等于在子對象上打開一條通道，可以直接調(diào)用父對象的方法，這一行放在這里，只是為了實(shí)現(xiàn)繼承的完整性
}

extend(Cat,Animal);

var cat = new Cat('big','red');

console.log(cat.species);
console.log(Cat.prototype.constructor == Cat);
console.log(Animal.prototype.constructor == Animal);

ES6中的類

// Now
class Point {
   constructor(x, y) {
       this.x = x;
       this.y = y;
   }

   toString() {
       return '(' + this.x + ', ' + this.y + ')';
   }
}
var a = new Point(1,2);
console.log(a.x);                      //1
console.log(a.toString());             //(1,2)

繼承：extends關(guān)鍵字

class ColorPoint extends Point {
  constructor(x, y, color) {
    super(x, y);                                // 調(diào)用父類的constructor(x, y)
    this.color = color;
  }

  toString() {
    return this.color + ' ' + super.toString(); // 調(diào)用父類的toString()
  }
}

繼承了父類的所有屬性，也可以添加或者修改屬性

14.模塊化

//lib.js
var counter = 3;
function incCounter() {
  counter++;
}
module.exports = {
  counter: counter,
  incCounter: incCounter,
};

// main.js
var mod = require('./lib');

console.log(mod.counter);  // 3
mod.incCounter();
console.log(mod.counter);  // 3

15.Promise---異步

先來看ajax的異步：

$(function(){
    $('#send').click(function(){
         $.ajax({
             type: "GET",
             url: "test.json",
             data: {username:$("#username").val(), content:$("#content").val()},
             dataType: "json",
             success: function(data){
                         $('#resText').empty();   //清空resText里面的所有內(nèi)容
                         var html = ''; 
                         $.each(data, function(commentIndex, comment){
                               html += '<div class="comment"><h6>' + comment['username']
                                         + ':</h6><p class="para"' + comment['content']
                                         + '</p></div>';
                         });
                         $('#resText').html(html);
                      }
         });
    });
});

上面的例子實(shí)現(xiàn)了一個(gè)類似于表單提交的功能。
Promise的異步：

let promise = new Promise(function(resolve, reject) {
  console.log('Promise');                        //實(shí)例化后立即執(zhí)行
  resolve();                                     //任務(wù)（成功）完成
});

promise.then(function() {
  console.log('resolved.');                      //任務(wù)結(jié)束執(zhí)行
});

console.log('Hi!');                              //在實(shí)例化promise的同時(shí)，執(zhí)行

顯示順序："Promise"---"Hi"---"resolved"

可以看出，在promise執(zhí)行的整個(gè)過程中（實(shí)例化到結(jié)束），并沒有阻塞其他外部語句的執(zhí)行，換句話說，其他語句

不用等到輸出"resolved"之后再執(zhí)行。

function loadImageAsync(url) {
  return new Promise(function(resolve, reject) {
    const image = new Image();

    image.onload = function() {
      resolve(image);                        //promise對象狀態(tài)變?yōu)閞esolved
    };

    image.onerror = function() {
      reject(new Error('Could not load image at ' + url));
    };                                       //promise對象狀態(tài)變?yōu)閞ejected并拋出錯(cuò)誤

    image.src = url;
  });
}

注意：上面狀態(tài)改變時(shí)傳入函數(shù)的參數(shù)（image、new Error），會傳到之后then函數(shù)，作為then函數(shù)的參數(shù)的參數(shù)?。?！

loadImageAsync(url).then(function(success){
  console.log(success);
} ,function(error){
  console.log(error);
});

這里的success接收來自resolved狀態(tài)的參數(shù)image，error接收來自rejected狀態(tài)的參數(shù)new Error。

事實(shí)上then后面還可以加上一個(gè)catch函數(shù)用來捕捉rejected狀態(tài)產(chǎn)生的錯(cuò)誤,這樣就可以省略掉then函數(shù)里面的第二個(gè)參數(shù)

promise.then(success()).catch(error()).finally(function(){});

16.async函數(shù)

async就表示asynchronous（異步的），async函數(shù)會返回一個(gè)Promise對象，自然能夠調(diào)用其方法：
promise.then(success()).catch(error()).finally(function(){});

async function getStockPriceByName(name) {
    const symbol = await getStockSymbol(name);
    const stockPrice = await getStockPrice(symbol);
    return stockPrice;             //stockPrice是一個(gè)promise對象
}

getStockPriceByName('goog').then(function (result) {
    console.log(result);
});

可以看出，它和一般函數(shù)沒多大區(qū)別，只是多了一個(gè)async標(biāo)識。
注意：上面所說到的返回一個(gè)對象，這個(gè)對象本身沒什么特別，只是他可以作為promise對象，在調(diào)用then方法的時(shí)候作為參數(shù)傳
到函數(shù)里面。而且因?yàn)檫@個(gè)對象會被當(dāng)做promisi對象，return關(guān)鍵字可以替換成await。
Async/await學(xué)習(xí)-luckyzv

17.Vue 與 ES6

• Vue是什么？

Vue.js（讀音 /vju?/，類似于 view） 是一套構(gòu)建用戶界面的漸進(jìn)式框架。

• Vue + ES6?
  模塊化開發(fā)