From JS to React - essential js for learning react

樣板字面值（Template literals／Template strings）

類似Python的fstring

1
2
3
const favoritePhone = 'iPhone';

console.log(`I want to buy the ${favoritePhone}`);

箭頭函式 (Arrow Functions)

傳統的定義方式：

1
2
3
function showIphonePrice(currentPrice) {
  return `The iPhone is ${currentPrice} now.`;
}

Arrow Function定義方式：

1
2
3
const showIphonePrice = (currentPrice) => {
  return `The iPhone is ${currentPrice} now.`;
};

如果只要回傳值不需要其他操作：

1
const showIphonePrice = currentPrice => `The iPhone is ${currentPrice} now.`;

物件屬性名稱縮寫（Shorthand property names）

當物件的屬性值是一個變數，而屬性名稱又和該變數名稱相同時可以縮寫偷懶，寫出屬性名稱即可。什麼意思呢？來看下面這個例子。

首先定義了三個變數，分別是 deviceName、currentPrice 和 storage，現在想要把這三個變數當成物件 galaxyNote 的屬性值，原本會這樣寫：

1
2
3
4
5
6
7
8
9
const deviceName = 'Galaxy Note';
const currentPrice = 30900;
const storage = '256G';

const galaxyNote = {
  deviceName: deviceName,
  currentPrice: currentPrice,
  storage: storage,
};

但由於物件的「屬性名稱」和當成屬性值的「變數名稱」相同，因此可以縮寫成這樣子：

1
2
3
4
5
6
7
8
9
const deviceName = 'Galaxy Note';
const currentPrice = 30900;
const storage = '256G';

const galaxyNote = {
  deviceName,
  currentPrice,
  storage,
};

解構賦值（Destructuring assignment）

常見的情況時，當從伺服器拿到的資料是帶有一大包內容的物件，而我們只需要用到該物件裡面的其中一些屬性，這時就很適合使用解構賦值。

舉例來說，現在從伺服器拿到一大包和商品名稱有關的資料：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// 一個帶有非常多資料的物件
const product = {
  name: 'iPhone',
  image: 'https://i.imgur.com/b3qRKiI.jpg',
  description:
    '全面創新的三相機系統，身懷萬千本領，卻簡練易用。電池續航力突飛猛進，前所未見。令你大為驚豔的晶片更加碼機器學習技術，並突破智慧型手機所能成就的極限。第一部威力強大，Pro 如其名的 iPhone，全新登場。',
  brand: {
    name: 'Apple',
  },
  aggregateRating: {
    ratingValue: '4.6',
    reviewCount: '120',
  },
  offers: {
    priceCurrency: 'TWD',
    price: '26,900',
  },
};

如果現在要建立新的變數，並在變數中代入該商品的名稱（name）和描述（description），傳統上可能會這樣做：

1
2
const name = product.name;
const description = product.description

在使用物件的解構賦值之後，可以達到快速建立變數並取值的動作：

1
const { name, description } = product;

陣列的解構賦值

陣列同樣也有解構賦值的寫法，這在 React Hooks 中經常被使用。

1
2
3
4
5
const mobileBrands = [
  'Samsung', 'Apple', 'Huawei', 'Oppo',
  'Vivo', 'Xiaomi', 'LG', 'Lenovo', 'ZTE'
];
const [best, second, third] = mobileBrands;

注意：

  • 物件的解構是用{}，陣列的解構是用[]
  • 物件的解構變數名要跟attribute相同，陣列的解構變數名可以任意取

展開語法和其餘語法（Spread Syntax/Rest Syntax）

展開語法就是 ...，這個 ...可以同樣可以使用於物件和陣列上。

1
2
3
4
const mobilePhone = {
  name: 'mobile phone',
  publishedYear: '2019',
};

如果要複製 mobilePhone這個物件變成一個新的物件（iPhone），同時添加一些屬性時，可以使用 ...展開語法：

1
2
3
4
5
6
const iPhone = {
  ...mobilePhone,
  name: 'iPhone',
  os: 'iOS',
};
console.log(iPhone);  // { name: 'iPhone', publishedYear: '2019', os: 'iOS' }

可以注意到，在原本的 mobilePhone 就已經有 name 這個屬性，後來我們又添加同樣名為 name 的屬性時，就會把原本的 nam 給覆蓋掉；而 os 這個屬性，因為在原本的 mobilePhone 中沒有這個屬性，所以就會直接被添加到新的 iPhone 這個物件內。

展開語法同樣可以用來複製陣列，並在新的陣列中添加元素，像是這樣：

1
2
3
4
const mobilesOnSale = ['Samsung', 'Apple', 'Huawei'];
const allMobiles = [...mobilesOnSale, 'Oppo', 'Vivo', 'Xiaomi'];

console.log(allMobiles); // [ 'Samsung', 'Apple', 'Huawei', 'Oppo', 'Vivo', 'Xiaomi' ]

其餘語法（rest syntax）

其餘語法和展開語法的寫法一樣，都是 ...，但是使用時機不太一樣，如果說展開語法像是「解壓縮」，那麼其餘語法就像是「壓縮」。它可以把在解構賦值中沒有被取出來的物件屬性或陣列元素都放到一個壓縮包裡。

舉例來說，在前面談到物件解構賦值的時候，從伺服器拿到一大包資料：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
const product = {
  name: 'iPhone',
  image: 'https://i.imgur.com/b3qRKiI.jpg',
  description:
    '全面創新的三相機系統，身懷萬千本領，卻簡練易用。電池續航力突飛猛進，前所未見。令你大為驚豔的晶片更加碼機器學習技術，並突破智慧型手機所能成就的極限。第一部威力強大，Pro 如其名的 iPhone，全新登場。',
  brand: {
    name: 'Apple',
  },
  aggregateRating: {
    ratingValue: '4.6',
    reviewCount: '120',
  },
  offers: {
    priceCurrency: 'TWD',
    price: '26,900',
  },
};

雖然我們取出了所需的資料，但其餘剩下沒有取出來的物件屬性仍想要取出來稍後使用，這時就可以使用其餘語法，把除了 name 和 description 剩下沒有取出來的物件屬性，都放到取名為 other 的變數中（變數名稱可以自己取），如此 other 就會是 product 物件中，扣除掉 name
 和 description 屬性後的所有其餘資料：

1
2
3
4
5
6
7
8
9
const { name, description, ...other } = product;
console.log(other);

// {
//   image: 'https://i.imgur.com/b3qRKiI.jpg',
//   brand: { name: 'Apple' },
//   aggregateRating: { ratingValue: '4.6', reviewCount: '120' },
//   offers: { priceCurrency: 'TWD', price: '26,900' }
// }

其餘語法同樣可以用在陣列中，前面我們有把銷量前三名的手機取出來，那其餘剩下沒被取出來的怎麼辦呢？這時候就可以使用「其餘語法」把剩下的陣列元素全都拿出來，像是這樣：

1
2
3
4
5
6
7
8
const mobileBrands = [
  'Samsung', 'Apple', 'Huawei', 'Oppo',
  'Vivo', 'Xiaomi', 'LG', 'Lenovo', 'ZTE'
];

// 變數名稱不一定要取名為 other
const [best, second, third, ...other] = mobileBrands;
console.log(other);   // [ 'Oppo', 'Vivo', 'Xiaomi', 'LG', 'Lenovo', 'ZTE' ]