JavaScript中const {a={}}=b与let a={}后赋值a=b的区别是什么？

核心逻辑差异 #

• 第一段代码 const {a = {}} = b 是ES6对象解构赋值：
  它的作用是从对象b中提取属性a赋值给同名变量a，仅当b.a的值为undefined时，才会用默认值{}兜底。最终变量a的值等于b.a（或兜底空对象）。
• 第二段代码 let a = {}; a = b 是普通变量赋值：
  先声明变量a赋值为空对象，紧接着直接把整个b对象覆盖赋值给a，最终变量a的值完全等于b本身，和b有没有a属性没有任何关联。

问题原因 #

你第二段代码运行返回空对象，是因为你当前上下文中的b本身就是空对象，直接赋值给a后自然得到空对象。而第一段代码是读取b的a属性，只要b.a存在有效值，就能正常拿到预期值，所以运行符合预期。
另外你第一段代码能正常运行，说明上下文里的b本身是合法的非空对象，不存在解构失败的问题。

举个实际场景对比，假设当前上下文 b = {a: {id: 1, name: "测试"}}：

第一段代码执行后 a 的值为 {id: 1, name: "测试"}，符合取b.a的需求
第二段代码执行后 a 的值为 {a: {id: 1, name: "测试"}}，和预期的b.a完全不同

内容的提问来源于stack exchange，提问作者Rujal