javascript中的可选链操作符

Posted 2021-12-13 低代码布道师

可选链操作符?.可以安全的访问对象中嵌套的属性，即时属性不存在也不会报错

常规情况下，如果我们访问不存在的属性会报错

let user = {}; // a user without "address" property

alert(user.address.street); // Error!

如果确实想访问属性怎么办，可以使用三元表达式

let user = {};

alert(user.address ? user.address.street : undefined);

但是如果属性嵌套比较深，三元表达式将变得难以理解

let user = {}; // user has no address

alert(user.address ? user.address.street ? user.address.street.name : null : null);

为此我们可以使用短路运算符&&来优化

let user = {}; // user has no address

alert( user.address && user.address.street && user.address.street.name ); // undefined (no error)

为了简洁，用可选链语法

let user = {}; // user has no address

alert( user?.address?.street ); // undefined (no error)

如果属性存在正常返回值，如果属性不存在就返回undefined

除了用在属性上，可选链还可以用来调用不存在的方法

let userAdmin = {
  admin() {
    alert("I am admin");
  }
};

let userGuest = {};

userAdmin.admin?.(); // I am admin

userGuest.admin?.(); // nothing (no such method)

也可以用在删除属性上

delete user?.name; // delete user.name if user exists

但是不能用在赋值语句上

let user = null;

user?.name = "John"; // Error, doesn't work
// because it evaluates to undefined = "John"