可选链?.的使用

Why?

解决数据可能为null带来的错误同时避免重复代码
当访问一个深层树形结构的对象的时候，需要判断中间节点树形是否存在
如果不判断会出现eg: TypeError: Cannot read properties of undefined (reading 'bio')

 let obj01 = {name: 'test'}
console.log(obj01.info.bio)
 
Error: TypeError: Cannot read properties of undefined (reading 'bio')
// 传统解决方案
let bio = obj01.info && obj01.info.bio; // undefined
// 可选链可以避免重复代码
let bio = obj01.info?.bio; // undefined

使用 ?? 来解决对象具体某个值为null时添加默认值

 const response = {
  settings: {
    nullValue: null,
    height: 400,
    animationDuration: 0,
    headerText: '',
    showSplashScreen: false
  }
};
 
const undefinedValue = response.settings?.undefinedValue ?? 'some other default'; // result: 'some other default'
const nullValue = response.settings?.nullValue ?? 'some other default'; // result: 'some other default'
const headerText = response.settings?.headerText ?? 'Hello, world!'; // result: ''
const animationDuration = response.settings?.animationDuration ?? 300; // result: 0
const showSplashScreen = response.settings?.showSplashScreen ?? true; // result: false

posted @ 2023-06-11 14:17 Felix_Openmind 阅读(2) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

阅读排行：
· winform 绘制太阳，地球，月球运作规律
· 超详细：普通电脑也行Windows部署deepseek R1训练数据并当服务器共享给他人
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· AI 智能体引爆开源社区「GitHub 热点速览」
· 写一个简单的SQL生成工具

2025年3月

日

一

二

三

四

五

六

Felix_Openmind

https://github.com/serendipitywzz

可选链?.的使用

Why?

使用 ?? 来解决对象具体某个值为null时添加默认值

最新随笔

随笔分类 (404)

随笔档案 (410)

文章分类 (66)

文章档案 (99)

软件开发

阅读排行榜

	let obj01 = {name: 'test'}
	console.log(obj01.info.bio)

	Error: TypeError: Cannot read properties of undefined (reading 'bio')
	// 传统解决方案
	let bio = obj01.info && obj01.info.bio; // undefined
	// 可选链可以避免重复代码
	let bio = obj01.info?.bio; // undefined

	const response = {
	settings: {
	nullValue: null,
	height: 400,
	animationDuration: 0,
	headerText: '',
	showSplashScreen: false
	}
	};

	const undefinedValue = response.settings?.undefinedValue ?? 'some other default'; // result: 'some other default'
	const nullValue = response.settings?.nullValue ?? 'some other default'; // result: 'some other default'
	const headerText = response.settings?.headerText ?? 'Hello, world!'; // result: ''
	const animationDuration = response.settings?.animationDuration ?? 300; // result: 0
	const showSplashScreen = response.settings?.showSplashScreen ?? true; // result: false