工程建设招标网都有哪些网站,wordpress 前台登陆插件,设计公司可以是高新企业,如何看网站开发语言1. 可选链运算符Optional chaining(?.)
MDN定义 可选链运算符#xff08;?.#xff09;允许读取位于连接对象链深处的属性的值#xff0c;而不必明确验证链中的每个引用是否有效。?. 运算符的功能类似于 . 链式运算符#xff0c;不同之处在于#xff0c;在引用为空 (n…1. 可选链运算符Optional chaining(?.)
MDN定义 可选链运算符?.允许读取位于连接对象链深处的属性的值而不必明确验证链中的每个引用是否有效。?. 运算符的功能类似于 . 链式运算符不同之处在于在引用为空 (nullish ) (null 或者 undefined) 的情况下不会引起错误该表达式短路返回值是 undefined。与函数调用一起使用时如果给定的函数不存在则返回 undefined。 当尝试访问可能不存在的对象属性时可选链运算符将会使表达式更短、更简明。在探索一个对象的内容时如果不能确定哪些属性必定存在可选链运算符也是很有帮助的。 语法
obj.val?.prop
obj.val?.[expr]
obj.func?.(args)使用场景
{/* 组件使用时通过props传入数据 */}CardTableList database{eShare.rollback}/{/* 组件内逻辑如下 */}
const CardTableList ({ database }) {return (Collapse defaultActiveKey{[loan_order, mv_run_result]} expandIconPositionend ghost{database.table.map(table {return (Panel forceRender{true}showArrow{true}header{Tag color#87d068{table.name}/Tag}key{table.name}div key{table.name}div{table.fields.map(field {return (Form.Itemkey{field.label}{...field}rules{[{ required: field.required, }]}{field.type}/Form.Item);})}/div/div/Panel);})}/Collapse/);
}如props传入database是一个不存在的值时就会出现异常: 增加可选链操作符后
const CardTableList ({ database }) {return (Collapse defaultActiveKey{[loan_order, mv_run_result]} expandIconPositionend ghost{database?.table.map(table {return (Panel forceRender{true}showArrow{true}header{Tag color#87d068{table.name}/Tag}key{table.name}div key{table.name}div{table?.fields.map(field {return (Form.Itemkey{field.label}{...field}rules{[{ required: field.required, }]}{field.type}/Form.Item);})}/div/div/Panel);})}/Collapse/);
}页面可以正常渲染
2. 空值合并运算符(??)
定义 空值合并运算符??是一个逻辑运算符当左侧的操作数为 null 或者 undefined 时返回其右侧操作数否则返回左侧操作数。 与逻辑或运算符||不同逻辑或运算符会在左侧操作数为假值时返回右侧操作数。也就是说如果使用 || 来为某些变量设置默认值可能会遇到意料之外的行为。比如为假值例如‘’ 或 0时。见下面的例子。 语法
leftExpr ?? rightExpr使用场景
// 对于函数入参进行默认值的处理
let jsonStr value undefined || value null ? : value;使用空值合并运算符可简化代码
let jsonStr value ?? 3. webpack打包时用babel编译可选链运算符(?.)与空值合并运算符(??)
react单独引入时需要进行以下配置如果新建react项目还是推荐cra等脚手架免去繁琐的配置。 首先添加以下两个依赖
npm install -D babel/plugin-proposal-optional-chaining7.12.7
npm install -D babel/plugin-proposal-nullish-coalescing-operator7.12.13接着在babel编译配置文件(.babelrc)中添加配置
{presets: [babel/react],plugins: [...babel/plugin-proposal-optional-chaining,babel/plugin-proposal-nullish-coalescing-operator]
}
