Назначение значений для const в javascript справа налево против слева направо - PullRequest
Новая
       20

Назначение значений для const в javascript справа налево против слева направо

0 голосов
/ 06 ноября 2018

Я смотрел на базу кода реагирования, где я видел этот фрагмент кода

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 rd-фрагмент присваивает значение существующему параметру, являющемуся аргументом функции, в то время как 2 и 3 могут быть одинаковыми, верно ли это понимание?

Если нет, то может ли кто-нибудь объяснить мне соответствующую логику такого присвоения и исправить технический термин для этих способов присвоения значений константам?

1 Ответ

0 голосов
/ 06 ноября 2018

Сначала для разрешения любых сомнений: Назначение всегда выполняется справа налево , как в «обычном старом 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 в области действия функции создается новая привязка 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*/
  };

Выше приведен сокращенный синтаксис для создания новых объектов из существующих переменных с сохранением тех же имен.

...