JavaScript 可选链操作符&&空值合并操作符

背景

最近开始接触到一些ES6以后的新特性使用起来确实方便了不少

尤其是最近有一个项目在方法中需要传入index 但是在做非空验证的时候如果传入的index是0 也会被判断为false 这就十分头疼了

冗余的判断不仅使代码的可读性变差而且会使代码变得不简洁

但是在接触到可选链操作符后 emmmmm 这也太香了避免了 && 和多余的非空校验

所以决定以此为开始陆续的写一些ES6 ES7...之后的新特性

可选链操作符

初识

这里我引用一段MDN上的解释

或许你还是?????

不要急我们来看一道例题

const adventurer = {
  name: '林克',
  weapon: {
    name: '大师剑'
  }
};

const weaponName = adventurer.weapon?.name;
console.log(weaponName);
// expected output: 大师剑

console.log(adventurer.savePrincess?.());
// expected output: undefined

const shieldName = adventurer.shield?.name;
console.log(shieldName);
// expected output: undefined

上述例子adventurer.weapon?.name

我们试图去寻找adventurer对象下的weapon属性下的name属性

adventurer对象有weapon属性所以返回我们可以取出我们的大师剑

然后是adventurer.savePrincess?.()

显然adventurer下没有savePrincess这个方法所以救公主？？？不存在的直接返回undefined

最后是adventurer.shield?.name

同样的我们发现 adventurer对象下也没有shield属性所以直接返回undefined

好啦至此我们大概理解了可选链是怎么一回事

接下来我们来看看可选链有什么需要注意的地方

注意点

可选链不能用于赋值

let object = {};
object?.property = 1; // Uncaught SyntaxError: Invalid left-hand side in assignment

短路计算

当在表达式中使用可选链时，如果左操作数是 null 或 undefined，表达式将不会被计算，例如：

let potentiallyNullObj = null;
let x = 0;
let prop = potentiallyNullObj?.[x++];

console.log(x); // x 将不会被递增，依旧输出 0

最后再举一个自己在实际开发中的例子

假如有一个方法setStudentResult(action) 它接收一个对象action

为了让我们的代码健壮我们必须在方法内部做出参数的非空校验显然下面这样是不行的


const list = {};

/**
 * @param {*} action
 */
function setStudent (action) {
  list[action.index] = action.student;
}

如果我们直接调用setStudent() 显然整个程序都会崩溃

所以在以前我们可以将方法体改成这样

// 同时包含函数接收了action参数 并且参数中有我们需要的内容
function setStudent(action) {
  if (action) {
    if (action.index && action.student) {
      list[action.index] = action.student;
    }
  }
}

但是如果使用可选链操作符我们就可以将方法定义成如下

function setStudent (action) {
  if (action?.index && action?.student) {
    list[action.index] = action.student;
  }
}

可以看到无论是可读性还是简洁程度可选链操作符都更胜一筹

空值合并操作符

还是引用一段MDN上解释

对比 ||

我们知道 || 逻辑或运算符也具有相似的功能

也就是在 || 左侧操作数为假值时会返回右侧操作数

JS中的假值有

0
''
NaN
null
undefined

所以设想一个场景我们对一个function中的参数使用 || 运算符来判断用户是否输入

function addNum(a,b) {
  var a = a || 0
  var b = b || 0
  return a + b 
}

上述代码我们用 || 运算符来判断用户用户输入的合法性

但是这样我们就无法排除 0 这种情况

如果用户就是输入了0 但是0依旧是一个假值所以还是会返回 || 操作符右侧是操作数

这就与我们的预期不一致了

而 ?? 空值合并操作符就只是检验了 null 和 undefined

注意点

短路计算

与 OR 和 AND 逻辑操作符相似，当左表达式不为 null 或 undefined 时，不会对右表达式进行求值

var a = 1;
undefined ?? a++;
console.log(a); // 1

var b = 1;
true ?? b++;
console.log(b); // 2

不能与 AND 或 OR 操作符共用

null || undefined ?? "foo"; // 抛出 SyntaxError
true || undefined ?? "foo"; // 抛出 SyntaxError

与可选链操作符连用

两个操作符都是针对 undefined 和 null 两个值

所以我们可以结合这两个操作符

let customer = {
  name: "chou",
  details: { age: 100 }
};
let customerCity = customer?.city ?? "荒野之息";
console.log(customerCity); // 荒野之息

常见问题FAQ

免费下载或者VIP会员专享资源能否直接商用？: 本站所有资源版权均属于原作者所有，这里所提供资源均只能用于参考学习用，请勿直接商用。若由于商用引起版权纠纷，一切责任均由使用者承担。更多说明请参考 VIP介绍。

提示下载完但解压或打开不了？: 最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量，若小于网盘提示的容量则是这个原因。这是浏览器下载的bug，建议用百度网盘软件或迅雷下载。若排除这种情况，可在对应资源底部留言，或联络我们.。

找不到素材资源介绍文章里的示例图片？: 对于PPT，KEY，Mockups，APP，网页模版等类型的素材，文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买，且本站不负责(也没有办法)找到出处。同样地一些字体文件也是这种情况，但部分素材会在素材包内有一份字体下载链接清单。