摘要：是國(guó)際組織于年月日發(fā)布的第六版，正式名為通常被成為或。二模版字面量提供一種簡(jiǎn)單實(shí)現(xiàn)表達(dá)式嵌套的字符串字面量操作，簡(jiǎn)而言之就是能夠以簡(jiǎn)單的方法實(shí)現(xiàn)字符串拼接操作。

本文同步 帶你入門 JavaScript ES6 (一)，轉(zhuǎn)載請(qǐng)注明出處。

ES6: 是 ECMA國(guó)際組織于 2015 年 6 月 17 日發(fā)布的 ECMAScript 第六版，正式名為 ECMAScript 2015,通常被成為 ES6 或 ECMAScript 6。

目錄：

一、let 和 const 聲明塊作用域變量

二、模版字面量

三、解構(gòu)賦值

四、對(duì)象字面量簡(jiǎn)寫

五、默認(rèn)參數(shù)

ES6 引入 let 和 const 作為塊作用域(用花括號(hào) {} 表示)變量聲明語法，用法同之前的 var 聲明變量類似。不同之處在于不會(huì)對(duì)申明的變量(或常量)提升作用域范圍

1.1 let 變量聲明

let 語法用于聲明塊作用域內(nèi)的可重新賦值的變量，作用域內(nèi)無法重新聲明

MDN let

let name = "huliuqing"
name = "Hu Liuqing"
console.log(name)

1.2 const 常量聲明

const 語法用于聲明是必須 賦值初始值,并且無法重新復(fù)制，作用域內(nèi)不能重新聲明

MDN const

const PI = 3.14
PI = 3.1415 //報(bào)錯(cuò) Uncaught TypeError: Assignment to constant variable.
console.log(PI)

1.3 let, const 和 var 比較

function findSeason(search) {
    var seasons = ["Spring", "Summer", "Autumn", "Winter"]

    for (season of seasons) {
        console.log("------START-------")
        console.log("current season:" + season + " I"m find:" + search)

        if (season.toLowerCase() == search.toLowerCase()) {
            let isSpring        = search.toLowerCase() == "spring"
            var theSeason       = season
            const SUMMER_SEASON = "Summer"
            
            console.log("isSpring 1: " + isSpring)
            console.log("SUMMER_SEASON 1:"  + SUMMER_SEASON)
            
            return SUMMER_SEASON
        } else {
            console.log("currentIterSeason is:" + theSeason)
        }        

        try{
            console.log("isSpring 2: " + isSpring)
        } catch (e) {
            console.error(e.message)
        }

        try{
            console.log("SUMMER_SEASON2:" + SUMMER_SEASON)
        } catch (e) {
            console.error(e.message)
        }
    }
}

console.log(findSeason("spring"))

console.log(findSeason("summer"))

console.log(seasons)


//運(yùn)行如下
------START-------
current season:Spring I"m find:spring
isSpring 1: true
SUMMER_SEASON 1:Summer
Summer

------START-------
current season:Spring I"m find:summer
currentIterSeason is:undefined
isSprint is not definedfindSeason 
SUMMER_SEASON 2: SUMMER_SEASON is not definedfindSeason  
------START-------
current season:Summer I"m find:summer
isSpring 1: false
SUMMER_SEASON 1:Summer
Summer

Uncaught ReferenceError: seasons is not defined

let isSpring, var theSeason, const SUMMER_SEASON 都是定義在 if 代碼塊內(nèi)

當(dāng)在 if 代碼塊外調(diào)用isSpring, theSeason, SUMMER_SEASON時(shí)，由于 let 和 const 塊作用域特性會(huì)在控制臺(tái)報(bào) not defined 錯(cuò)誤；而 var 定義的 theSeason 不會(huì)報(bào)錯(cuò)而僅輸出 undefined，這是因?yàn)?var 聲明的變量將作用域范圍提升至 getSeason 作用域范圍內(nèi)。

提供一種簡(jiǎn)單實(shí)現(xiàn)表達(dá)式嵌套的字符串字面量操作，簡(jiǎn)而言之就是能夠以簡(jiǎn)單的方法實(shí)現(xiàn)字符串拼接操作。

模版字面量

2.1 ES6 之前字符串拼接實(shí)現(xiàn)

let name = "huliuqing"
let age = 18
let conent = "你的名字:" + name + " 你今年幾歲了？" + age

隨著拼接內(nèi)容的增多，拼接操作越加復(fù)雜

