在 javascript right-left vs left-right 中为 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);
    }

我相信 3rd 片段将值分配给作为函数参数的现有参数，而 2 和 3可能是一样的，这样理解对吗？

如果不是那么有人可以向我解释这种赋值的相关逻辑以及这些将值赋给常量的方式的正确技术术语吗？

Answer 1

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

但是在 ES6 中，你有很多新的语法来简化赋值。

也许您会感到惊讶的是，当一些 "object structure" 出现在左侧时。

当变量名称与属性名称相同时，混合了所谓的解构和一些语法糖，它有助于同时分配多个变量时间，给他们 "off from" 个对象（或数组！），

这不是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：对象乱码分配

它们几乎是 vanilla ES5 JavaScript 对象分配，带有少量语法糖以避免重复 name: name。

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

2和3的唯一区别是在示例2中，在函数作用域中创建了一个新的绑定const props，实际上隐藏了参数中的props .

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

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

无论如何，2和3与此相同 "pseudo 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*/
  };

以上是通过保持相同名称从现有变量重新生成新对象的快捷语法。

在 javascript right-left vs left-right 中为 const 赋值

Assigning values to const in javascript right-left vs left-right

javascript

constants

destructuring

variable-assignment

ecmascript-6

1：解构

2 和 3：对象乱码分配