如果你看过我之前写的一篇关于ES6解构的文章，你一定知道解构可以实现数据防御功能，所以本文将介绍另一种数据防御方法OptionalChaining（可选链）。什么是可选链接可选链接允许我们在尝试访问对象属性之前检查对象是否存在。其他编译型语言也有类似的功能，比如C#的Null-conditionaloperator。为什么我们需要可选链接您是否曾经在访问对象或数组之前检查过它的属性？如果不检查，可能会遇到以下问题：if(a&&a.b&&a.b.length>0){console.log('666');}执行这些检查是因为不需要声明JavaScript对象预先结构或模式。因此，如果不判断其parent是否为对象就开始访问它的属性，可能会遇到错误：当b为undefined时，会报错。OptionalChaining能解决什么问题？如果使用OptionalChaining，代码可以如此简洁：if(a?.b?.length>0){console.log('666');}怎么样？告别繁琐繁琐的检查，又是一股清流。但是，请记住可选的链接运算符是?.不是吗？这意味着当你访问数组的一个元素时，它应该是这样的：constfirstItem=a?.b?.[0];//rightconstfirstItem=a?.b?[0];//错误同样，如果你想访问一个函数，应该是这样的：constexecFunc=a?.func?.();//rightconstexecFunc=a?.func?();//更多打错方式除了数据防御，OptionalChaining还可以用在更多场景：判断并执行函数a?.();//等价于a==null?undefined:a();//等价于a&&a();条件执行a?.[++x];//等同于a==null?undefined:a[++x];a?.b.c(++x).d;//等价于a==null?未定义：a.b.c(++x).d；更复杂的嵌套a?.b[3].c?.(x).d//等价于a==null?未定义：a.b[3].c==null？undefined:a.b[3].c(x).d;//注意：嵌套之后不管怎么写，感觉可读性都比较差，所以，不要炫耀。也可以分组，这样可读性更强(a?.b).c;//等价于(a==null?undefined:a.b).c;删除对象中的属性deletea?.b//等价于对于==null？undefined:deletea.b可选链是如何工作的？？。先判断他的Left-Hand-Side是否为null或undefined，如果是，则此表达式短路返回undefined，否则，依此类推执行到最后。如何使用？OptionalChaining目前处于Stage1，在使用之前，你可以去这里体验一波：codepan虽然OptionalChaining目前是一个草案，但是你可以使用Babel插件babel-plugin-syntax-optional-chaining来试用一下。Referencesproposal-optional-chaining
