随着前端技术的快速发展，JavaScript 逐渐成为了前端开发的核心语言。而在 JavaScript 的发展历程中，ES6 及其之后的标准版本，尤其是 ES12，给 JavaScript 带来了许多新的特性和语法，使得 JavaScript 变得更加强大和灵活。在本文中，我们将从零开始学习 ES12 标准下的 JavaScript 开发，包括新的特性和语法，以及如何在实际项目中应用它们。
新的特性和语法
可选链操作符
在 JavaScript 中，当我们需要访问一个对象的属性时，通常需要使用点操作符来访问，比如 obj.prop。但是如果这个对象的某个属性不存在，那么访问就会出错。ES12 引入了可选链操作符 ?.，它可以在访问对象的属性时，判断该属性是否存在，如果存在则返回属性值，否则返回 undefined，而不会抛出异常。例如：
const obj = { a: { b: { c: 1 } } };
console.log(obj?.a?.b?.c); // 1
console.log(obj?.x?.y?.z); // undefined空值合并操作符
在 JavaScript 中，当我们需要获取一个变量的值时，通常需要使用三元运算符来判断该变量是否有值，如果没有值则返回默认值，比如 a ? a : b。ES12 引入了空值合并操作符 ??，它可以在获取变量值时，判断该变量是否有值，如果没有值则返回默认值，否则返回该变量的值。例如：
const a = null; const b = 1; console.log(a ?? b); // 1 console.log(c ?? 'default'); // 'default'
Promise.allSettled()
在 JavaScript 中，我们通常使用 Promise 对象来处理异步操作。ES12 引入了 Promise.allSettled() 方法，它可以接收一个 Promise 数组作为参数，并返回一个新的 Promise 对象，该 Promise 对象在所有 Promise 对象都完成后才会被 resolved，返回的结果是一个数组，其中每个元素表示对应的 Promise 对象的状态和值。例如：
-- -------------------- ---- -------
----- -- - -------------------
----- -- - ------------------------
----- -- - ---------------------------
----------------------- --- ------------- -- -
-----------------
--
-
-------- ------------ ------ ---
-------- ----------- ------- ---------
-------- ------------ ------ ----------
-
--
---String.prototype.replaceAll()
在 JavaScript 中，我们通常使用 replace() 方法来替换字符串中的某个子字符串。但是该方法只会替换第一个匹配到的子字符串，如果需要替换所有匹配到的子字符串，则需要使用正则表达式。ES12 引入了 replaceAll() 方法，它可以一次性替换所有匹配到的子字符串。例如：
const str = 'hello world';
console.log(str.replace('l', 'L')); // 'heLlo world'
console.log(str.replaceAll('l', 'L')); // 'heLLo worLd'实际项目中的应用
使用可选链操作符避免访问不存在的对象属性时出错
在实际项目中，我们经常会遇到需要访问嵌套对象属性的情况。如果使用点操作符访问不存在的属性，就会出现 TypeError 异常，导致代码出错。使用可选链操作符可以避免这种情况的发生，使代码更加健壮和可靠。例如：
-- -------------------- ---- -------
----- ---- - -
----- -
----- --------
---- --
-
--
----- -------- - ----------------- -- -------
----- ---------- - ------------------- -- ---------使用空值合并操作符设置默认值
在实际项目中，我们经常会遇到需要设置默认值的情况。使用空值合并操作符可以使代码更加简洁和可读。例如：
const userName = getUser()?.name ?? 'default'; // 如果 getUser() 返回的对象没有 name 属性，则返回 'default'
使用 Promise.allSettled() 处理多个异步操作
在实际项目中，我们经常会遇到需要同时进行多个异步操作的情况。使用 Promise.all() 方法可以等待所有异步操作完成后再进行下一步处理，但是如果其中一个异步操作出现错误，就会导致整个 Promise 对象被 reject，从而无法获取其他异步操作的结果。使用 Promise.allSettled() 方法可以避免这种情况的发生，使代码更加健壮和可靠。例如：
-- -------------------- ---- -------
----- -- - --------------------
----- -- - --------------------
----- -- - --------------------
----------------------- --- ------------- -- -
----- ----------- - ---
----- --------- - ---
---------------- -- -
-- ------------ --- ------------ -
-----------------------------
- ---- -
----------------------------
-
---
--------------------------- -------------
------------------------- -----------
---总结
ES12 标准下的 JavaScript 开发为前端开发带来了许多新的特性和语法，使得 JavaScript 变得更加强大和灵活。在实际项目中，我们可以使用这些新特性和语法来提高代码的健壮性和可读性，从而更加高效地完成开发任务。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65fd39d4d10417a22288f116