js 中什么是可选链？obj?.prop 、obj?.[expr] 、arr?.[index] 、func?.(args)

[lizheng0515]

可选链操作符介绍 

可选链操作符 ?. 可以按照操作符之前的属性是否有效，链式读取对象的属性或者使整个对象链返回 undefined。?. 运算符的作用与 . 运算符类似，不同之处在于，如果对象链上的引用是 nullish (null 或者 undefined)，. 操作符会抛出一个错误，而 ?. 操作符则会按照短路计算的方式进行处理，返回 undefined。可选链操作符也可用于函数调用，如果操作符前的函数不存在，也将会返回 undefined。

?. 操作符MDN，可以嵌套获取对象的属性值。通过获取对象属性获得的值可能是 undefined 或 null 时，可选链操作符提供了一种方法来简化 被连接对象的值访问。

//例子
const o = {}

// 添加可选链之前
o && o.a && o.a.b && o.a.b.c && o.a.b.c.d

// 添加可选链之后
o?.a?.b?.c?.d

可选链的三种形式

咱们可以使用以下3种形式的可选链。

• 第一种： object?.property 用于访问静态属性：

const object = null;
object?.property; // => undefined

• 第二种：object?.[expression] 用于访问动态属性或数组项：

// 其一
const object = null;
const name = 'property';
object?.[name]; // => undefined
// 其二
const array = null;
array?.[0]; // => undefined

• 第三种:object?.([arg1, [arg2, ...]]) 执行一个对象方法

const object = null;
object?.method('Some value'); // => undefined

将这三种组合起来创建一个可选链：

const value = object.maybeUndefinedProp?.maybeNull()?.[propName];

在vscode中使用

vscode的js验证器目前并不能识别?.操作符，所以会有错误警告：

解决错误警告：

安装vscode 扩展 ESLint，在扩展商店搜素并安装 ESLint。

修改vscode配置（.vscode/settings.json）：

{
  "eslint.alwaysShowStatus": true,
  "eslint.autoFixOnSave": true,
  // 主要是这个，关闭vscode的js验证器
  "javascript.validate.enable": false,  
  "[javascript]": {
    "editor.formatOnSave": false,
  },
  "[javascriptreact]": {
  "editor.formatOnSave": false,
  },
}

eslint

安装babel编译器后，就可以使用?.操作符了。但是如果你使用eslint的话，你就需要安装babel-eslint来识别这种新语法。

yarn add babel-eslint --dev

添加.eslintrc文件

{
  "parser": "babel-eslint",
  "rules": {
    "strict": 0
  }
}

在create-react-app使用

默认情况下create-react-app，不允许修改babel配置，这里我们需要安装两个附加模块以允许补充默认配置。

yarn add customize-cra react-app-rewired --dev

添加config-overrides.js文件

const { useBabelRc, override } = require('customize-cra');
module.exports = override(useBabelRc());

修改package.json

"scripts": {
  "start": "react-app-rewired start",
  "build": "react-app-rewired build",
  "test": "react-app-rewired test --env=jsdom"
}