优化对象操作的新特性：ES11 中的 Nullish 合并、Optional Chaining
ES11 引入了两个新特性：Nullish 合并和 Optional Chaining，这两个特性能够优化前端开发中对象操作的体验。本文将深入介绍这两个新特性，并提供详细的示例代码。
Nullish 合并
在过去，我们常常使用 || 运算符来处理对象取值的默认值。例如，我们想要取一个对象的属性值，如果这个属性值不存在，就使用一个默认值。代码可能如下所示：
const value = obj[property] || defaultValue;
这个做法看似没有问题，但是它存在一个漏洞。假设这个属性值的值为 0 或者空字符串，这个做法同样会使用默认值。这种情况可能导致潜在的错误。
ES11 中的 Nullish 合并特性可以更好地解决这个问题。与 || 运算符不同的是，在 Nullish 合并中，只有在属性值为 null 或 undefined 时，才会使用默认值。示例代码如下所示：
const value = obj[property] ?? defaultValue;
Optional Chaining
在处理嵌套对象的属性值时，我们可能需要多次检查这个属性的存在性。例如，我们要找到一个对象中嵌套的属性，代码可能如下所示：
if (obj && obj.child && obj.child.property) {
const value = obj.child.property;
}这种处理方式比较麻烦，尤其是当嵌套层数较多时。而 ES11 中的 Optional Chaining 可以让这个处理更加简单明了。示例代码如下所示：
const value = obj?.child?.property;
如果 child 或 property 不存在，value 会被赋值为 undefined。
完整示例代码
下面是一个演示了 Nullish 合并和 Optional Chaining 的完整示例代码：
// javascriptcn.com 代码示例
// 创建一个对象
const obj = { child: { property: '' } };
// 使用 Nullish 合并
const value1 = obj.child.property ?? 'default'; // 空字符串，使用 'default'
const value2 = obj.child.notExist ?? 'default'; // 属性不存在，使用 'default'
// 使用 Optional Chaining
const value3 = obj?.child?.property ?? 'default'; // 空字符串，使用 'default'
const value4 = obj?.child?.notExist ?? 'default'; // 属性不存在，使用 'default'
const value5 = obj?.notExist?.property ?? 'default' // 对象不存在，使用 'default'这个示例代码说明了 Nullish 合并和 Optional Chaining 的几个用法。需要注意的是，这两个特性还没有得到所有浏览器的支持，可以使用 Babel 等工具进行转译。在实际开发中，需要根据项目的需求灵活使用这两个特性。
总结
ES11 中的 Nullish 合并和 Optional Chaining 可以极大地方便前端开发中对象的操作。Nullish 合并可以解决使用 || 运算符带来的漏洞问题，Optional Chaining 可以简化多次检查属性的存在性的代码。在实际开发中，需要根据项目需求合理使用这两个特性。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6535d4927d4982a6ebd76a64