React是奠基於JavaScript的前端框架，因此在開始學習之前，必須要有一些JavaScript的基礎認識，否則在學習上容易卡關。因此，今天我們來認識一下，在React中常用的Js基本觀念。

本日介紹內容

• 樣板字面值(Template literals)
• 箭頭函式
• 物件解構
• 陣列解構

明日介紹內容

• 展開運算子
• 其餘運算子
• 陣列操作方法
  • map
  • filter
  • forEach
• ES6 - 使用module分檔 (import & export)

一、樣板字面值(Template literals)

樣板字面值（Template Literals）是 ES6 中引入的一種新的字串語法，提供了更靈活的字串操作方式。它可以讓我們在字串中嵌入表達式、多行字串，以及進行字串插值等操作。

樣板字面值使用反引號（``）來定義，而不是傳統的單引號 (') 或雙引號 (")，這樣可以在字串中直接嵌入變數或表達式。 在需要帶入變數或表達式的地方使用 ${} 帶入即可。

const name = 'Alice';
const greeting = `Hello, ${name}!`;
console.log(greeting); // 輸出: Hello, Alice!

const myPhone = 'iponeX'
const phonePrice = 3000

console.log(`${name} mobile is ${myPhone}, price is ${phonePrice * 0.7}  now. `)
// Alice mobile is iponeX , price is 2100 now.

樣板字面值帶入HTML

假設要動態生成一段 HTML，可以使用樣板字面值來插入變數和表達式。

const title = '這是標題';
const content = '這是內容';

const htmlTitle= `
  <div>
    <h1>${title}</h1>
    <p>${content}</p>
  </div>
`;

document.body.innerHTML = htmlTitle

樣板字面值帶來的好處有：

• 更易讀的字串插值：相比於使用字串拼接，樣板字面值讓我們可以更直觀地在字串中嵌入變數或表達式。
• 多行字串支持：樣板字面值提供了簡單的多行字串定義方式，無需使用額外的換行符號。

它使得 JavaScript 中的字串處理更靈活、更簡潔。通過使用這些功能，可以更高效地生成和操作字串。

二、箭頭函式（Arrow Function）

是 JavaScript ES6 中引入的一種更簡潔的函式定義方式。

它的語法簡單直觀，提高程式碼閱讀性。

箭頭函式的基本語法如下：

// 一般函式表達式
const add = function(a, b) {
  return a + b;
};

// 使用箭頭函式
const add = (a, b) => {
  return a + b;
};

// 如果只有一個參數，可以省略小括號
const square = x => {
  return x * x;
};

// 如果函式只有一個表達式，可以省略大括號和 `return`
const add = (a, b) => a + b;

// 沒有參數時，需要使用小括號來表示參數
const greet = () => 'Hello!';

瞭解上述箭頭函式的基本語法後，我們來看下方一般函式和箭頭函式的比較範例：

const numbers = [1, 2, 3, 4, 5];

//這段函式會輸出[2, 4, 6, 8, 10]這個陣列
const doubled = numbers.map(function(number) {
  return number * 2;
});

//改為箭頭函式
const doubled1 = numbers.map((number) => {return number * 2}); 

//只有一個參數(number)，可以省略括號
const doubled2 = numbers.map(number => { return number * 2});  

//只有一個表達式，可以省略大括號和 `return`
const doubled3 = numbers.map(number => number * 2);  

console.log(doubled1); // [2, 4, 6, 8, 10]

箭頭函式是 JavaScript 中一個強大且簡潔的語法工具，它在簡化函式定義的同時，也帶來了一些特殊的行為(如:沒有自己的 this 值、沒有 arguments 物件**)**。掌握箭頭函式的使用，能夠幫助你寫出更簡潔、易讀的代碼。

三、物件解構（Object Destructuring）

物件解構是一種從物件中提取屬性值並將其賦值給變數的語法。這種語法讓你可以更簡潔地從物件中取得所需的資料，而不需要一一指定屬性名稱。

const person = { name: 'Alice', age: 25, city: 'New York' };
const { name, age, city } = person;

console.log(name);  // 輸出: 'Alice'
console.log(age);   // 輸出: 25
console.log(city);  // 輸出: 'New York'

在這個範例中，我們從 person 物件中解構出 name、age 和 city，

並將它們分別賦值給同名的變數。

別名

如果你想要使用不同的變數名稱來接收屬性值，可以使用別名語法。

const person = { name: 'Alice', age: 25 };
const { name: personName, age: personAge } = person;

console.log(personName); // 輸出: 'Alice'
console.log(personAge);  // 輸出: 25

name 被解構到變數 personName，age 被解構到變數 personAge。

預設值

在解構時，若屬性不存在，可以為變數設定預設值。

const person = { name: 'Alice' };
const { name, age } = person;

console.log(name); // 輸出: 'Alice'
console.log(age);  // 輸出: undefined

---

const { name, age = 30 } = person;

console.log(name); // 輸出: 'Alice'
console.log(age);  // 輸出: 30

由於 person 物件中沒有 age 屬性，age 變數將使用預設值 30。

進階:嵌套解構

你也可以解構嵌套物件中的屬性。

const person = {
  name: 'Alice',
  address: {
    city: 'New York',
    zipCode: '10001'
  }
};

const { name, address: { city, zipCode } } = person;

console.log(name);     // 輸出: 'Alice'
console.log(city);     // 輸出: 'New York'
console.log(zipCode);  // 輸出: '10001'

四、陣列解構（Array Destructuring）

陣列解構是一種從陣列中提取元素值並將其賦值給變數的語法。這種語法讓你可以更方便地從陣列中取得所需的元素。

const numbers = [1, 2, 3];
const [first, second, third] = numbers;

console.log(first);  // 輸出: 1
console.log(second); // 輸出: 2
console.log(third);  // 輸出: 3

在這個範例中，我們從 numbers 陣列中解構出前三個元素，並將它們分別賦值給變數 first、second 和 third。

跳過元素

如果你只想要部分元素，可以跳過不需要的元素。

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

console.log(first);  // 輸出: 1
console.log(third);  // 輸出: 3

我們跳過了陣列中的第二個元素，只解構出第一個和第三個元素。

預設值

與物件解構類似，你也可以為陣列解構中的變數設定預設值。

const numbers = [1];
const [first, second = 2] = numbers;

console.log(first);  // 輸出: 1
console.log(second); // 輸出: 2

由於 numbers 陣列中沒有第二個元素，second 變數將使用預設值 2。

物件解構和陣列解構讓你可以更靈活地處理物件和陣列中的資料，從而使程式碼更加簡潔易讀。

由於篇幅的關係，今日先介紹這些常用的內容，剩下的部分，明天繼續分享~

資料參考：

• 終究都要學 React 何不現在學呢？ :: 2022 iThome 鐵人賽
• 樣板字面值 - JavaScript | MDN (mozilla.org)

後記

本文將會同步更新到我的部落格

• 黃禎平 – Medium