// 我們有一個存放了名字和姓氏的數(shù)組
let arr = ["John", "Smith"]

// 解構(gòu)賦值
// sets firstName = arr[0]
// and surname = arr[1]
let [firstName, surname] = arr;

alert(firstName); // John
alert(surname);  // Smith

let [firstName, surname] = "John Smith".split(' ');
alert(firstName); // John
alert(surname);  // Smith

// let [firstName, surname] = arr;
let firstName = arr[0];
let surname = arr[1];

// 不需要第二個元素
let [firstName, , title] = ["Julius", "Caesar", "Consul", "of the Roman Republic"];

alert( title ); // Consul

let [a, b, c] = "abc"; // ["a", "b", "c"]
let [one, two, three] = new Set([1, 2, 3]);

let user = {};
[user.name, user.surname] = "John Smith".split(' ');

alert(user.name); // John
alert(user.surname); // Smith

let user = {
  name: "John",
  age: 30
};

// 循環(huán)遍歷鍵—值對
for (let [key, value] of Object.entries(user)) {
  alert(`${key}:${value}`); // name:John, then age:30
}

let user = new Map();
user.set("name", "John");
user.set("age", "30");

// Map 是以 [key, value] 對的形式進(jìn)行迭代的，非常便于解構(gòu)
for (let [key, value] of user) {
  alert(`${key}:${value}`); // name:John, then age:30
}

let guest = "Jane";
let admin = "Pete";

// 讓我們來交換變量的值：使得 guest = Pete，admin = Jane
[guest, admin] = [admin, guest];

alert(`${guest} ${admin}`); // Pete Jane（成功交換?。?/pre>

let [name1, name2] = ["Julius", "Caesar", "Consul", "of the Roman Republic"];

alert(name1); // Julius
alert(name2); // Caesar
// 其余數(shù)組項未被分配到任何地方

let [name1, name2, ...rest] = ["Julius", "Caesar", "Consul", "of the Roman Republic"];

// rest 是包含從第三項開始的其余數(shù)組項的數(shù)組
alert(rest[0]); // Consul
alert(rest[1]); // of the Roman Republic
alert(rest.length); // 2

let [name1, name2, ...titles] = ["Julius", "Caesar", "Consul", "of the Roman Republic"];
// 現(xiàn)在 titles = ["Consul", "of the Roman Republic"]

let [firstName, surname] = [];

alert(firstName); // undefined
alert(surname); // undefined

// 默認(rèn)值
let [name = "Guest", surname = "Anonymous"] = ["Julius"];

alert(name);    // Julius（來自數(shù)組的值）
alert(surname); // Anonymous（默認(rèn)值被使用了）

// 只會提示輸入姓氏
let [name = prompt('name?'), surname = prompt('surname?')] = ["Julius"];

alert(name);    // Julius（來自數(shù)組）
alert(surname); // 你輸入的值

let {var1, var2} = {var1:…, var2:…}

let options = {
  title: "Menu",
  width: 100,
  height: 200
};

let {title, width, height} = options;

alert(title);  // Menu
alert(width);  // 100
alert(height); // 200

// 改變 let {...} 中元素的順序
let {height, width, title} = { title: "Menu", height: 200, width: 100 }

let options = {
  title: "Menu",
  width: 100,
  height: 200
};

// { sourceProperty: targetVariable }
let {width: w, height: h, title} = options;

// width -> w
// height -> h
// title -> title

alert(title);  // Menu
alert(w);      // 100
alert(h);      // 200

let options = {
  title: "Menu"
};

let {width = 100, height = 200, title} = options;

alert(title);  // Menu
alert(width);  // 100
alert(height); // 200

let options = {
  title: "Menu"
};

let {width = prompt("width?"), title = prompt("title?")} = options;

alert(title);  // Menu
alert(width);  // (prompt 的返回值)

let options = {
  title: "Menu"
};

let {width: w = 100, height: h = 200, title} = options;

alert(title);  // Menu
alert(w);      // 100
alert(h);      // 200

let options = {
  title: "Menu",
  width: 100,
  height: 200
};

// 僅提取 title 作為變量
let { title } = options;

alert(title); // Menu

let options = {
  title: "Menu",
  height: 200,
  width: 100
};

// title = 名為 title 的屬性
// rest = 存有剩余屬性的對象
let {title, ...rest} = options;

// 現(xiàn)在 title="Menu", rest={height: 200, width: 100}
alert(rest.height);  // 200
alert(rest.width);   // 100

let options = {
  title: "Menu",
  height: 200,
  width: 100
};

// title = 名為 title 的屬性
// rest = 存有剩余屬性的對象
let {title, ...rest} = options;

// 現(xiàn)在 title="Menu", rest={height: 200, width: 100}
alert(rest.height);  // 200
alert(rest.width);   // 100

let title, width, height;

// 這一行發(fā)生了錯誤
{title, width, height} = {title: "Menu", width: 200, height: 100};

{
  // 一個代碼塊
  let message = "Hello";
  // ...
  alert( message );
}

let title, width, height;

// 現(xiàn)在就可以了
({title, width, height} = {title: "Menu", width: 200, height: 100});

alert( title ); // Menu

let options = {
  size: {
    width: 100,
    height: 200
  },
  items: ["Cake", "Donut"],
  extra: true
};

// 為了清晰起見，解構(gòu)賦值語句被寫成多行的形式
let {
  size: { // 把 size 賦值到這里
    width,
    height
  },
  items: [item1, item2], // 把 items 賦值到這里
  title = "Menu" // 在對象中不存在（使用默認(rèn)值）
} = options;

alert(title);  // Menu
alert(width);  // 100
alert(height); // 200
alert(item1);  // Cake
alert(item2);  // Donut

function showMenu(title = "Untitled", width = 200, height = 100, items = []) {
  // ...
}

// 在采用默認(rèn)值就可以的位置設(shè)置 undefined
showMenu("My Menu", undefined, undefined, ["Item1", "Item2"])

// 我們傳遞一個對象給函數(shù)
let options = {
  title: "My menu",
  items: ["Item1", "Item2"]
};

// ……然后函數(shù)馬上把對象展開成變量
function showMenu({title = "Untitled", width = 200, height = 100, items = []}) {
  // title, items – 提取于 options，
  // width, height – 使用默認(rèn)值
  alert( `${title} ${width} ${height}` ); // My Menu 200 100
  alert( items ); // Item1, Item2
}

showMenu(options);

let options = {
  title: "My menu",
  items: ["Item1", "Item2"]
};

function showMenu({
  title = "Untitled",
  width: w = 100,  // width goes to w
  height: h = 200, // height goes to h
  items: [item1, item2] // items first element goes to item1, second to item2
}) {
  alert( `${title} ${w} ${h}` ); // My Menu 100 200
  alert( item1 ); // Item1
  alert( item2 ); // Item2
}

showMenu(options);

function({
  incomingProperty: varName = defaultValue
  ...
})

showMenu({}); // 不錯，所有值都取默認(rèn)值

showMenu(); // 這樣會導(dǎo)致錯誤

function showMenu({ title = "Menu", width = 100, height = 200 } = {}) {
  alert( `${title} ${width} ${height}` );
}

showMenu(); // Menu 100 200

let {prop : varName = default, ...rest} = object

let [item1 = default, item2, ...rest] = array