物件和陣列的解構賦值

MDN文件：Destructuring assignment

解構賦值(Destructuring Assignment)是 JavaScript 中的一種語法，用於從陣列或物件中提取值，並將其賦給變數。

陣列解構
解構賦值就像是鏡子一樣，將值從右邊鏡射到左邊，所以左邊的陣列基本上就是從右方一個一個對映。

const numbers = [1, 2, 3, 4, 5];
const [first, , third, ...rest] = numbers;

console.log(first, third, rest);              // 1 3 [4, 5]
[4,5]

🔔 可以跳過數組中的一些元素，或者在解構時使用剩餘參數(rest parameter)來提取剩餘的元素 -> 實戰很常用

物件解構
物件解構也是和陣列解構有著相同的概念，只不過陣列是使用順序的索引值對應，但物件則是使用物件的屬性名稱來做對應，因此沒有順序性。

const person = {
  name: "kuku",
  is_girl: true,
  city: "Taichung"
};
const { name, is_girl, city, age = 29 } = person;

console.log(name, is_girl, city, age);       // "kuku" true "Taichung" 29

🔔 在 ES6 中多一個新功能預設值，如果物件中沒有對應的屬性，變數將會使用預設值 -> 萬一有共用函數，可以避免有些訊息沒代導致異常

函式參數使用解構賦值

const user = {
  id: 666,
  displayName: "kuku",
  fullName: {
    firstName: "monica",
    lastName: "ku"
  }
};

function greet({ displayName, fullName: { firstName } }) {
  console.log(`Hello, ${displayName} (${firstName})`);
}

greet(user); // "Hello, kuku (monica)"

範本字面量和嵌入運算式

MDN文件：Template literals (Template strings)

樣板字面子(Template Literals)
樣板字面子是 ES6 中引入的一種新字串語法，它使用反引號而不是單引號('')或雙引號("")，同時也支援多行字串和內嵌表達式。

const name = "kuku";
const is_girl = true;

// 使用樣板字面子建立字串
const aboutMe = `Hello, my name is ${name}`;

// 嵌入任意 JavaScript 表達式
const gender = `i'm a ${is_girl ? "girl" : "boy"}`;

console.log(`${aboutMe} and ${gender}.`);    //"Hello, my name is kuku and i'm a girl."

多行字串
樣板字面子也支援多行字串，使得書寫多行文字更加方便：

const text = `
  我是 kuku,
  這是換行
  繼續換行...
`;

console.log(text);

標籤樣板字面子(Tagged Templates)
Tagged Templates 允許在樣板字面子使用一個函數來處理模板內容，這個函數稱為「標籤函數」。
標籤函數的作用是對模板字串及其插值進行處理，然後傳回一個字串或其他值。

🔔 Tagged Templates 函數會接收 2 個參數：
strings：這是一個數組，包含模板字面量中的字串部分。
values：這是一個數組，包含模板字面量中插值表達式的結果。

function tag(strings, ...values) {
  console.log(strings);     // ["Hello, ","! You are ","."]
  console.log(values);      // ["kuku",29]
  
  return `${strings[0]}${values[0]}${strings[1]}${values[1]}${strings[2]}`;
}

const name = "kuku";
const age = 29;
const message = tag`Hello, ${name}! You are ${age}.`;

console.log(message);      // "Hello, kuku! You are 29."