[ES10 技术] ES10 中增强的可选链语法详解，解决 JS 开发过程中的问题-JavaScript中文网-JavaScript教程资源分享门户

JavaScript 是网站和应用程序开发中常用的编程语言。随着 web 技术的不断进步和更新，也不断需要对语言本身进行修订和升级。ES10（也称为 ECMAScript 2019）是 JavaScript 的最新版本之一，其中包括一种称为可选链语法的新特性。这是一种强大的语法，能够简化代码并减少出错的机会。在本文中，我们将详细介绍 ES10 中增强的可选链语法并提供指导意义和示例代码。

什么是可选链语法？

可选链语法是一种与对象属性（Object property）相关的新特性，被称为“可选”的原因是它能够检查对象属性是否存在，如果存在则返回其值，否则返回 undefined。在 JavaScript 中，如果您尝试获取未定义的属性，将会出现错误，有时这会导致整个应用程序崩溃。但是，与可选链语法一起使用，代码只会返回 undefined，而不会停止执行。

可选链语法的作用不仅仅是让您跟踪特定对象属性值的变化。它还可以检查类、函数和数组方法是否存在。这也可以使代码更具可读性和可维护性。可以在条件语句中使用可选链，以检查方法、对象和属性是否存在。

可选链语法的使用

以下是如何使用可选链语法的示例：

检查对象属性是否存在

-- -------------------- ---- -------
--- ---- - -
    ---------- ------
--

-- --------------------- -
    -------------------------------
- ---- -
    --------------- ---- ---------
-

检查函数是否存在

let user = {};

if (typeof user?.getName === "function") {
    console.log(user.getName());
} else {
    console.log("Function not found.");
}

检查数组方法是否存在

let arr = [1, 2, 3];

if (typeof arr?.map === "function") {
    console.log(arr.map(val => val * 2));
} else {
    console.log("Array method not found.");
}

检查类是否存在

if (typeof MyComponent?.isReactComponent === "function") {
    console.log("MyComponent is a React component.");
} else {
    console.log("MyComponent is not a React component.");
}

可选链语法的功能延伸

可选链语法可以与其他操作符一起使用，以实现更复杂的代码逻辑。以下是一些示例：

联合赋值操作符

let obj = {};

(obj?.prop ??= "default");
console.log(obj.prop); // 输出 “default”

支持调用函数的属性

let obj = {
    foo() {
        return "bar";
    }
};

console.log(obj.foo?.()); // 输出 "bar"

检查数组元素是否存在

let arr = [1, 2, undefined, 4];

console.log(arr?.[2]); // 输出 undefined

检查多级对象属性是否存在

可选链语法可以通过多级属性链进行链式调用。以下是一些示例：

-- -------------------- ---- -------
--- ---- - -
    -------- -
        -------- -
            ----- ---- -----
        -
    -
--

------------------------------------------ -- -- ---- -----

let user = {};

(user.profile?.address?.city = "New York");
console.log(user.profile); // 输出 { address: { city: 'New York' } }

let cities = {
    newYork: {
        population: 8.5
    }
};

console.log(cities?.["newYork"]?.population); // 输出 8.5

检查函数是否存在并执行

对于需要检查函数是否存在并执行的情况，可选链语法可以实现更加简洁的代码。以下是一个示例：

let obj = {};

obj.method?.(); // 如果 obj.method 存在，则调用 obj.method 方法

总结

可选链语法是 ES10 中的新特性之一，它可以大大简化代码并减少出错的机会。可选链语法可以检查对象属性、数组元素、类和方法的存在性，还可以用于条件语句中检查它们是否存在。可选链语法还可以与其他操作符一起使用，以实现更复杂的代码逻辑。我们相信，学习并掌握可选链语法是现代 JavaScript 开发的必备技能。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/65041f7a95b1f8cacd0dc4b2