箭頭函數

箭頭函數是更簡潔的函數定義方式，並且它們不會綁定自己的this，而是繼承外層上下文的this。之前在函數的部分介紹過了，有興趣的可以去看第八天的函數(上)，簡單介紹個例子:

// 傳統函數
const obj = {
    count: 0,
    increment: function() {
        setTimeout(function() {
            this.count++;
            console.log(this.count); // undefined, 因為此處的 `this` 指向 setTimeout 的上下文
        }, 1000);
    }
};

// 箭頭函數
const obj2 = {
    count: 0,
    increment: function() {
        setTimeout(() => {
            this.count++;
            console.log(this.count); // 正確輸出 1，因為箭頭函數的 `this` 指向 obj2
        }, 1000);
    }
};

obj2.increment();

模板字面量

模板字面量（Template Literals）提供了一種更靈活、直觀的方式來創建字符串。與傳統的字符串拼接相比，它不僅支持多行字符串，還允許在字符串中嵌入表達式，並且使用更簡單的語法。

語法：

使用反引號（‵）來定義模板字面量。

let str = `這是模板字面量的字符串`;

使用${}嵌入變量或表達式，在 ${}中可以放入任何有效的 JavaScript 表達式：。

let name = 'Alice';
let age = 25;
let message = `我的名字是 ${name}，我今年 ${age} 歲。`;
console.log(message); // 我的名字是 Alice，我今年 25 歲。

let a = 10;
let b = 20;
let sum = `10 + 20 的和是：${a + b}`;
console.log(sum); // 10 + 20 的和是：30

多行字符串：

在傳統的JavaScript中，如果要創建多行字符串，需要使用\n來手動換行，或者每行都寫一對引號來拼接。而使用模板字面量，可以直接在字符串中換行。

let poem = `這是第一行
這是第二行
這是第三行`;
console.log(poem);

// 這是第一行
// 這是第二行
// 這是第三行

帶有表達式的多行字符串：

可以將變量或表達式與多行字符串結合，進行動態創建：

let product = '蘋果';
let price = 30;
let quantity = 5;

let receipt = `你購買了 ${quantity} 個 ${product}，總價為 ${price * quantity} 元。`;
console.log(receipt); 
// 你購買了 5 個 蘋果，總價為 150 元。

嵌套模板字面量：

可以在模板字面量內部進行條件操作，甚至嵌套模板字面量：

let isMember = true;
let discount = 0.1;

let message = `您購買了 ${isMember ? `會員價格：${100 * (1 - discount)}` : '普通價格：100'} 元`;
console.log(message); 
// 如果 isMember 為 true，輸出：會員價格：90 元

標籤模板字面量 (Tagged Template Literals):

模板字面量還支持標籤函數，允許將模板字面量傳入自定義的標籤函數中進行處理。標籤模板可以用於更複雜的字符串操作，比如過濾或轉換字符串內容。

function tag(strings, ...values) {
    console.log(strings);  // 靜態字符串部分
    console.log(values);   // 插值表達式部分
    return "自定義返回值";
}

let result = tag`Hello ${name}, your score is ${score}.`;

解構賦值 (Destructuring Assignment)

解構賦值允許從數組或對象中提取值,並將它們直接賦給變量。允許我們從數組或對象中提取值並賦給變量。這種語法使得處理複雜數據結構變得更加簡單和直觀。解構賦值的主要優點是它可以使代碼更加簡潔和易讀。它特別適用於處理來自API的複雜JSON數據，或者在函數中返回多個值。然而，過度使用解構，特別是深層嵌套的解構，可能會降低代碼的可讀性。

數組解構:

數組解構允許我們將數組中的元素賦值給單獨的變量。我們可以按照數組的順序來指定變量名。如果不想使用某個元素，也可以使用空白位置跳過它。我們還可以使用剩餘運算符'...'來捕獲剩餘的所有元素。

// 基本用法
const [a, b, c] = [1, 2, 3];
console.log(a, b, c); // 1 2 3

// 忽略某些值
const [x, , z] = [1, 2, 3];
console.log(x, z); // 1 3

// 使用剩餘運算符(rest operator)
const [first, ...rest] = [1, 2, 3, 4, 5];
console.log(first, rest); // 1 [2, 3, 4, 5]

// 設置默認值
const [p = 5, q = 7] = [1];
console.log(p, q); // 1 7

對象解構:

對象解構讓我們能夠基於屬性名來提取值。我們可以使用與對象屬性相同的名稱作為變量名，也可以為這些變量指定新的名稱。如果對象中不存在某個屬性，我們可以為變量設置默認值。

// 基本用法
const {name, age} = {name: "Alice", age: 30};
console.log(name, age); // Alice 30

// 給變量重命名
const {name: userName, age: userAge} = {name: "Bob", age: 25};
console.log(userName, userAge); // Bob 25

// 嵌套對象解構
const {
  info: {x, y}
} = {info: {x: 10, y: 20}};
console.log(x, y); // 10 20

// 設置默認值
const {name = "Anonymous", age = 18} = {name: "Charlie"};
console.log(name, age); // Charlie 18

函數參數中的解構:

我們可以在函數定義中使用解構語法。這對於處理包含多個屬性的對象參數特別有用,可以直接在參數列表中提取所需的值。

// 對象參數解構
function printPerson({name, age}) {
  console.log(`${name} is ${age} years old.`);
}
printPerson({name: "David", age: 35}); // David is 35 years old.

// 數組參數解構
function printCoords([x, y]) {
  console.log(`X: ${x}, Y: ${y}`);
}
printCoords([10, 20]); // X: 10, Y: 20

擴展運算符

擴展運算符'...'允許將數組或對象的元素/屬性展開，這在複製數組/對象或將多個數組/對象合併時非常有用。
簡單例子:

let arr1 = [1, 2, 3];
let arr2 = [...arr1, 4, 5];
console.log(arr2);  // [1, 2, 3, 4, 5]

// 數組複製
let copyArr = [...arr1];
console.log(copyArr);  // [1, 2, 3]

let obj1 = { a: 1, b: 2 };
let obj2 = { ...obj1, c: 3 };
console.log(obj2);  // { a: 1, b: 2, c: 3 }

// 對象複製
let copyObj = { ...obj1 };
console.log(copyObj);  // { a: 1, b: 2 }

他有兩個特點:
1.數組/對象合併：可以輕鬆合併多個數組或對象。
2.淺拷貝：擴展運算符進行的是淺拷貝，僅複製第一層數據，內部的引用類型數據不會被深度複製。

// 合併數組
let arr1 = [1, 2];
let arr2 = [3, 4];
let mergedArr = [...arr1, ...arr2];
console.log(mergedArr);  // [1, 2, 3, 4]

// 合併對象
let obj1 = { a: 1 };
let obj2 = { b: 2 };
let mergedObj = { ...obj1, ...obj2 };
console.log(mergedObj);  // { a: 1, b: 2 }