跳到主要内容

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' }