ES6-可选链和空值合并

一、可选链

可选链是一种JavaScript操作符，它允许你安全的访问对象的深层属性，而不必显式检查每一级是否为null或undefined。这个特性在处理嵌套对象时特别有用，因为它可以减少错误并提高代码的可读性。

语法：

object?.property
object?.[property]
object?.method()

工作原理：

• 当使用可选链操作符?.时，如果对象是null或undefined，则表达式短路返回undefined，而不是抛出错误
• 这适用于属性访问和方法调用

示例：

const person = {
    name: '张三',
    age: 20,
    car: {
        make: '中国',
        model: '红旗'
        getInfo() {
            return `${this.make},${this.model}`
        }
    }
};

const carInfo = person?.car?.getInfo?.() // 中国 红旗
console.log(carInfo);

如果person对象或者car属性为undefined，则表达式将返回undefined，不会抛出错误

浏览器兼容性：

可选链操作符在现代浏览器中得到支持，但在一些旧版浏览器中可以不支持。可以使用Babel等转译器来提供对旧浏览器的支持

二、空值合并

空值合并操作符??是JavaScript中的一个逻辑操作符，它只在左侧操作数为null或undefined时返回右侧操作数，否则返回左侧操作数

语法：

let a = null;
let b = a ?? 'default';
console.log(b); // 'default'

工作原理：

• 与逻辑或操作符|| 不同，空值合并操作符??仅在左侧操作数严格为null或undefined时才评估并返回右侧操作数
• 这允许为null或undefined提供默认值，而不会覆盖其他假值(如0、''、false等)。

示例：

function getUserName(user) {
    const name = user?.name??'张三';
    return name;
}
const user1 = { name: '张三' };
console.log(getUserName(user1)); // "张三"
const user2 = {};
console.log(getUserName(user2)); // "张三"
const user3 = null;
console.log(getUserName(user3)); // "张三"
const user4 = undefined;
console.log(getUserName(user4)); // "张三"

在这个例子中，如果user对象的name属性存在，则返回该属性值；如果不存在，则返回默认值"张三"。

浏览器兼容性：

空值合并操作符也是ECMAScript 2020的一部分，现代浏览器通常支持它，但在一些旧版浏览器中可能不支持。

结论

可选链和空值合并是JavaScript中两个强大的特性，它们提供了一种更简洁、更安全的方式来处理可能为null或undefined的值。这些特性在处理复杂数据结构时尤其有用，可以减少错误并提高代码的可读性和维护性。在使用这些特性时，应注意它们的兼容性，并在必要时使用转译器或polyfills来提供支持。