返回

伴着ES2018，唤醒灵动的编码时光

前端

曾几何时，年少的我捧着阮一峰老师的《ES6 标准入门》，惊叹 JS 变迁之迅速，唯恐跟不上。然而，数载 ES6 的编写经历，让我深切意识到：切莫为了学 ES X 而学 ES X，无论是 ES 几，它们其实都是语法糖，扮演辅助角色，重中之重在于领会它们为我们的开发带来何种裨益，而非混淆重点。

ES2018，JavaScript 新版标准，如约而至，意味着我们又多了一个提升开发效率的帮手。ES2018 囊括多项实用特性，可谓如虎添翼，让我们一探究竟。

1. 箭头函数（Arrow Function）

箭头函数，无疑是 ES2018 中最吸睛的特性之一。其书写简洁、易读性强，相较于传统函数，更显精悍。

例如，传统函数：

function add(a, b) {
  return a + b;
}

使用箭头函数改写后：

const add = (a, b) => a + b;

箭头函数还有一个妙处，当函数体仅包含一行代码时，可以省略 return ，例如：

const square = x => x * x;

2. 扩展运算符（Spread Operator）

扩展运算符，顾名思义，可以将一个数组或对象“展开”成独立元素。它有以下妙用：

  • 合并数组或对象：
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const mergedArr = [...arr1, ...arr2]; // [1, 2, 3, 4, 5, 6]

const obj1 = { name: 'John', age: 25 };
const obj2 = { job: 'Software Engineer', salary: 100000 };
const mergedObj = { ...obj1, ...obj2 }; // { name: 'John', age: 25, job: 'Software Engineer', salary: 100000 }
  • 函数参数传递：
function sum(...numbers) {
  return numbers.reduce((a, b) => a + b, 0);
}

console.log(sum(1, 2, 3, 4, 5)); // 15

3. Promise.finally()

Promise.finally() 方法，在 Promise 无论是 resolve 还是 reject，都会执行的回调函数。不管 Promise 结果如何，它总会被调用。

const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('Success!');
  }, 2000);
});

promise
  .then(result => console.log(result)) // Success!
  .catch(error => console.log(error))
  .finally(() => console.log('Promise is complete.')); // Promise is complete.

4. 正则表达式命名捕获组（Named Capture Groups）

正则表达式命名捕获组，允许给正则表达式中的捕获组起个名字，从而在之后引用这些捕获组。

const regex = /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/;
const result = regex.exec('2023-04-20');

console.log(result.groups.year); // 2023
console.log(result.groups.month); // 04
console.log(result.groups.day); // 20

5. async/await

async/await 语法，可以让你编写异步代码，就像写同步代码一样。它显著提高了异步代码的可读性和可维护性。

async function fetchUserData() {
  const response = await fetch('https://example.com/user-data');
  const data = await response.json();

  return data;
}

fetchUserData().then(data => console.log(data));

ES2018，赋予我们更加丰富且灵活的开发方式，让我们能够在纷繁复杂的编码世界中，游刃有余。但请铭记，ES X 只是锦上添花，理解其精髓方能拨开云雾见月明。