JavaScript 是一种动态脚本语言，广泛应用于 Web 开发中。一直以来，JavaScript 的设计者都在不断地提升它的能力，为了更好地支持开发人员编写优美高效的代码，ECMAScript 也在不断更新迭代，其中 ES8 版本（也称为 ECMAScript 2017）引入了很多新特性，这些特性能够让我们更好地进行 JavaScript 开发。因此，本文将介绍如何升级现有的 JavaScript 代码来使用 ES8 特性。
Iterator 和 Generator
ES8 引入了 Iterator 和 Generator，它们是 JavaScript 中的一种新的数据类型。它们可以很好地帮助我们进行数据遍历和生成。下面我们来举一个例子，假设我们有一个数组 [1, 2, 3]，我们想要依次输出它们的值，我们可以使用 Iterator 来实现：
const arr = [1, 2, 3]; const iterator = arr[Symbol.iterator](); console.log(iterator.next().value); // 1 console.log(iterator.next().value); // 2 console.log(iterator.next().value); // 3
在上面的代码中，我们首先获取了数组的迭代器，然后使用 next() 方法依次输出了每个值。不过，使用 Iterator 还有一种更加简便的方式——使用 for...of 循环：
const arr = [1, 2, 3];
for (const value of arr) {
console.log(value); // 1, 2, 3
}上面这段代码中，我们直接使用 for...of 循环遍历数组，这里的 value 变量其实就相当于迭代器中的 next().value。
在上面的例子中，我们只是使用了 Iterator，接下来我们来介绍一下 Generator。使用 Generator 可以更加简单地创建一个迭代器，我们只需要在函数前面添加一个星号就可以了，如下所示：
-- -------------------- ---- ------- --------- ----- - ----- -- ----- -- ----- -- - ----- -------- - ------ ----------------------------------- -- - ----------------------------------- -- - ----------------------------------- -- -
上面的代码中，我们定义了一个 gen 函数，其中使用了 yield 关键字，这样就生成了一个迭代器。使用 next() 方法依次输出了每个值。这里需要注意的是，gen() 函数返回的是一个迭代器对象，并不是返回一个数组。
Object.entries() 和 Object.values()
在 JavaScript 中，我们经常需要遍历对象的属性值，ES8 引入了 Object.entries() 和 Object.values() 方法，它们可以帮助我们更加方便地遍历对象属性值。
Object.entries() 可以将对象以二维数组的方式展开，其中第一维是属性名，第二维是属性值。我们来看看下面这个例子：
const obj = { a: 1, b: 2, c: 3 };
for (const [key, value] of Object.entries(obj)) {
console.log(key, value);
}
// a 1
// b 2
// c 3在上面的例子中，我们使用 Object.entries() 方法将对象展开成了二维数组，并使用 for...of 循环遍历了每一个属性值。
而 Object.values() 方法则是返回对象中所有属性的值组成的数组，下面是一个简单的例子：
const obj = { a: 1, b: 2, c: 3 };
const values = Object.values(obj);
console.log(values); // [1, 2, 3]async/await
async/await 是 ES8 新引入的异步编程方案，它可以让异步代码更加简单易读。我们来看一个例子，假设我们有一个异步函数 fetchData()，它返回一个 Promise：
function fetchData() {
return new Promise((resolve) => {
setTimeout(() => {
resolve('data');
}, 1000);
});
}如果我们使用 Promise 的方式来执行该函数，代码需要嵌套很多层，看起来不太直观，下面是一个例子：
fetchData().then((data) => {
console.log(data);
});使用 async/await 可以让代码更加简洁。只需要在函数前面加上 async 关键字，然后使用 await 来等待 Promise 对象的结果：
async function fetchDataAsync() {
const data = await fetchData();
console.log(data);
};只要我们在调用 fetchDataAsync() 的上一级函数中使用了 await 关键字，那么该函数内部所有 Promise 对象都会被自动地等待执行完毕。
总结
在本文中，我们介绍了 ES8 中的一些新特性，包括 Iterator 和 Generator、Object.entries() 和 Object.values()，以及 async/await。了解了这些特性之后，我们可以对现有的 JavaScript 代码进行升级，以更加方便快捷地进行开发。希望本文可以对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6465d399968c7c53b067cbb7