3

Объясните как работает алгоритм деструктурирующего присваивания. Я решил проверить поведение, но не могу понять, почему консоль выдает именно такие результаты.

Прежде чем задавать вопрос, я ознакомлялся со всеми источниками, кроме самой спецификации, ибо она сложная для восприятия, и я не знаю английский.

Источники: ES6: Реструктуризующее присваивание, Деструктуризация, Деструктурирующее присваивание.

1

var {a,aa,...aaa} = [2, 4, 23];

console.log(a, aa, aaa);

2

var [a,aa,...aaa] = {a:2, aa: 4, aaa: 23};

console.log(a, aa, aaa);

UPD: Воспользовался Babel.js, может он как - то поможет.

9
  • Ты где видел подобные идентификаторы [a,aa,...aaa] и {a,aa,...aaa}? это что за конструкция?
    – Air
    Commented 16 дек. 2017 в 15:48
  • @Air важно то как ведет себя интерпретатор и по какому алгоритму. Commented 16 дек. 2017 в 15:59
  • Виталик, я не понимаю, что ты именно хочешь... Ты объясни, чего хочешь добиться?
    – Air
    Commented 16 дек. 2017 в 16:05
  • @Air Объясните как работает алгоритм деструктурирующего присваивания. Commented 16 дек. 2017 в 16:44
  • Виталик, благодарю за вопрос, это ECMA6... Благодаря тебе щас сижу читаю)))) много интересно...
    – Air
    Commented 16 дек. 2017 в 16:44

3 ответа 3

7

var {a,aa,...aaa} = [2, 4, 23];

var src = [2, 4, 23];
var a, aa, aaa;

a = src.a;

aa = src.aa;

aaa = {};
for (var key in src)
  if (key !== 'a' && key !== 'aa' && src.hasOwnProperty(key))
    aaa[key] = src[key];

console.log(a, aa, aaa);

В таком поведении можно убедиться следующим образом:

var {a, b, ...rest} = {
  __proto__: {
    b: 2, // декомпозиция в переменную
    d: 4  // исчезает, т. е. НЕ попадает в rest
  },
  a: 1, // декомпозиция в переменную
  c: 3  // попадает в rest
}

console.log(a, b, rest)

Если хочется потрошить массив как объект, то можно использовать декомпозицию с переименованием - ведь числа не могут быть иментами переменных, но обращаю внимание, что в aaa всё равно объект, а не массив:

var { 0:a, 1:aa, ...aaa } = [2, 4, 23];
console.log(a, aa, aaa);

var [a,aa,...aaa] = {a:2, aa: 4, aaa: 23};

var src = {a:2, aa: 4, aaa: 23};
var a, aa, aaa;

var i = 0;
aaa = [];
for (var x of src) { // Упадёт прямо на of
  switch (i++) {
    case 0:
      a = x;
      break;
    case 1:
      aa = x;
      break;
    default:
      aaa.push(x);
  }
}

console.log(a, aa, aaa);

Через [] можно деструктуризировать только итерируемые объекты:

var src = { *[Symbol.iterator]() { yield 2; yield 4; yield 23; } };
var a, aa, aaa;

var i = 0;
aaa = [];
for (var x of src) {
  switch (i++) {
    case 0:
      a = x;
      break;
    case 1:
      aa = x;
      break;
    default:
      aaa.push(x);
  }
}

console.log(a, aa, aaa);

PS: А вообще лучше всё делать по-человечески:

var [a, aa, ...aaa] = [2, 4, 23];
console.log(a, aa, aaa);

var {a, aa, ...aaa} = {a:2, aa: 4, aaa: 23};
console.log(a, aa, aaa);

6
  • То поведение которое вы сымитировали, соответствует алгоритму в спецификации, если да, то все понятно. Будьте добры, поясните как работает этот тип данных var src = { *[Symbol.iterator]() { yield 2; yield 4; yield 23; } };, а то я с ним сталкивался, но не особо понимаю эту сущность. И воспользуясь случаем, хотел бы у вас спросить, как работают встроенные(native code) функции в js, если они написаны на C++, но в среде браузера работаю на ура, но некоторые не возможно cимитировать в контексте js по типу call, apply. Commented 18 дек. 2017 в 12:14
  • Думаю, должно соответствовать, но я не сверял со спецификацией при ответе. Кстати, там ещё вложенная деструктуризация и значения по умолчанию есть, так что рассмотрена только часть, затронутая в твоём вопросе. А генераторы - это довольно большая тема, по которой можно задать отдельный вопрос. Про си++ вообще не понял вопроса.
    – Qwertiy
    Commented 18 дек. 2017 в 12:21
  • Есть стандартные методы в js такие как apply, call, но их съимитировать невозможно, так как допуска к контексту нету и написать свой метод не возможно, ибо js написан на C++. Вопрос заключается в том, как эти методы работаю, если их повторить нельзя, но при этом они работают в браузере. Commented 18 дек. 2017 в 12:28
  • Кстати, там ещё вложенная деструктуризация и значения по умолчанию есть. Можете более детальней разъяснить, а то не могу представить как это выглядит. Commented 18 дек. 2017 в 12:31
  • var { a, b: {c, d, ...x}, e: [f, g, ...y], ...z } = { a:1, b:{c:2,d:3,u:-1,v:-2}, e:[4,5,-3,-4], w:{q:32}}; console.log(a,c,d,x,f,g,y,z);
    – Qwertiy
    Commented 18 дек. 2017 в 12:39
