我的 React 之旅：第 10 天-js教程-PHP中文網

我的 React 之旅：第 10 天

Patricia Arquette

發布： 2024-12-15 05:02:21

原創

211 人瀏覽過

My React Journey: Day 10

ES6 功能

我今天學到了什麼

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

範本文字

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

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

登入後複製

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

箭頭函數

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

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

登入後複製

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

預設參數

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

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

登入後複製

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

解構

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

//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

登入後複製

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

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

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]

登入後複製

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中文網其他相關文章！