javascript - 为所有元素解构数组内的对象属性

Question

在最基本的形式中，有一个对象数组:

let arr = [
  {val:"a"},
  {val:"b"}
];

如何使用解构，只获取值 ['a', 'b']。

获取第一个值很容易:

let [{val:res}] = arr; //res contains 'a'

获取数组内的所有值可以用rest运算符来完成:

let [...res] = arr; //res contains all objects

结合这些，我希望能够使用:

let [...{val:res}] = arr; //undefined, expected all 'val's (['a', 'b'])

以上返回未定义(在 FF 中测试)。一些进一步的测试似乎表明，在使用对象解构时添加 rest 运算符也不会使用迭代，而是取回原始对象，例如让 [...{length:res}] = arr;//res=2。其他一些试验，例如 let [{val:...res}] = arr; 或 let [{val}:...res] = arr; 产生语法错误。

使用其他方法很容易，例如在数组上使用 map，但大多数情况下，我在解构多个级别时偶然发现了这个问题(一个数组，其对象具有自己的属性，其中包含大批)。因此，我真的想解决如何仅通过解构来完成它的问题。为方便起见:a test fiddle

编辑

如果我未能解释问题的目标，我深表歉意。我不是在寻找特定问题的解决方案，只是为了找到解构时要使用的正确语法。

否则，第一个问题将是:在上面的示例中，为什么 let [...{val:res}] = arr; 不返回所有值([ 'a', 'b']).第二个问题是:在嵌套对象解构中使用剩余运算符的正确语法是什么？ (很确定我在这里混淆了一些定义)。似乎后者不受支持，但我还没有遇到任何不支持(以及为什么)的文档。

Answer 1

Why doesn't let [...{val:res}] = arr; return all values (['a', 'b'])?

您似乎将其余语法与数组理解混淆了。

如果你给[someElements, ...someExpression]赋值，该值被测试为可迭代的，然后将迭代器生成的每个元素分配给相应的 someElements多变的。如果在解构表达式中使用 rest 语法，则会创建一个数组，并运行迭代器直到它结束，同时用生成的值填充数组。然后将该数组分配给 someExpression .

所有这些赋值目标都可以是其他解构表达式(任意嵌套和递归计算)，或者对变量或属性的引用。

所以如果你这样做 let [...{val:res}] = arr , 它将创建一个数组并用 arr 的迭代器中的所有值填充它:

let {val:res} = Array.from(arr[Symbol.iterator]())

现在您可以明白为什么它以 undefined 结尾了。 ，以及为什么使用类似 [...{length:res}] 的东西确实产生了结果。另一个例子:

let [{val:res1}, ...{length: res2}] = arr;
console.log(res1) // 'a'
console.log(res2) // 1 (length of `[{val: 'b'}]`)

How can destructuring be used to obtain only the values ['a', 'b']?

完全没有。使用 map方法。