text: (window.webpackJsonp=window.webpackJsonp||[]).push([[101],{252:function(s,a,t){"use strict";t.r(a);var e=t(28),r=Object(e.a)({},(function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("ContentSlotsDistributor",{attrs:{"slot-key":s.$parent.slotKey}},[t("h1",{attrs:{id:"条件优化运算符"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#条件优化运算符"}},[s._v("#")]),s._v(" 条件优化运算符")]),s._v(" "),t("h2",{attrs:{id:"可选运算符"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#可选运算符"}},[s._v("#")]),s._v(" 可选运算符")]),s._v(" "),t("p",[s._v("可选运算符被设计用于深层对象取值，实例如下")]),s._v(" "),t("div",{staticClass:"language-js extra-class"},[t("pre",{pre:!0,attrs:{class:"language-js"}},[t("code",[t("span",{pre:!0,attrs:{class:"token keyword"}},[s._v("var")]),s._v(" street "),t("span",{pre:!0,attrs:{class:"token operator"}},[s._v("=")]),s._v(" user"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(".")]),s._v("address "),t("span",{pre:!0,attrs:{class:"token operator"}},[s._v("&&")]),s._v(" user"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(".")]),s._v("address"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(".")]),s._v("street"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(";")]),s._v("\n")])])]),t("p",[s._v("可以看到，我们每次&&后面的语句，必须重复前面的路径，比如"),t("code",[s._v("user.address.street")]),s._v("就要重复"),t("code",[s._v("user.address")]),s._v("，这是非常影响代码书写和阅读的")]),s._v(" "),t("p",[t("strong",[s._v("可选运算符优化")])]),s._v(" "),t("div",{staticClass:"language-js extra-class"},[t("pre",{pre:!0,attrs:{class:"language-js"}},[t("code",[t("span",{pre:!0,attrs:{class:"token keyword"}},[s._v("var")]),s._v(" street "),t("span",{pre:!0,attrs:{class:"token operator"}},[s._v("=")]),s._v(" user"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(".")]),s._v("address"),t("span",{pre:!0,attrs:{class:"token operator"}},[s._v("?.")]),s._v("street\n")])])]),t("p",[t("strong",[s._v("上述代码就可以实现前面的冗余的取值保护语法，非常简洁，而且语义性强")]),s._v("，仅仅"),t("strong",[s._v("这一个优势，就足够我们去使用它了")])]),s._v(" "),t("h3",{attrs:{id:"已实现场景"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#已实现场景"}},[s._v("#")]),s._v(" 已实现场景")]),s._v(" "),t("div",{staticClass:"language-js extra-class"},[t("pre",{pre:!0,attrs:{class:"language-js"}},[t("code",[s._v("obj"),t("span",{pre:!0,attrs:{class:"token operator"}},[s._v("?.")]),s._v("prop       "),t("span",{pre:!0,attrs:{class:"token comment"}},[s._v("// 访问静态key")]),s._v("\nobj"),t("span",{pre:!0,attrs:{class:"token operator"}},[s._v("?.")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("[")]),s._v("expr"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("]")]),s._v("     "),t("span",{pre:!0,attrs:{class:"token comment"}},[s._v("// 访问动态key")]),s._v("\nfunc"),t("span",{pre:!0,attrs:{class:"token operator"}},[s._v("?.")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("(")]),t("span",{pre:!0,attrs:{class:"token operator"}},[s._v("...")]),s._v("args"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(")")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token comment"}},[s._v("// 访问函数")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"token keyword"}},[s._v("delete")]),s._v(" a"),t("span",{pre:!0,attrs:{class:"token operator"}},[s._v("?.")]),s._v("b   "),t("span",{pre:!0,attrs:{class:"token comment"}},[s._v("// 删除属性")]),s._v("\n")])])]),t("h3",{attrs:{id:"语义"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#语义"}},[s._v("#")]),s._v(" 语义")]),s._v(" "),t("p",[s._v("看一下对应的语义,这里用等价代码代替")]),s._v(" "),t("div",{staticClass:"language-js extra-class"},[t("pre",{pre:!0,attrs:{class:"language-js"}},[t("code",[s._v("a"),t("span",{pre:!0,attrs:{class:"token operator"}},[s._v("?.")]),s._v("b                          \na "),t("span",{pre:!0,attrs:{class:"token operator"}},[s._v("==")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token keyword"}},[s._v("null")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token operator"}},[s._v("?")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token keyword"}},[s._v("undefined")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token operator"}},[s._v(":")]),s._v(" a"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(".")]),s._v("b\n\na"),t("span",{pre:!0,attrs:{class:"token operator"}},[s._v("?.")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("[")]),s._v("x"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("]")]),s._v("                        \na "),t("span",{pre:!0,attrs:{class:"token operator"}},[s._v("==")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token keyword"}},[s._v("null")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token operator"}},[s._v("?")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token keyword"}},[s._v("undefined")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token operator"}},[s._v(":")]),s._v(" a"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("[")]),s._v("x"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("]")]),s._v("\n\na"),t("span",{pre:!0,attrs:{class:"token operator"}},[s._v("?.")]),t("span",{pre:!0,attrs:{class:"token function"}},[s._v("b")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("(")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(")")]),s._v("                        \na "),t("span",{pre:!0,attrs:{class:"token operator"}},[s._v("==")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token keyword"}},[s._v("null")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token operator"}},[s._v("?")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token keyword"}},[s._v("undefined")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token operator"}},[s._v(":")]),s._v(" a"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(".")]),t("span",{pre:!0,attrs:{class:"token function"}},[s._v("b")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("(")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(")")]),s._v(" \n\na"),t("span",{pre:!0,attrs:{class:"token operator"}},[s._v("?.")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("(")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(")")]),s._v("                        \na "),t("span",{pre:!0,attrs:{class:"token operator"}},[s._v("==")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token keyword"}},[s._v("null")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token operator"}},[s._v("?")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token keyword"}},[s._v("undefined")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token operator"}},[s._v(":")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token function"}},[s._v("a")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("(")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(")")]),s._v(" \n\n"),t("span",{pre:!0,attrs:{class:"token keyword"}},[s._v("delete")]),s._v(" a"),t("span",{pre:!0,attrs:{class:"token operator"}},[s._v("?.")]),s._v("b\na "),t("span",{pre:!0,attrs:{class:"token operator"}},[s._v("==")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token keyword"}},[s._v("null")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token operator"}},[s._v("?")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token boolean"}},[s._v("true")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token operator"}},[s._v(":")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token keyword"}},[s._v("delete")]),s._v(" a"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(".")]),s._v("b\n")])])]),t("h3",{attrs:{id:"短路"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#短路"}},[s._v("#")]),s._v(" 短路")]),s._v(" "),t("p",[s._v("这里的短路的意思和&&和||有着一致的意思")]),s._v(" "),t("div",{staticClass:"language-js extra-class"},[t("pre",{pre:!0,attrs:{class:"language-js"}},[t("code",[t("span",{pre:!0,attrs:{class:"token comment"}},[s._v("// false就停止了运算")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"token boolean"}},[s._v("false")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token operator"}},[s._v("&&")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token boolean"}},[s._v("true")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"token comment"}},[s._v("// a为false后面的语句也不会执行")]),s._v("\na"),t("span",{pre:!0,attrs:{class:"token operator"}},[s._v("?.")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("[")]),t("span",{pre:!0,attrs:{class:"token operator"}},[s._v("++")]),s._v("x"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("]")]),s._v(" \n")])])]),t("h3",{attrs:{id:"场景应用"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#场景应用"}},[s._v("#")]),s._v(" 场景应用")]),s._v(" "),t("div",{staticClass:"language-js extra-class"},[t("pre",{pre:!0,attrs:{class:"language-js"}},[t("code",[t("span",{pre:!0,attrs:{class:"token comment"}},[s._v("// 深层对象取值，典型场景")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"token keyword"}},[s._v("var")]),s._v(" street "),t("span",{pre:!0,attrs:{class:"token operator"}},[s._v("=")]),s._v(" user"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(".")]),s._v("address "),t("span",{pre:!0,attrs:{class:"token operator"}},[s._v("&&")]),s._v(" user"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(".")]),s._v("address"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(".")]),s._v("street"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(";")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"token keyword"}},[s._v("var")]),s._v(" street "),t("span",{pre:!0,attrs:{class:"token operator"}},[s._v("=")]),s._v(" user"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(".")]),s._v("address"),t("span",{pre:!0,attrs:{class:"token operator"}},[s._v("?.")]),s._v("street\n\n"),t("span",{pre:!0,attrs:{class:"token comment"}},[s._v("// 函数保护，在处理一些可选方法很有用，比如传入的回调")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"token keyword"}},[s._v("if")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("(")]),s._v("options"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(".")]),s._v("failCb"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(")")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("{")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"token function"}},[s._v("failCb")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("(")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(")")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(";")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("}")]),s._v("\n\nuser"),t("span",{pre:!0,attrs:{class:"token operator"}},[s._v("?.")]),t("span",{pre:!0,attrs:{class:"token function"}},[s._v("failCb")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("(")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(")")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(";")]),s._v("\n\n"),t("span",{pre:!0,attrs:{class:"token comment"}},[s._v("// 安全删除")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"token keyword"}},[s._v("delete")]),s._v(" a"),t("span",{pre:!0,attrs:{class:"token operator"}},[s._v("?.")]),s._v("b\na "),t("span",{pre:!0,attrs:{class:"token operator"}},[s._v("==")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token keyword"}},[s._v("null")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token operator"}},[s._v("?")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token boolean"}},[s._v("true")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token operator"}},[s._v(":")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token keyword"}},[s._v("delete")]),s._v(" a"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(".")]),s._v("b\n")])])]),t("h2",{attrs:{id:"空值合并运算符"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#空值合并运算符"}},[s._v("#")]),s._v(" 空值合并运算符")]),s._v(" "),t("p",[s._v("控制合并运算符是为下面场景设计的")]),s._v(" "),t("div",{staticClass:"language-js extra-class"},[t("pre",{pre:!0,attrs:{class:"language-js"}},[t("code",[t("span",{pre:!0,attrs:{class:"token comment"}},[s._v("// a的默认值逻辑")]),s._v("\na "),t("span",{pre:!0,attrs:{class:"token operator"}},[s._v("||")]),s._v(" defaultValue\n")])])]),t("p",[s._v("在没有函数默认值的时候，我们经常使用上述逻辑来完成默认值，但是有一个缺点就是")]),s._v(" "),t("div",{staticClass:"language-js extra-class"},[t("pre",{pre:!0,attrs:{class:"language-js"}},[t("code",[t("span",{pre:!0,attrs:{class:"token comment"}},[s._v("// a 为0 时，也会使得defaultValue生效")]),s._v("\na "),t("span",{pre:!0,attrs:{class:"token operator"}},[s._v("||")]),s._v(" defaultValue\n")])])]),t("p",[s._v("可以预见此逻辑会使得falsely的属性全部采用默认值，导致我们")]),s._v(" "),t("div",{staticClass:"language-js extra-class"},[t("pre",{pre:!0,attrs:{class:"language-js"}},[t("code",[t("span",{pre:!0,attrs:{class:"token comment"}},[s._v("// 仅当a为undefined、null 才会取defaultValue的值")]),s._v("\na "),t("span",{pre:!0,attrs:{class:"token operator"}},[s._v("??")]),s._v(" defaultValue\n")])])]),t("p",[t("strong",[s._v("应用场景")])]),s._v(" "),t("div",{staticClass:"language-js extra-class"},[t("pre",{pre:!0,attrs:{class:"language-js"}},[t("code",[t("span",{pre:!0,attrs:{class:"token keyword"}},[s._v("var")]),s._v(" street "),t("span",{pre:!0,attrs:{class:"token operator"}},[s._v("=")]),s._v(" user"),t("span",{pre:!0,attrs:{class:"token operator"}},[s._v("?.")]),s._v("street"),t("span",{pre:!0,attrs:{class:"token operator"}},[s._v("?.")]),s._v("name"),t("span",{pre:!0,attrs:{class:"token operator"}},[s._v("??")]),t("span",{pre:!0,attrs:{class:"token string"}},[s._v("'default Name'")]),s._v(" \n")])])]),t("p",[s._v("空值运算符强调是合并了undefined、null作为假值，但是其主要还是补充可选运算符，比如上面的例子")]),s._v(" "),t("h2",{attrs:{id:"如何配置编译"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#如何配置编译"}},[s._v("#")]),s._v(" 如何配置编译")]),s._v(" "),t("h3",{attrs:{id:"方案1"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#方案1"}},[s._v("#")]),s._v(" 方案1")]),s._v(" "),t("p",[s._v("在使用babel的项目的.babelrc文件配置plugins选项")]),s._v(" "),t("div",{staticClass:"language-js extra-class"},[t("pre",{pre:!0,attrs:{class:"language-js"}},[t("code",[t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("{")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"token string"}},[s._v('"plugins"')]),t("span",{pre:!0,attrs:{class:"token operator"}},[s._v(":")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("[")]),t("span",{pre:!0,attrs:{class:"token string"}},[s._v('"@babel/plugin-proposal-optional-chaining"')]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(",")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token string"}},[s._v('"@babel/plugin-proposal-nullish-coalescing-operator"')]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("]")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("}")]),s._v("\n")])])]),t("h3",{attrs:{id:"升级-babel-preset-env"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#升级-babel-preset-env"}},[s._v("#")]),s._v(" 升级 @babel/preset-env")]),s._v(" "),t("p",[s._v("目前上面两个提案到了stage4, @babel/preset-env已经将其加入了，直接升级 @babel/preset-env到最新版本即可")])])}),[],!1,null,null,null);a.default=r.exports}}]);