JavaScript 是一门非常活跃的编程语言，每年都会有新的版本发布，以满足开发者对更好的语言特性和更高效的编程方式的需求。从 ES10 到 ES11，JavaScript 引入了许多新特性，本文将介绍这些特性，并讨论它们对前端开发的影响。
1. 可选链操作符
在 JavaScript 中，当你访问一个对象的属性时，如果该属性不存在，将会返回 undefined。为了避免这种情况，我们通常需要写一些判断语句来检查属性是否存在。在 ES11 中，引入了可选链操作符 ?.，可以方便地检查属性是否存在，如下所示：
// javascriptcn.com 代码示例
const person = {
name: 'Tom',
address: {
city: 'Shanghai',
street: 'Nanjin Road'
}
}
console.log(person.address?.city) // 'Shanghai'
console.log(person.address?.zipCode) // undefined可选链操作符 ?. 会在访问属性之前检查该属性是否存在，如果属性不存在，将返回 undefined，而不是抛出错误。这使得代码更加简洁和易于维护。
2. 空值合并操作符
在 JavaScript 中，我们经常需要检查一个变量是否为 null 或 undefined，并给它一个默认值。在 ES11 中，引入了空值合并操作符 ??，可以方便地实现这一功能，如下所示：
const name = null ?? 'Tom' const age = undefined ?? 18 console.log(name) // 'Tom' console.log(age) // 18
空值合并操作符 ?? 会在左侧的变量为 null 或 undefined 时，返回右侧的默认值。这使得代码更加简洁和易于理解。
3. String.prototype.replaceAll 方法
在 JavaScript 中，我们经常需要将字符串中的某个子串替换为另一个子串。在 ES10 之前，我们只能使用正则表达式或 split/join 等方法来实现。在 ES11 中，引入了 String.prototype.replaceAll 方法，可以方便地替换所有匹配的子串，如下所示：
const str = 'hello world'
console.log(str.replaceAll('l', 'x')) // 'hexxo worxd'String.prototype.replaceAll 方法会将所有匹配的子串替换为指定的新子串，这使得字符串替换更加简单和高效。
4. Promise.allSettled 方法
在 JavaScript 中，我们经常需要同时处理多个 Promise，等待它们全部完成后再执行下一步操作。在 ES10 之前，我们只能使用 Promise.all 方法来实现。但是，Promise.all 方法只有在所有 Promise 都成功时才会返回结果，如果其中有一个 Promise 失败，就会抛出错误。在 ES11 中，引入了 Promise.allSettled 方法，可以同时处理多个 Promise，并返回每个 Promise 的状态，如下所示：
// javascriptcn.com 代码示例
const p1 = Promise.resolve(1)
const p2 = Promise.reject(new Error('fail'))
const p3 = Promise.resolve(3)
Promise.allSettled([p1, p2, p3]).then(results => {
console.log(results)
})
// [
// { status: 'fulfilled', value: 1 },
// { status: 'rejected', reason: Error: fail },
// { status: 'fulfilled', value: 3 }
// ]Promise.allSettled 方法会等待所有 Promise 完成，无论成功还是失败，都会返回一个结果数组，数组中的每个元素包含 Promise 的状态和结果。这使得 Promise 的处理更加灵活和易于维护。
5. 总结
ES11 引入的这些新特性，使得 JavaScript 更加强大和高效。可选链操作符和空值合并操作符可以减少代码量和错误，String.prototype.replaceAll 方法可以简化字符串替换操作，Promise.allSettled 方法可以更好地处理 Promise。这些特性不仅提高了开发效率，同时也使得代码更加简洁和易于理解。开发者可以根据自己的需求选择使用这些新特性，以提高自己的编程水平和工作效率。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6556f676d2f5e1655d153ddb