ES6基本語法複習

塊級做用域概念 let 和 const的加入

let

ES6的規範慢慢的成爲主流，再加上打包工具可以將咱們的ES6代碼無縫的壓縮成爲可讀的ES5代碼。漸漸的深受大部分開發者喜好（不排除一些人對ES5情有獨鍾）。

在ES6以前的版本，實際上是沒有塊級做用於概念的，不管是在{}裏面仍是外面均可以被訪問到。

舉個栗子： 下面代碼中，我在if中才定義的test變量在它的父做用域依舊能被調取到，這很明顯不是咱們但願獲得的。所以ES6的塊級做用域給與了咱們更大的嚴謹性。

function foo() {
    if (true) {
        // 我在 if 的局部中定義一個變量 : test
        var test = '若是if 爲 true 就輸出我'
        console.log(test)
        // --end if
    }
    console.log(test) 
}
foo ()  // 運行函數
// print : 
// 若是if 爲 true 就輸出我
// 若是if 爲 true 就輸出我
複製代碼

當咱們用 let 的時候，能夠發現，程序報錯了，提示咱們找不到該變量。這個時候咱們就知道了，let定義的變量只能在當前 {} 中生效。我感受這是一個很是好的現象。

// ReferenceError: test is not defined
複製代碼

const

const 做用是定義一個只讀的變量。它定義的變量值是沒法更改的。避免一些不須要修改的參數被你是同事給「意外」更換掉。 舉個栗子： 能夠看的到 a = 2賦值的話是會直接報錯的。這樣就能給開發人員提示，不要動我，我被安排了。因此我我的比較喜歡const，甚至在寫程序的時候會默認const，只有須要去變更的時候，我纔會去將const換成let。

let b = 0
b = 1
const a = 1
a = 2 // TypeError: Assignment to constant variable.
複製代碼

const 面試的坑

面試： const定義的值能被修改嗎？ 你若是說不能的時候，可能這個面試官在坑你，其實const 定義對象內部的值是可以修改的。 舉個栗子： 能夠看獲得，沒有彈出常量錯誤，值被修改了。

const a = {
    name : 111
}
a.name = 2222  
console.log(a.name) // => 2222 
複製代碼

模板字符串

模板字符串能夠方便咱們去拼接一些字符串，這也是我經常使用的一個地方了，也沒有去深刻的瞭解，在之前都是用+號去這個乾的。模板字符串不是 '' 是反單引 ``。 舉個例子：

const name = 'Annai'
console.log('name : ' + name)
console.log(`name : ${ name }`)
// URL get參數拼接
const _LOGIN = `http://www.baidu.com/mobile/login?name=${param.name}&passward=${param.passward}`
console.log(_LOGIN)
複製代碼

箭頭函數

箭頭函數是ES6的一大兩點，很是簡便的就能去寫一個函數和一些計算屬性。和傳統函數的區別在於：

1. 沒有this
2. 沒有Prototype
3. 沒有argments
4. 沒有constructor
5. 其餘的能夠自行百度

沒有this

箭頭函數是沒有this指向的，那麼箭頭函數的this是哪裏來的呢？其實箭頭函數的this指向是綁定的最近一層非箭頭函數的this指向。 舉個栗子： 能夠看到下面兩個例子的this指向，由於箭頭函數沒有this，因此它會去找上一層非箭頭函數綁定的this，因此找到全局去了。

let Person = {
    name: 'wang',
    run: () =>{
        console.log(this) // {} || window
        console.log(this.name) //undefined
    },
    run1: function (){
        console.log(this) // Person
        console.log(this.name) //wang
    }
}
Person.run()
Person.run1()
複製代碼

沒有原型(Prototype)

當咱們去輸出箭頭函數的prototype原型的時候。沃特，怎麼沒有定義。 舉個栗子

const foo = value => {}
console.log(foo.prototype)
複製代碼

沒有argments

能夠看到當你試圖去輸出argments的話，箭頭函數直接拋一個不能調用錯誤給你。 舉個栗子

const a = function (){}
const b = () => {}

console.log(a.arguments) // null
console.log(b.arguments)
//TypeError: 'caller', 'callee', and 'arguments' properties may not be accessed on strict mode functions or the arguments objects for calls to them
複製代碼

沒有consttructor，沒法使用new

不僅是沒有原型，甚至連構造函數都沒有了，因此箭頭函數也就沒法使用new去進行獲取。由於new 操做後會去找函數中的constructor，由於沒有自帶構造函數，因此會提示錯誤 舉個栗子：

const Foo = value => {}
const foo = new Foo() // TypeError: Foo is not a constructor
複製代碼

Set 和 Map

Set(集合) 和 Map(字典)是ES6中新增長的數據結構，不過對於學過數據結構的小夥伴來說，這一點都不顯得陌生。

Set

