解锁ES6，轻松掌握JS新特性

2023-09-06 06:49:50

前言

阮一峰老师的ES6教程入门是很多程序员学习ES6的必经之路。但我发现，实际运用太少，面试官一问深，就容易懵圈。因此，本文将结合我亲身经历的高频面试题，帮助大家深入理解ES6的几个核心特性。希望能够对你有所帮助！

ES6 的核心特性

ES6 是 JavaScript 语言的最新版本，它引入了许多新特性，包括箭头函数、Promise、Generator、async等。这些特性极大地改进了 JavaScript 的语法和功能，使开发人员能够编写更简洁、更易维护的代码。

箭头函数

箭头函数是 ES6 中引入的一种新的函数语法。它使用 => 箭头运算符，可以简化函数的定义和调用。箭头函数没有自己的this，并且不能用作构造函数。

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

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

console.log(add(1, 2)); // 3

Promise

Promise 是 ES6 中引入的一种新的异步编程机制。它可以使开发人员编写更易于理解和维护的异步代码。Promise 对象表示一个异步操作的结果，它可以处于三种状态之一：pending、fulfilled 或 rejected。

const promise = new Promise((resolve, reject) => {
  // 异步操作
  setTimeout(() => {
    resolve("成功了！");
  }, 1000);
});

promise.then((result) => {
  console.log(result); // 成功了！
}).catch((error) => {
  console.log(error);
});

Generator

Generator 是 ES6 中引入的一种新的函数类型。它可以生成一系列的值，并可以暂停和恢复执行。Generator 函数使用 yield 关键字来暂停执行，并在下次调用时从 yield 处继续执行。

function* fibonacci() {
  let [prev, curr] = [0, 1];
  while (true) {
    yield curr;
    [prev, curr] = [curr, prev + curr];
  }
}

const generator = fibonacci();

console.log(generator.next().value); // 1
console.log(generator.next().value); // 1
console.log(generator.next().value); // 2
console.log(generator.next().value); // 3

async

async 是 ES6 中引入的一个新的关键字。它可以使开发人员编写异步代码，而无需使用回调函数或 Promise。async 函数返回一个 Promise 对象，并且可以在函数体内使用 await 关键字来暂停执行，直到 Promise 对象被 resolved。

async function fetchUserData(userId) {
  const response = await fetch(`https://example.com/users/${userId}`);
  const data = await response.json();
  return data;
}

fetchUserData(1).then((data) => {
  console.log(data);
});