2.2 ES6 使用飄號(hào)(``: 同 ~ 號(hào)在同一鍵位) 聲明字符串字面量

let result = `請(qǐng)計(jì)算 1 + 2 的結(jié)果 ${1 + 2}`
console.log(result);

let name = "huliuqing"
console.log(`你的名字？${name}`)

將值從數(shù)組或對(duì)象屬性提取到不同變量中

MDN 解構(gòu)賦值

ES6 之前，如果我們需要將數(shù)組中元素或?qū)ο笾袑傩蕴崛≈挡①x值給變量，實(shí)現(xiàn)起來比較復(fù)雜:

let numeric = [0, 1, 2]
let a = numeric[0]
let b = numeric[1]
let c = numeric[2]

console.log(a)
console.log(b)
console.log(c)

解構(gòu)賦值：語法同對(duì)象或數(shù)組初始化賦值語法，不同之處在于申明左側(cè)定義了需要賦值的變量數(shù)組或提取的對(duì)象屬性。

3.1 解構(gòu)數(shù)組中的值

// 1
let seasons = ["Spring", "Summer", "Autumn", "Winter"]
let [spring, summer, autumn, winter] = seasons // 將season 中的各個(gè)元素解構(gòu)到左側(cè)變量

console.log(spring)// Spring
console.log(summer)// Summer
console.log(autumn)// Autumn
console.log(winter)// Winter

// 2 將數(shù)組中剩余部分賦值給一個(gè)變量
let [spring2, summer2, ...autumnAndWinter] = seasons

console.log(spring2)//Spring
console.log(summer2)// Summer
console.log(autumnAndWinter)// ["Autumn", "Winter"]

3.2 解構(gòu)對(duì)象中的值

// 1
let user = {name: "huliuqing", age: 18}
let {name, age} = user
console.log(name)
console.log(age)

3.2 默認(rèn)值

// 數(shù)組解構(gòu)默認(rèn)值
let [a = 5, b = 7] = [1]
console.log(a)// 1 
console.log(b)// 7

//對(duì)象解構(gòu)默認(rèn)值
let {name = "hlq", age = 18} = {name: "huliuqing"}

console.log(name)// huliuqing
console.log(age)// 18

3.3 解構(gòu)數(shù)組時(shí)忽略某些值的解構(gòu)

let [a, , c] = [1, 2, 3]
console.log(a)// 1
console.log(c)// 3

let {name, , address} = {name: "huliuqing", age: 18, address: "shanghai"}

MDN 對(duì)象初始化

對(duì)象字面量簡(jiǎn)寫，提供一種對(duì)初始化一個(gè)對(duì)象時(shí)，它的對(duì)象屬性名與待賦值的變量名同名的初始化簡(jiǎn)寫方法

比較繞口？

4.1 ES6 之前對(duì)象初始化

let name = "huliuqing"
let age = 18
let user = {
    name: name,
    age: age
}
console.log(user)// Object {name: "huliuqing", age: 18}

我們可以看到屬性的賦值方式 name: name，age: age， 這就是冗長(zhǎng)的點(diǎn)。

4.2 對(duì)象字面量簡(jiǎn)寫

let name = "huliuqing"
let age = 18
let user = {
    name,
    age
}
console.log(user)// Object {name: "huliuqing", age: 18}

4.3 對(duì)象中方法簡(jiǎn)寫

同屬性字面量簡(jiǎn)寫類似，新的 ES6 語法提供了對(duì)象方法的簡(jiǎn)寫

let name = "huliuqing"
let age = 18
let user = {
    name,
    age,
    getUser() {
        return `${name} : ${age}`
    }, // ES6 語法
    //getUser: function() {
    //    return `${name} : ${age}`        
    //} // 之前的語法
}
console.log(user.getUser()) // huliuqing : 18

函數(shù)默認(rèn)參數(shù)允許在函數(shù)沒有值或 undefined 被傳入時(shí)，使用默認(rèn)形參

// ES6 之前
function multiply(a, b) {
    a = typeof a === "undefined" ? 1 : a;
    b = typeof b === "undefined" ? 1 : b;

    return a * b;
}

multiply(2) //2
multiply(5,2) //10

// ES6 之后

function multiply(a = 1, b = 1) {
    return a * b;
}

multiply(2) // 2
multiply(5,2)// 10

MDN

MDN let

MDN 解構(gòu)賦值

MDN 對(duì)象初始化

MDN 默認(rèn)參數(shù)