javascript - for-of 循​​环内具有多个参数的 ES6 数组销毁

Question

您能解释一下在遍历数组时如何在 for-of 循​​环中使用多个参数销毁数组吗？

对于一个参数 x，我得到以下(合理的)迭代行为:

for(let [ x ] of ["1", "2", "3"]) {
  console.log(`x=${x}`);
}

output:
x=1
x=2
x=3

但我不知道如何使用两个参数 x 和 y 正确迭代。尝试过:

for(let [ x , y ] of ["1", "2", "3"]) {
  console.log(`x=${x}`);
  console.log(`y=${y}`);
}

output:
x=1
y=undefined
x=2
y=undefined
x=3
y=undefined

和:

for(let [ x , y ] of [["1", "2", "3"]]){
  console.log(`x=${x}`);
  console.log(`y=${y}`);
}

或-

for(let [ x , y ] of [["1", "2", "3", "4"]]){
      console.log(`x=${x}`);
      console.log(`y=${y}`);
    }

which both output:
x=1
y=2

为什么 x,y 不继续遍历数组，所以它们会得到值 3、4？

更新:

在尝试来自 http://es6katas.org/ 的“数组破坏”kata 时遇到了困难.

there 中的最后一次测试就是让这个pass:

  it('in for-of loop', () => {
    for (var [a, b] of [[0, 1, 2]]) {}
    assert.deepEqual([a, b], [1, 2]);
  });

Answer 1

在这个例子中:

for(let [x, y] of ["1", "2", "3"]) {
  console.log(`x=${x}`);
  console.log(`y=${y}`);
}

您迭代了一个字符串数组，其中包含 3 个值，但您尝试将每个值解包为 2 个变量。所以第一个用值启动，第二个用 undefined 启动。

在这个例子中:

for(let [x, y] of [["1", "2", "3", "4"]]){
      console.log(`x=${x}`);
      console.log(`y=${y}`);
    }

你遍历了一个数组数组，但你只有一个内部数组。所以迭代器只运行一次。如果您有 4 个变量，它们将获得值 "1"、"2"、"3"、"4" 分别。但你只给了 2 个，所以只有他们被启动。

你可以试试这个:

for(let [x, y, z, w] of [["1", "2", "3", "4"]]){
      console.log(`x=${x}`);
      console.log(`y=${y}`);
      console.log(`z=${z}`);
      console.log(`w=${w}`);
    }

(中间的例子与上一个完全一样，但每个内部数组中的值更少)

另一方面，如果你有:

for(let [x, y] of [["1", "2"], ["3", "4"]]){
      console.log(`x=${x}`);
      console.log(`y=${y}`);
    }

你会得到:

x=1
y=2
x=3
y=4

更新:要通过您提交的测试，您可以:

// 10: destructuring - array
// To do: make all tests pass, leave the assert lines unchanged!

describe('destructuring arrays makes shorter code', () => {

  it('extract value from array, e.g. extract 0 into x like so `let [x] = [0];`', () => {
    let [firstValue] = [1]; //enclosed in array
    assert.strictEqual(firstValue, 1);
  });

  it('swap two variables, in one operation', () => {
    let [x, y] = ['ax', 'why'];
    [x, y] = [y, x]; //swapped right side of the assignment
    assert.deepEqual([x, y], ['why', 'ax']);
  });

  it('leading commas', () => {
    const all = ['ax', 'why', 'zet'];
    const [,,z] = all; //added one extra leading comma
    assert.equal(z, 'zet');
  });

  it('extract from nested arrays', () => {
    const user = [['Some', 'One'], 23];
    const [[firstName, surname], age] = user; //enclosed as internal array

    const expected = 'Some One = 23 years';
    assert.equal(`${firstName} ${surname} = ${age} years`, expected);
  });

  it('chained assignments', () => {
    let c, d;
    let [a, b] = [c, d] = [1, 2]; //enclosed a,b as array
    assert.deepEqual([a, b, c, d], [1, 2, 1, 2]);
  });

  it('in for-of loop', () => {
    for (var [, a, b] of [[0, 1, 2]]) {} //added extra comma
    assert.deepEqual([a, b], [1, 2]);
  });
});

这不是解决这个问题的唯一方法。