JavaScript链式赋值结合解构赋值运行结果异常问题咨询

问题原因 #

• JavaScript赋值运算为右结合规则，形如a = b = c的连续赋值等价于a = (b = c)，且每个赋值表达式的返回值为等号右侧的取值。
• 你给出的代码执行顺序如下：
  1. 先执行括号内的[response] = [{ id: 1 }]，这是数组解构赋值，会将右侧数组的第一个元素{ id: 1 }赋值给变量response，该赋值表达式的返回值为右侧的[{ id: 1 }]数组。
  2. 再执行var { id } = 刚才的返回值，也就是尝试用对象解构的方式从[{ id: 1 }]这个数组上读取id属性，数组本身没有名为id的自有属性，因此id最终取值为undefined。

解决方案 #

根据你的使用场景可以选择以下写法：

1. 拆分赋值逻辑，避免解构场景下使用连续赋值（可读性最高）

// 先解构拿到response
var [response] = [{ id: 1 }];
// 再从response里解构id
var { id } = response;
console.log(id); // 输出1

2. 直接使用嵌套数组+对象解构，一行完成取值

var [{ id }] = [{ id: 1 }];
console.log(id); // 输出1

3. 如果需要同时声明response和id两个变量，也可以合并为一行声明

var [response, { id } = response] = [{ id: 1 }];
console.log(response, id); // 输出 {id:1} 1

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