ECMAScript 2018 是 JavaScript 语言的最新版本，引入了一些有用的新特性和增强，让开发人员能够更加高效和舒适地编写代码。在本文中，我们将介绍 10 个好用的 ECMAScript 2018 的技巧和小工具，这些技巧和工具可以提高你的开发效率，让你的代码更加优雅和易于维护。
1. 对象解构
对象解构是 ECMAScript 2018 新增的一个语法特性，它可以让你更轻松地从对象中获取数据，并将其赋值给变量。
const obj = {name: 'Alice', age: 18}; const {name, age} = obj; console.log(name, age); // 'Alice', 18
这个例子中，我们从 obj 对象中获取 name 和 age 属性，并通过对象解构将其赋值给了 name 和 age 变量。这使得我们能够在不编写冗长的代码的情况下轻松获取所需的数据。
2. 模块化
ECMAScript 2018 引入了一种新的模块化语法，可以让我们更轻松地将代码模块化，从而提高代码的可维护性和可重用性。
// math.js export const add = (a, b) => a + b; export const subtract = (a, b) => a - b; // main.js import {add, subtract} from './math'; console.log(add(2, 3)); // 5 console.log(subtract(5, 1)); // 4
在这里，我们将 math.js 的 add 和 subtract 函数导出为模块，然后在 main.js 中使用 import 语句导入这些函数，从而能够在 main.js 中使用这些函数。通过使用 ECMAScript 2018 的模块化语法，我们可以更轻松地管理和组织我们的代码，从而能够更方便地开发和维护我们的应用程序。
3. Promise.finally
Promise.finally 是 ECMAScript 2018 中新增的一个 Promise 方法，它使得我们能够指定一个在 Promise 结束之后总是会被调用的回调函数，无论是成功还是失败。
-- -------------------- ---- ------- ----- ------- - --- ----------------- ------- -- - ---------- --- ------- -------- -- - ----------------------- -- --------- -- - --------------------- -- ----------- -- - -------------------- ---展开代码
在这个例子中，我们创建了一个 Promise，并在 finally 中打印了一条消息。无论 Promise 是成功还是失败，finally 方法中的代码都会被执行。这个方法可以使得我们更加方便地写出不管成功还是失败都需要执行的代码，而无需在 then 和 catch 方法中分别写处理代码。
4. 字符串填充
ECMAScript 2018 引入了一些新的字符串填充方法，使得我们能够更方便地创建规范化的字符串。
const str1 = '123'; const str2 = str1.padStart(5, '0'); const str3 = str1.padEnd(5, '0'); console.log(str2); // '00123' console.log(str3); // '12300'
在这个例子中，我们使用 padStart 方法在字符串前添加了 0，使用 padEnd 方法在字符串后添加了 0。这种方法可以使得我们更加方便地创建规范化的字符串，而不需要手动编写复杂的代码。
5. Async/Await
Async/Await 是 ECMAScript 2018 的一个重要特性，使得我们能够更方便地处理异步操作，并使代码更加易于维护。
async function getData() { const response = await fetch('https://jsonplaceholder.typicode.com/todos/1'); const data = await response.json(); console.log(data); } getData(); // {"userId":1,"id":1,"title":"delectus aut autem","completed":false}
在上述例子中，我们使用 Async/Await 处理异步操作，其中 fetch 和 response.json() 两个异步操作的返回值使用 await 关键字来处理，从而确保在这些操作完成之前，执行代码的进程将阻塞在此处。
6. Class 成员字段
ECMAScript 2018 引入了一种新的语法，使得我们能够在类中直接定义成员字段。
-- -------------------- ---- ------- ----- ------ - ---- - -------- --- - --- ---------- - ------------------- -- ---- -- ------------- --- ----------- ----- ------ - - ----- - - --- --------- ------------- -- ------- -- ---- -- ------ --- -- ----- ----展开代码
在这个例子中，我们使用 class 关键字定义了一个 Person 类，并在类中直接定义了 name 和 age 字段，从而避免了手动定义这些字段的繁琐操作。
7. 扩展运算符
扩展运算符是 ECMAScript 2018 中的一个新的运算符，它可以将一个数组或一个对象展开成一系列的值，从而方便地进行赋值或函数参数传递。
const arr1 = [1, 2, 3]; const arr2 = [4, 5, 6]; const arr3 = [...arr1, ...arr2]; console.log(arr3); // [1, 2, 3, 4, 5, 6]
在这个例子中，我们使用了扩展运算符 ... 将两个数组展开成一系列的值，并使用 [] 操作符将它们赋值给一个新的数组 arr3。这种方法可以使得我们更加方便地组合和合并数组、对象等数据结构。
8. 函数参数列表和调用语法的增强
ECMAScript 2018 引入了一些对函数参数列表和调用语法的增强，使得我们能够更加灵活地定义和调用函数。
function test(a, b, {c = 0, d = 0} = {}) { console.log(a, b, c, d); } test(1, 2, {c: 3}); // 1, 2, 3, 0 test(1, 2); // 1, 2, 0, 0
在这个例子中，我们定义了一个 test 函数，其中第三个参数是一个具有默认值的对象。当我们调用这个函数时，如果不提供第三个参数，那么默认对象为空对象 {}，如果传递第三个参数，则使用传递的对象来更新默认对象。这种方式可以使得我们更加方便地定义和调用函数。
9. 正则表达式的增强
ECMAScript 2018 引入了一些对正则表达式的增强，包括命名捕获组、正则表达式命名属性和 s 环境符号。
const str = '2020-08-25'; const re = /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/; const result = str.match(re)?.groups; console.log(result); // {year: '2020', month: '08', day: '25'}
在这个例子中，我们使用命名捕获组在正则表达式中捕获了年、月、日三个组，并使用 ?. 操作符安全地访问了 match 方法的返回值。
10. 动态导入
ECMAScript 2018 引入了动态导入语法，它使得我们能够动态地导入模块，在开发模块化应用程序时非常有用。
async function getData() { const module = await import('./math.js'); console.log(module.add(2, 3)); // 5 } getData();
在这个例子中，我们使用 import 方法动态导入了 math.js 模块，并将其赋值给 module 变量。通过使用动态导入语法，我们可以在应用程序运行时动态地加载、卸载和执行模块，从而使得应用程序更加灵活和高效。
结语
ECMAScript 2018 引入了一些非常有用的新特性和增强，使得 JavaScript 开发变得更加简单、高效且易于维护。在本文中，我们介绍了 10 个相对常用的 ECMAScript 2018 技巧和小工具，这些技巧和工具可以提高你的开发效率，让你的代码更加优雅和易于维护。如果你是一名前端工程师，那么一定要善于利用 ECMAScript 2018 中的这些特性和功能，从而构建更加出色的应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d79c24a941bf7134da0263
