JS解構賦值

jrue發表於2019-02-16
JS賦值

  • 從ES6開始，JavaScript引入瞭解構賦值，可以同時對一組變數進行賦值。。

1. 基本型別

let [lString, lBoolean, lNumber] = [`ES6`, true, 20181227];
// 結果：lString = ES6, lBoolean = true, lNumber = 20181227

/**
 * 注意，對陣列元素進行解構賦值時，多個變數要用[...]括起來。
 * 如果陣列本身還有巢狀，也可以通過下面的形式進行解構賦值，注意巢狀層次和位置要保持一致：
 */
let [lString, lBoolean, lNumber] = [`ES6`, [true, 20181227]];
// 結果：lString = ES6, lBoolean = true,20181227, lNumber = undefined
// 正確的做法
let [lString, [lBoolean, lNumber]] = [`ES6`, [true, 20181227]];
// 結果：lString = ES6, lBoolean = true, lNumber = 20181227

// 解構賦值還可以忽略某些元素：
let [, , lNumber] = [`ES6`, [true, 20181227]];
// 結果：lNumber = 20181227

2. 陣列型別

let [clubs, players] = [
    [`Lakers`, `Magic`], 
    [`Lonzo Ball`, `Anthony Davis`, `Kawhi Leonard`, `Donovan Mitchell`, `達龍 福克斯`]
];
// 結果：clubs = [ `Lakers`, `Magic` ]
// 結果：players = [ `Lonzo Ball`, `Anthony Davis`, `Kawhi Leonard`, `Donovan Mitchell`, `達龍 福克斯` ]

3. 物件型別

let person = {
    name: `達龍 福克斯`,
    age: 20,
    gender: `male`,
    passport: `G-12345678`,
    school: `Kentucky`,
    address: {
        city: `重慶`,
        street: `龍湖時代天街`,
        zipcode: `400002`
    }
};
let { name, address: { city, zip } } = person;
/**
 * name = `達龍 福克斯`
 * city = `重慶`
 * zip  = undefined #因為屬性名是zipcode而不是zip
 * 注意: address不是變數，而是為了讓city和zip獲得巢狀的address物件的屬性:
 * address; #ReferenceError: address is not defined
 */
 
/**
 * >> 使用解構賦值對物件屬性進行賦值時，如果對應的屬性不存在，變數將被賦值為undefined，
 *    這和引用一個不存在的屬性獲得undefined是一致的。
 * >> 如果要使用的變數名和屬性名不一致，可以用下面的語法獲取：
 */
let { name, address: { city, zipcode:code } } = person;
// code = `400002`

// 解構賦值還可以使用預設值，這樣就避免了不存在的屬性返回undefined的問題：
let { name, address: { city, zipcode:code }, club=`kings` } = person;
// club = `kings`

4. 使用場景

// 快速獲取當前頁面的域名和路徑：
let {hostname:domain, pathname:path} = location;

/**
 * 如果一個函式接收一個物件作為引數，那麼，可以使用解構直接把物件的屬性繫結到變數中。
 * 例如，下面的函式可以快速建立一個Date物件：
 */
function buildDate({year, month, day, hour=0, minute=0, second=0}) {
    return new Date(year + `-` + month + `-` + day + ` ` + hour + `:` + minute + `:` + second);
}
buildDate({ year: 2018, month: 12, day: 27 });
// Thu Dec 27 2018 00:00:00 GMT+0800 (中國標準時間)
// 傳入hour、minute和second屬性：
buildDate({ year: 2018, month: 12, day: 27, hour: 20, minute: 15 });
// Thu Dec 27 2018 20:15:00 GMT+0800 (中國標準時間)

相關文章