可选链操做符(?.)——开发必备神器

它的出生

随着如今先后端分离的推动愈来愈快，如今的平常开发前端每每是本身不须要去数据库操做数据了，只须要经过调用API就能够进行数据获取。这虽然极大的方便了咱们的开发，可是随之而来也会伴生各类各样的新问题，好比数据的层次嵌套过深、数据不单一等等一系列缘由，使得咱们每每须要作不少的逻辑判断。前端

好比咱们在后端拿出了people的数据，想去直接获取它的家庭人口，若是像下面这样子直接获取，可能会有时候可以拿到，有时候由于场景变化就会缺乏这个字段，得到ERROR大奖章一枚！node

const people = {} // 假设这是后端数据

console.log(people.family.numbers);
复制代码

js中直接获取不存在的数据是会引起异常，致使整个进程done掉，可是由于一个小小的数据没有致使整个进程done掉很明显不是咱们想要的结果，那么咱们就要进行一下控制了。在这里解决办法大体分为两种，一种是借助第三方库，第二种就说本身手动拦截了。web

第三方库数据库

在这里咱们直接拿lodash来使用，lodash咱们要获取一个对象下的数据，每每会使用getter方法后端

_.get('people','family.numbers')
复制代码

在lodash中若是存在咱们要获取的key，就会返回该key下的value,即咱们想要的numbers，若是不存在，就返回空(顺便咱们具体看看他背后作了哪些操做吧)数组

