主页 / 问题 / 759151
Accepted
Виталик Черный
Asked:2020-12-16 20:46:52 +0000 UTC2020-12-16 20:46:52 +0000 UTC

解构赋值是如何工作的？

  • 772

解释解构赋值算法是如何工作的。我决定测试这种行为，但我不知道为什么控制台会给出这些结果。

在提出问题之前，我熟悉了所有来源，除了规范本身，因为它很难理解，而且我不懂英语。

资料来源：ES6：重组赋值、解构、解构赋值。

一

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，也许它会有所帮助。

javascript

3 个回答

  1. Best Answer

    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);

    • 7

  2. 在这两种情况下，行为都是不可理解的，因为您试图将对象推入数组，反之亦然。

    有关语法，请参阅文档：

    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);

    Point 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. 现在我们看一下，我们把除了andaaa之外的所有值都放到了\u200b\u200bin 中，但是由于and没有设置，所以我们在输出时得到了所有三个值。aaaaaa

    总而言之，aand中aa没有放入任何内容，因为数组中没有名称为aand的变量aa，aaa我们将剩下的所有内容放入其中。

    • 3

  3. 我什至读过一篇关于 MDN 的文章，理解了本质。
    对于数组：不管数组是如何获得的（MDN 例子中的变量和函数会让很多人感到困惑），关键是赋值发生的顺序与第一个数组中的变量相同：

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

    如果右侧数组中的值比左侧数组中的值多，则根本不使用多余的值，或者将其放在带有扩展运算符的变量中（...）

    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

    • 1

相关问题