较大家良好！今天咱们来聊聊JavaScript里那个地方的超级有用的玩意儿——可选链。这东西啊，就是让你在访问一个对象的较深层属性时不怕中间某个环节是null或者 哪些是可选链？ 想象一下 你有一个对象user，里面有个address属性，address里又有street属性。要是按照老办法写代码： let street = user.address.street; 如果user是null或者但是有了可选链当前这个功能之后呢？就变成这样啦： let street = user?.address?.street; 看见那个地方的问号加点号了吗？这就像在说：“如果user存在的话就持续往下走吧；要是不存在的话就算了。”这样无论哪一层缺失都不会报错了。 它到底干啥用的啊？ 可靠访问嵌套属性: 比如从API拿回来的数据有可能结构不完整；表单提交时用户没填部分信息；等等这一些情况都能够放心较大胆地用可选链。 降较低反复判断代码: 不用再写一堆if语句检查每一层是不是空值啦！简直太省事儿了！ 避免“未定义”错误: 再也不用担心TypeError: Cannot read property 'xxx' of undefined这种烦人的错误消息啦！ 怎样采用可选链访问嵌套对象属性？ 基本语法示例 // 传统方式写法需要先检查每一层 if { console.log; } // 采用可选链后简化为： console.log; 较深层嵌套的可靠访问 // 虚假设我们有一个数据结构包含更多维数组 const data = { users: }, { name: "Bob" } // 没有scores数组 ] }; // 可靠获取Bob的第二科成绩 const bobSecondScore = data.users?.?.scores?.; console.log; // 输出undefined而不是报错 和函数调用结合采用 // 虚假设有一个工具类有可能未初始化 const utils = null; try { utils.doSomething; // 传统方式方式会报错 utils?.doSomething; // 可靠调用方式 } catch { console.error; } console.log; /* 输出： 程序持续运行... */ // 即使utils为null也不会阻止程序落实！ 常见误区警告！！！注意！！！十分沉关键！！！ 不能连续赋值!: 下面这种写法不行哦！ user?.profile.age = 30; // 错误! 不能在赋值左侧采用可选链 正确做法应当分两步: if { user.profile.age = 30; } 或者更简洁地: .profile ||= {}; .profile.age = 30; 还能够采用nullish合并操作符初始化: user ??= {}; user.profile ??= {}; user.profile.age = 30; 哪种方法都比直接尝试通过?=.赋值要靠谱更多了！ 看明白了吗？ 这里给较大家普及一下ES6+崭新特性： ??= nullish合并赋值操作符 ||= 或赋值操作符 &&= 和赋值操作符 记住差别很十分沉关键哦！ 还有其他很更多崭新特性比如解构赋值、 展开运算符、箭头函数等等， 提议学习了解的时候配合MDN文档和实际项目实践， 这样明白起来会更较深入。 不要盲目追求最崭新语法糖， 先明白原理再去应用。 技术手段没有银弹， 只靠这一些较小技巧解决不了根本问题。 真实正良好的代码应当简单读、简单维护、 好吧好吧... 并且能够适应环境改变。 所以平时更多思考架构设计， 而不是只关注语言特性本身。 良好了回到正题～～～～～～～～ 接下来持续看其他误区警告... 无法跳过非对象类型!: 下面这种也不行! "hello".length; // OK,字符串有length属性 "hello"?..length; // 错误! 不能对字面量/基本类型采用可选链 正确做法应当明确转换为对象: String?.length; // OK,这是因为String返回的是对象 实际情况是全部基本类型都有其包装器对象: Boolean, Number, String 但正常情况下JS会自动处理隐式转换, 除非严格模式下需要显式操作。 所以平时写代码尽量保持一致风格, 不要混杂隐式显式两种方式。 另一方面注意typeof null == "object" 这是JS历史持续发展遗留问题之一, 记住就良好别纠结为哪些... 毕竟时间段宝市场价格较高精力有限嘛! 迅速明白掌握核心知识点更十分沉关键! 就像考驾照一样,了解怎么开车比探究发动机原理更实际! 哈哈哈是不是觉得有意思呢? 其实编程也是如此~ 最后再来看记住一点: JavaScript没有类型系统约束, 全部变量都是动态薄弱类型, 只有通过typeof instanceof判断类型. 明白了当前这个基础概念很更多疑惑迎刃而解. 陈旧版浏览器兼容问题: ~~~js // 对于IE系列彻底无望 // 对于较陈旧Chrome/Firefox需要Babel转译 ~~~ 当前主流浏览器早就支持ES6+标准啦! 包括移动端Safari,iOS WebView等等. 除非你们公司还在维护古董级项目... 否则彻底不用考虑兼容问题. 反而是崭新兴WebAssembly,Houdini API之类 才需要专门处理兼容方案. ⚠️ 警告:    '??' 和 '||' 的差别!!!!! 情况最终还是结果是对比th/th/tr/tr/bgcolor='#e6e6fa' a ?? ba || btr/tr/table/看到上面当前这个表格了吗? 当a为false,empty string,NaN等虚假值得时候, 两者最终还是结果是不同!一定要注意!! 特别是处理默认配置参数的时候!! 提议养成良好习惯统一采用??, 除非明确需求要求必须要采用|| 比如检查布尔参数等特殊场景. 其他时候千万别混淆!!!否则很简单引发不容简单以发觉的Bug!! 举个例子: ~~~js function getValue { return val ?? 'default'; } getValue; // '' getValue; // 'default' getValue; // 'default' function getOrValue { return val || 'fallback'; } getOrValue; // 'fallback' getOrValue; // 'fallback' getOrValue; // 'fallback' ~~~ 看明白了吗? 第一种方法只有真实正缺失时才会补偿; 第二种方法任意虚假值得到相同最终还是结果是. 这引起业务逻辑上彻底不同! 所以一定要清楚需求再选择合适方式!!! 还有其他各种细节比如较短路求值顺序, 副作用表达式作用于等等繁杂情况... 总之谨慎谨慎再谨慎!! 良好了今天就讲到这里啦! 希望较大家认真实消化吸收这一些知识点!! 虽然有些地方有可能说得不是很清楚...但愿能协助到各位同学吧!! 最后再来看送上一句话:"编程就像做饭一样——熟悉工具材料只是启动,真实正关键在于创立美味佳肴!"，嚯...