我的 React 之旅：第 10 天

ES6 功能

我今天學到了什麼

現代 JavaScript（ES6 及更高版本）引入的功能使該語言更加強大、可讀且對開發人員友好。總結如下：

1. 範本文字

• 它的作用：啟用字串插值和多行字串。

• 範例：
  

let year = 2024;
console.log(`This is year ${year}`);

• 優點：與傳統連接相比，更容易閱讀和管理字串。

1. 箭頭函數

• 它的作用：為編寫函數提供更短的語法。

• 範例：
  

let add = (a, b) => console.log(`${a} + ${b} = ${a + b}`);
add(4, 5); // Output: 4 + 5 = 9

• 優點：簡化程式碼，尤其是內聯函數。

1. 預設參數

• 它的作用：如果沒有傳遞參數，則為函數參數指派預設值。

• 範例：
  

function callMe(name = "Damilare") {
    console.log(`My name is ${name}`);
}
callMe(); // Output: My name is Damilare
callMe("Ayoola"); // Output: My name is Ayoola

• 好處：防止因缺少參數而導致的錯誤。

1. 解構

• 它的作用：從陣列或物件中提取值並將它們分配給變數。 範例：

//Array Destructuring:
const [a, b] = [2, 3];
console.log(a, b); // Output: 2 3

//Object Destructuring:
const { age, year } = { age: 32, year: "Year 5" };
console.log(age, year); // Output: 32 Year 5

• 好處：使程式碼更簡潔，減少對物件屬性或陣列元素的重複存取。

1. 展開與休息運算子 (...)

• Spread：將陣列或物件的元素擴展為單獨的元素。

const arr1 = [0, 1, 2];
const arr2 = [...arr1, 3, 4, 5];
console.log(arr2); // Output: [0, 1, 2, 3, 4, 5]

• 剩餘：將剩餘元素收集到單一陣列或物件中。

const collectRest = (first, ...rest) => {
    console.log(`First number is ${first}`);
    console.log(`The rest of the numbers: ${rest}`);
};
collectRest(1, 2, 3, 4); 
// Output:
// First number is 1
// The rest of the numbers: [2, 3, 4]

1. for...of 循環

• 它的作用：簡化可迭代物件（如陣列）的循環。

• 範例：
  

let arr = [1, 2, 3, 4, 5];
for (let num of arr) {
    console.log(num);
}
// Output:
// 1
// 2
// 3
// 4
// 5

• 優點：避免手動存取陣列索引並提高可讀性。

以上是我的 React 之旅：第 10 天的詳細內容。更多資訊請關注PHP中文網其他相關文章！