跳至主要内容

2 篇文章 含有標籤「ES2018」

檢視所有標籤

`Promise.prototype.finally`

· 閱讀時間約 2 分鐘
Mathias Bynens ([@mathias](https://twitter.com/mathias))

Promise.prototype.finally 讓您可以註冊一個回調函數，在 Promise 處於 處理完成 （即已解決或已拒絕）時被調用。

假設您想要獲取一些資料來顯示在頁面上。此外，您還希望在請求開始時顯示載入的旋轉圖標，而在請求完成時隱藏它。如果出現問題，則改為顯示錯誤訊息。

const fetchAndDisplay = ({ url, element }) => {
  showLoadingSpinner();
  fetch(url)
    .then((response) => response.text())
    .then((text) => {
      element.textContent = text;
      hideLoadingSpinner();
    })
    .catch((error) => {
      element.textContent = error.message;
      hideLoadingSpinner();
    });
};

物件的剩餘與展開特性

· 閱讀時間約 2 分鐘
Mathias Bynens ([@mathias](https://twitter.com/mathias))

在討論 物件的剩餘與展開特性 之前，我們先回顧一下非常相似的一個功能。

ES2015 陣列的剩餘與展開元素​

早在 ECMAScript 2015 引入了用於陣列解構賦值的 剩餘元素 和用於陣列字面值的 展開元素。

// 陣列解構賦值中的剩餘元素：
const primes = [2, 3, 5, 7, 11];
const [first, second, ...rest] = primes;
console.log(first); // 2
console.log(second); // 3
console.log(rest); // [5, 7, 11]

// 陣列字面值中的展開元素：
const primesCopy = [first, second, ...rest];
console.log(primesCopy); // [2, 3, 5, 7, 11]

ES2018: 物件的剩餘與展開特性 🆕​

那麼有什麼新東西呢？一個提案使得物件字面值也可以使用剩餘與展開特性。

// 物件解構賦值中的剩餘特性：
const person = {
    firstName: 'Sebastian',
    lastName: 'Markbåge',
    country: 'USA',
    state: 'CA',
};
const { firstName, lastName, ...rest } = person;
console.log(firstName); // Sebastian
console.log(lastName); // Markbåge
console.log(rest); // { country: 'USA', state: 'CA' }