//get.js
function _get(data,f){
   if(f.substr) f = f.split(/\.|\\|\//);
   if(f.length && data){
       return _get(data[f.shift()],f)
   }else if(!f.length && data){
       return data
   }else {
       return "";
   }
}
export default function(target,path,defaultValue){
   return _get(target,path,defaultValue);
}
复制代码

原生本身js手写浏览器

本身手写进行拦截其思路也是极其简单，就是逐层向下判断有没有就好了。markdown
```
console.log(people && people.family && people.family.numbers);
复制代码
```
当进行逐个判断的时候，一个不存在就会返回undefined，从而避免ERROR，可是相比之下，若是不依赖第三方库的时候，本身写就显得极其复杂了。假设这数据结构的深度不是三层，是5层，10层呢？那是否是就显得极其复杂了？数据结构

这是在这个背景之下，咱们今天的猪脚——可选操做符?.就出来了！那么使用可选操做符咱们又要怎么操做呢？前后端分离

咱们只需在须要判断的的地方使用它就行了呀！

console.log(people?.family?.numbers); // undefined
复制代码

就是这么的简单！！！这是这么粗暴！！！只要在须要判断的地方前面，多加一个？就欧了

这么实用的操做，肯定不学习吗？

基础使用

官方定义MDN文档：可选链操做符( ?. )容许读取位于链接对象链深处的属性的值，而没必要明确验证链中的每一个引用是否有效。?. 操做符的功能相似于 . 链式操做符，不一样之处在于，在引用为空(nullish ) (null 或者 undefined) 的状况下不会引发错误，该表达式短路返回值是 undefined。与函数调用一块儿使用时，若是给定的函数不存在，则返回 undefined。

当尝试访问可能不存在的对象属性时，可选链操做符将会使表达式更短、更简明。在探索一个对象的内容时，若是不能肯定哪些属性一定存在，可选链操做符也是颇有帮助的。

可选操做符的基础使用实际上是极其简单的，就是在可能会由于缺少字段引发error的地方加上便可。怎么肯定从哪里开始会引起这个error呢？

咱们仍是从那个有(jian)趣(lou)的后端数据讲起吧

const people = {} // 假设这是后端数据

console.log(people); // {}
console.log(people.family); // undefined
console.log(people.family.number); // ERROR
复制代码

由输出能够看到，其实js自己仍是有必定的容错机制的，因此咱们只须要在可能会触发容错机制的地方，加上便可！

虽然使用可选操做符很简单，可是仍是有不少注意事项的

可选操做符前面的变量必须声明！若是该操做符前面的变量未声明，那么就会引起error
不可过分使用，咱们只须要在可能会引起error的地方使用就好，?.虽好，可不要贪多哦(官方建议，为啥俺也不知道)
当碰见null或者undefined就结束(也就是短路)
可选链不能用于赋值,只能用于判断是否会短路，会短路就返回undefined，不然就返回该key的值(若是想赋默认值，就要使用它的兄弟??)

它的兄弟——空值合并操做符(??)

上文说到，可选操做符是不能够进行赋值操做的，可是它的兄弟能够呀😎，毕竟葫芦娃能吐水的就不能吐火呢

过去

在可选操做符和空值合并操做符出现以前，咱们要判断一个一个属性是否存在，存在的时候取出它的值，，不存在的时候赋默认值，咱们可能要像下面同样写一长串：

console.log(people && people.family && people.family.numbers || '不存在');
复制代码

每每是极其长而麻烦的，可是如今不同了！

如今

咱们只须要将他们两兄弟配合使用便可：

console.log(people.family?.number ?? '不存在');
复制代码

只有当前面为null或者undefined的时候，会进行空值合并操做，就是赋予后面设定的默认值。

进阶

前面讲了那么多，都是很基础的用法，接下来让咱们一块儿学习一下骚操做吧！

在js中，对象里面能够包含的东西是不少不少的，因此?.也不只仅使用在简简单单的判断操做上。他还能够应用到数组、函数等等一系列操做上

语法：

obj?.prop
obj?.[expr]
arr?.[index]
func?.(args)
复制代码

开始的两个简单的咱们已经学习完了，接下来看看数组和函数的吧！

数组

其实arr?.[index]从表达式就能够很清晰的知道，就是获取arr[index]元素。以下：

let arr = [1, 2, 3];
    console.log(arr?.[5]); // undefined
复制代码

或许小伙伴们会以为这个可能很小儿科，就算不用也没问呀，可是若是是下面这种状况呢？

let demo = { 
    }

    console.log(demo.a[1]);  // ERROR
    console.log(demo.a?.[1]);  // undefined
复制代码

若是不进行判断不就error了吗？判断那么又要像开篇同样进行一系列枯燥繁琐的判断，可是使用?.不就能够很快速解决这个问题了？

函数

咱们要获取的，每每是不只仅只限于数据，有时候咱们可能获取一些API，可是若是不存在对应的API，照样会引起异常，在这里，照样有解决办法！

const demo1 = {
    func() {
        console.log('欸嘿，就不报错！');
    }
}

const demo2 = {

}

demo1.func(); // 欸嘿，就不报错！
demo2.func(); // TypeError: demo2.func is not a function
复制代码

咱们使用可选操做符，就能够完美的避免这个error

const demo1 = {
    func() {
        console.log('欸嘿，就不报错！');
    }
}

const demo2 = {

}

demo1.func?.(); // 欸嘿，就不报错！
demo2.func?.(); // 
复制代码

可是在这里有一个须要你们注意的点，当判断到存在和函数同名的非函数属性时，会引起异常

const demo1 = {
    func() {
        console.log('欸嘿，就不报错！');
    }
}

const demo2 = {
    func = 'demo'
}

demo2.func?.(); // 
复制代码

获取不少小伙伴会以为在数组和函数的应用上会很别扭，可是你们结合一下js的执行机制去理解，就会明白为什么要这么写以及为什么存在同名非函数会进行报错了

支持状况

其实?.操做符并非在js独有，目前在C#，Swift都有，并且TS也加入该新特性。在node.js须要升级到14.0以上才支持(可是通常都会使用Babel进行转译，因此彻底不用担忧啦！)

浏览器支持状况

我是江河，前端实习生一枚，文章若有不正之处，敬请斧正！

面对新事物，咱们要敢于拥抱，只有不断接受新事物，将新特性为咱们所用，才能不断前进，不断超越！