xgqfrms™, xgqfrms® : xgqfrms's offical website of cnblogs! xgqfrms™, xgqfrms® : xgqfrms's offical website of GitHub!

js 可选链 & 空值合并 In Action

js 可选链 & 空值合并 In Action

const obj = {
  props: {
     name: 'eric',
  },
  // prop, 不存在的属性 ⚠️
};

console.log('✅ obj.props.name =', obj.props.name);
//  obj.props.name = eric

console.log('❌ obj.prop.name =', obj.prop.name);
// Uncaught TypeError: Cannot read property 'name' of undefined

console.log('✅ obj.prop?.name =', obj.prop?.name);
// ✅ obj.prop?.name = undefined

console.log('✅ obj?.prop?.name =', obj?.prop?.name);
// ✅ obj?.prop?.name = undefined

// 可选链与空值合并结合 🚀
const defaultValue = obj.prop?.name ?? 'default name';
console.log(`✅ obj.prop?.name ?? 'default name' = `, defaultValue);
// ✅ obj.prop?.name ?? 'default name' =  default name

可选链操作符 ?.

优雅的解决访问多层级对象属性,cannot read property 'xxx' of undefined 的问题

空值合并操作符 ??

只有 undefined 和 null 才会被当作 🦾 假值

refs



©xgqfrms 2012-2020

www.cnblogs.com 发布文章使用:只允许注册用户才可以访问!

原创文章,版权所有©️xgqfrms, 禁止转载 🈲️,侵权必究⚠️!


posted @ 2021-02-05 14:37  xgqfrms  阅读(70)  评论(0编辑  收藏  举报