咱們能夠把Set當作集合，既然是集合，那麼它確定不能有重複值。所以，Set去重法就來了 簡單實現Set去重數組： 下面就實現了一個很是簡單的數組去重。

const arr = [1,2,3,3,2,2,1,1]
console.log(arr) // [ 1, 2, 3, 3, 2, 2, 1, 1 ]
const new_arr = [...new Set(arr)]
console.log(new_arr) // [ 1, 2, 3 ]
複製代碼

Set的屬性

Set中只有一個size屬性，和數組的length屬性功能一致，用於返回集合的長度 舉個栗子： 經過條用size屬性，就能知道集合有多長了。

const set = new Set([1,2,3,4,5,6])
console.log(set.size) // => 6
複製代碼

Set的方法

Set方法都是對Set自己進行一些判斷和操做

1.add(value) 向集合添加一個值 2.delete(value) 刪除集合中的一個值 3.has(value) 判斷該值是否存在 4.clear 清除集合

Map

Map就至關因而字典，新華字典中都有拼音文字來表示對應關係。Map中也是經過鍵對值來進行分佈的。它和Set均可以存儲不重複的數據，只是不一樣的地方在於，Set是經過值值來存儲的，Map是經過鍵值來存儲的。鍵值相對應。 舉個栗子： Map的生成。

const map = new Map()
map.set('name','wangly')
console.log(map) // Map { 'name' => 'wangly' }
複製代碼

Map的屬性

Map和Set同樣，只有一一個size屬性。

const map = new Map()
map.set('name','wangly')
console.log(map.size) // 1
複製代碼

Map的方法

1.set(key, val): 向字典中添加新元素 2.get(key):經過鍵值查找特定的數值並返回 3.has(key):若是鍵存在字典中返回true,不然false 4.delete(key): 經過鍵值從字典中移除對應的數據 5.clear():將這個字典中的全部元素刪除

Promise

Promise 是如今使用很是普遍的一個異步任務處理對象，也是目前JavaScript流行的異步處理方式之一。

Promise使用方式

Promise咱們能夠經過實例化一個Promise對象，而且接收一個函數來做爲參數，這個函數有兩個參數 resovle（成功） 和 reject（失敗）。Promise只有三種狀態

• pending ： 對象初始化，開始工做
• fulfilled ： 當調用resovle，則從pending變爲fulfilled成功。
• rejected： 當調用reject(失敗)，會由pending 變爲 rejected

const promise = new Promise((resolve,reject) => {
    console.log('promise執行中........')
    resolve() // 成功了|| reject()
})
複製代碼

.then()回調

then方法是當resolve(成功)/reject(失敗)狀態的回調函數，then()中有兩個參數，類型都是參數，第一個是onFulfilled(),第二個是onRejected() 舉個栗子：

const promise = new Promise((resolve,reject) => {
    console.log('promise執行中........')
    reject()// 成功了 || reject()
})
promise.then(
resolve => {
    // fulfilled 成功操做
    console.log('pending => fulfilled')
},
reject => {
    // rejected 失敗操做
    console.log('pending => rejected') // 我被輸出了
})
複製代碼

當成功時，我就執行成功的回調，當失敗時，我就執行失敗的回調。很是的有層次感受和代碼的優雅感受。。then也是一個鏈式的操做，他返回的就是一個promise對象，下面就是一個鏈式調用

.then().then().then()......
複製代碼

.catch()異常捕獲

用來捕獲前面.then()的異常信息捕獲，onRejected不能捕獲當前onFulfilled中的異常，因此能夠寫成這個。

promise.then(onFulfilled)
       .catch(onRrejected); 
複製代碼

Class

在ES6之JavaScript本沒有類，可是這怎麼可貴倒咱們的JSER呢，因此就有了類的概念，到ES6也如願的產生了class語法糖 ES5中的類

function Person (name){
    this.name = name
}
Person.prototype.myName = function (){
    console.log(this.name)
}
var person = new Person('wang')
person.myName()
複製代碼

ES6中的類

class Person{
    constructor (name){
        this.name = name
    }
    myName(){
        console.log(this.name)
    }
}
const person = new Person('wang')
person.myName()
複製代碼

解構賦值

對象的解構賦值

對象的解構賦值，若是指定的局部變量名稱在對象中不存在，那麼這個局部變量會被賦值爲 undefined，若是可以找到，那麼就會將對象中的值賦予給局部變量。

const person = {
    name: 'wang',
    age: 11,
    score: 100
}

const { name , age , score } = person
console.log(`name: ${name},age:${age},score:${score}`) //name: wang,age:11,score:100
複製代碼

數組的解構賦值

數組的解構賦值就很是簡單了，你給一個它就去數組中找一個，當你定義的變量超出數組下標就會賦值爲undefined。很是的靈活

const a = [1,2,3]
const [b,c,d,e] = a
console.log(`${b}-${c}-${d}-${e}`) // 1-2-3-undefined
複製代碼

未完待續 先總結一番