3

В обоих случаях поведение непонятное так как вы объект пытаетесь пропихнуть в массив и наоборот.

В документации смотрим синтаксис:

var a, b, rest;
[a, b] = [1, 2];
console.log(a); // 1
console.log(b); // 2

[a, b, ...rest] = [1, 2, 3, 4, 5];
console.log(a); // 1
console.log(b); // 2
console.log(rest); // [3, 4, 5]

({a, b} = {a:1, b:2});
console.log(a); // 1
console.log(b); // 2

({a, b, ...rest} = {a:1, b:2, c:3, d:4}); 

Тут нету варианта деструктуризации массива в объект и наоборот. Справа и слева во всех примерах одинаковые скобочки, то есть массив деструктурируется в массив, а объект в объект.

Вот конструкция которая работает как и предполагается, обратите снимание на скобочки:

var [a,aa,...aaa] = [2, 4, 23, 144];
console.log(a, aa, aaa);

Пункт 1. Запускаем babel и получаем код:

var _ref = [2, 4, 23],
a = _ref.a,
aa = _ref.aa,
aaa = _objectWithoutProperties(_ref, ["a", "aa"]);

В a мы кладём ref.a так как _ref это массив то ref.a не задан. Тоже самое с aa. Теперь смотрим aaa,в него мы кладём все значения кроме a и aa, но так как a и aa не заданы, то на выходе получаем все три значения.

Подводим итог, в a и aa ничего не кладётся, так как справа у массива нету переменной с названием a и aa, а в aaa мы кладём всё что осталось.

7
  • Вот как ваш ответ отвечает на мой вопрос? Я в источниках указал 3 статьи на эту тему и прекрасно знаю как нужно использовать деструктуризацию. Моя задача понять механизм, что в следствии ответит на вопрос почему консоль выводит именно такие логи. Я осознано написал такие примеры, но вместо того, что бы объяснить что происходит, мне пишут как нужно правильно использовать деструктуризацию. Прежде чем отвечать, прочтите внимательно вопрос. Commented 16 дек. 2017 в 19:53
  • 1
    @ВиталикЧерный что вы знаете, мне не известно из вопроса. Я добавил в ответ разъяснение сделанное из babel компиляции кода. Commented 16 дек. 2017 в 21:09
  • читайте внимательно вопрос. В источниках я указал статьи, и там даже для самого отсталого по примерам будет наглядно понятно как работает деструктуризация. Раз я знаю что такое babel, то это что - то говорит. Commented 16 дек. 2017 в 21:41
  • 1
    @ВиталикЧерный и что это повод меня минусовать? Я вам помочь пытаюсь... и да, я написал по первому пункту почему работает именно так. Commented 16 дек. 2017 в 21:43
  • 1
    "Тут нету варианта деструктуризации массива в объект и наоборот." - это утверждение неверное, хотя в остальном ответ хороший.
    – Qwertiy
    Commented 16 дек. 2017 в 22:36
1

Я, прочитав даже одну статью на MDN, понял суть.
Для массивов: Не важно, как был получен массив(многих запутают переменни и функции в примерах на MDN), вся суть в то, что присваивание происходит в том же порядке, что переменные в первом массиве:

var [a, b, c]=[vl1,vl2,vl3]
a->vl1
b->vl2
c->vl3

Если в правом массиве больше значений, чем в левом, то лишние просто не используются, либо помещаются в переменную с оператором spread (...)

var [a, b, c, ...d]=[vl1,vl2,vl3,vl4,vl5]
a->vl1
b->vl2
c->vl3
d->[vl4,vl5]

Для объектов:

Практически тоже самое, только значение помещается в переменные по ключам свойств:

var {a,c,b}={a:1,b:2,c:3}
a->1
b->2
c->3

var {a,c,b,...w}={a:1,b:2,c:3,d:10,e:12}
a->1
b->2
c->3
w->{d:10,e:12}

В обоих случаях лишние переменные в левом массиве будут объявлены со значением undefined

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.