解構(gòu)賦值

解構(gòu)賦值，顧名思義，將結(jié)構(gòu)解開賦值給變量

ES6 允許按照一定的模式，從數(shù)組和對(duì)象中提取值，對(duì)變量進(jìn)行賦值，被稱為解構(gòu)

數(shù)組解構(gòu)

• 解構(gòu)可同時(shí)使用默認(rèn)值

// 數(shù)組解構(gòu)賦值
// 傳統(tǒng)寫法
let arr = [1, 2, 3, 4];
let a = arr[0];
let b = arr[1];
let c = arr[2];
let d = arr[3];

console.log(a, b, c, d); // 1,2,3,4

// 解構(gòu)賦值，按照數(shù)組元素順序，依次賦值給左側(cè)數(shù)組里的變量
var [e, f, g, h] = arr;
console.log(e, f, g, h); // 1,2,3,4

var [e, f, g, h, i] = arr;
console.log(i); // undefined 由于數(shù)組元素沒有第五個(gè)值，因此，i 只聲明沒賦值，所以是 undefined

// 可以使用 es6 的默認(rèn)值給變量賦默認(rèn)值
var [e, f, g, h, i="我是默認(rèn)值"] = arr;
console.log(i); // 我是默認(rèn)值

代碼地址 git repo
commit 5c9642bfdfdc73be20543b8c39bddd58ce308bec

================分割線================

對(duì)象解構(gòu)

• 對(duì)象解構(gòu)需要留意一點(diǎn)，解構(gòu)出來的變量需要跟對(duì)象屬性名一致，如 let {name} = {name:'gouku'}
• 解構(gòu)后的方法，this 會(huì)指向 window, 如果需要指向原對(duì)象，需要使用 bind 方法

// 對(duì)象解構(gòu)賦值

// 傳統(tǒng)寫法
let foo = {
    firstName: 'gouku',
    sayHello() {
        console.log(this.firstName + ' say hello')
    }
};

foo.sayHello()

// 對(duì)象解構(gòu)寫法
let {
    sayHello
} = foo;

// 解構(gòu)后的方法，this 會(huì)指向 window, 如果需要指向原對(duì)象，需要使用 bind 方法
sayHello(); // undefined say hello
sayHello.bind(foo)(); // gouku say hello

代碼地址 git repo
commit c10781d0011593000e618741db4a6c81bdfd9b19

================分割線================

字符串與函數(shù)參數(shù)解構(gòu)賦值解構(gòu)

// 字符串解構(gòu)賦值
let [a, b, c, d] = 'hey';

console.log(a, b, c, d); // h e y undefined

// 函數(shù)參數(shù)解構(gòu)賦值
// 傳統(tǒng)寫法
let params = {
    name: 'gouku',
    age: 20
}

function say(par) {
    // 參數(shù)是對(duì)象，因此里面的屬性都需要帶上對(duì)象
    console.log(par.name, par.age)
}
say(params); // gouku 20

// 解構(gòu)寫法
function say({
    name,
    age
}) {
    console.log(name, age)
}

say(params); // gouku 20

代碼地址 git repo
commit 34dc49422147f86dfa5ddb0086b7d9a3ac2ee949

================分割線================

模板字符串

• 以前 js 拼接字符串需要使用 +，并且字符串無法換行

let ulStr = '<ul>' +
    '<li></li>' +
    '<li></li>' +
    '<li></li>' +
    '</ul>';

console.log(ulStr); // <ul><li></li><li></li><li></li></ul>

• 或者每行加個(gè)轉(zhuǎn)義符(輸出不換行格式)

let ulStr1 = '<ul>\
    <li></li>\
    <li></li>\
    <li></li>\
    </ul>';

// 輸出不換行格式
console.log(ulStr1); // <ul>            <li></li>            <li></li>            <li></li>            </ul>

• 模板字符串
  • 使用反引號(hào) `

let ulStr3 = `<ul>
    <li></li>
    <li></li>
    <li></li>
    </ul>`;
console.log(ulStr3);

• 里面可以放表達(dá)式和能拿到返回值得函數(shù)，使用${}
• 不能放語句

let name = "goku";
let ulStr4 = `<ul>
    <li>${1+2}</li>
    <li>${name}</li>
    <li>${true?"真":"假"}</li>
    <li>${[1,2].push(1)}</li>
    </ul>`;
console.log(ulStr4);

代碼地址 git repo
commit 4358fcff6917565065ef84419a50a8da458b346d