javascript - 在 JavaScript 中为 const 赋值从右到左与从左到右

Question

我正在查看一个 react 代码库，在那里我看到了这种类型的代码片段

1

const SomeComponent= function(props) {
      const{
        child,
        style,
        disable,
        ...otherParam
      } = props;

      return(someOtherComponent);
    }

与

有什么不同吗？

2

const SomeComponent= function(props) {
      const props = {
        child,
        style,
        disable,
        ...otherParam
      };

      return(someOtherComponent);
    }

或

3

const SomeComponent= function(props) {
      props = {
        child,
        style,
        disable,
        ...otherParam
      };

      return(someOtherComponent);
    }

我相信3代码段将值分配给作为函数中参数的现有参数，而2和3可能相同，这是正确的理解吗？

如果没有，那么有人可以向我解释这种分配的相关逻辑以及这些将值分配给常量的方法的正确技术术语吗？

Answer 1

首先要解决任何疑问:赋值总是从右到左完成，就像在“plain olde JS”和大多数编程语言中一样。

然而，在 ES6 中，您有很多新语法来简化赋值。

也许你会发现一些“对象结构”位于左侧时感到惊讶。

当变量名称与属性名称相同时，混合了所谓的解构和一些语法糖，它有助于同时分配许多变量，通过将它们“从”中取出一个对象(或一个数组!)，

这并不特定于const，它对任何赋值都有效，并且此语法也可用于函数参数。

<小时/>

1:解构

(从右侧的一个对象或一个数组一次为左侧分配多个值)

示例:

// here a and b take the value from the source.a and source.b, respectively

const source = { a: 1, b: 2, c: 3}
const {a, b} = source
console.log(a,b)

<小时/>

// same for arrays
// here a and b have taken the first and the second value of the source array, repectively.

const source = [1, 2, 3]
const [a, b] = source
console.log(a,b)

<小时/>

// and you can use `...` to get *all the other values*
// here a will take the first value, and b will get all the other values, which is `[2, 3]`

const source = [1, 2, 3]
const [a, ...b] = source
console.log(a,b)

<小时/>

2 和 3:分配的对象字面量

它们几乎是普通的 ES5 JavaScript 对象赋值，带有一些语法糖以避免重复 name: name。

左侧的 props 被分配了一个新对象，其中包含右侧创建的对象垃圾。

<小时/>

2 和 3 之间的唯一区别在于，在示例 2 中，在函数作用域中创建了一个新的绑定(bind) const props，这实际上隐藏了 props从参数。

在示例 3 中，作为参数的现有 props 被变异以分配新值。

老实说，我认为示例 2 是一个编程错误。

无论如何，2和3都与这个“伪javascript”相同:

// here we susppose that there are some exiting `child` `style` `disable` variable, and an array `otherParam`
props = {
    child: child,
    style: style,
    disable: disable,
    otherParam: /* an array which is a copy of an existing "otherParam" array , with spread operator*/
  };

上面是通过保持相同名称从现有变量创建新对象的快捷语法。