React中如何使用解构赋值？能否实现类似f2的紧凑赋值写法？

你遇到的问题是因为JavaScript的语法规则不支持直接在const的解构赋值左侧完成链式变量赋值（也就是const {a,b} = c = obj这种写法）——这里的dataSender没有被声明，而且赋值运算符的结合顺序也会导致语法逻辑不符合预期。不过我们有几种简洁的写法可以达到你想要的效果：

方法1：同一行声明多个变量（最推荐） #

利用逗号操作符在同一个const声明里同时完成对象赋值和解构，既紧凑又符合语法规范：

f2 = () => {
  const dataSender = this.returnStateElement('email', 'password'),
        { email, password } = dataSender;
  console.log(dataSender, email, password);
};

方法2：括号包裹赋值表达式（可读性稍差） #

如果你想把所有操作压缩到一行解构逻辑里，可以用括号包裹整个赋值表达式，引导JavaScript正确解析赋值顺序，但这种写法的可读性不如第一种：

f2 = () => {
  let dataSender;
  const { email, password } = (dataSender = this.returnStateElement('email', 'password'));
  console.log(dataSender, email, password);
};

这里需要先单独声明dataSender，因为const无法同时声明解构变量和外部变量。

为什么原来的f2写法会失败？ #

在你的原代码const { email, password } = dataSender = this.returnStateElement('email', 'password')中：

1. 赋值运算符是右结合的，所以会先执行dataSender = this.returnStateElement(...)，但dataSender没有用const/let声明，严格模式下会直接抛出ReferenceError。
2. 即使忽略声明问题，const关键字只作用于左侧的{ email, password }，无法同时声明dataSender，所以这种写法本质上不符合JavaScript的变量声明规则。

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