在数组内构造所有元素的对象属性

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'])

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

使用其他方法很容易,例如map在数组上使用,但大多数情况下我在解析多个级别(一个包含自己的属性包含数组的对象的数组)时会偶然发现这个问题.因此,我真的想通过解构来解决如何做到这一点.为方便起见:一个测试小提琴

编辑

如果我没有解释问题的目标,我表示歉意.我不是在寻找特定问题的解决方案,只是为了找到在解构时使用的正确语法.

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

Answer 1

为什么不let [...{val:res}] = arr;返回所有值(['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'}]`)

如何使用解构来获得价值['a', 'b']？

一点也不.使用该map方法.

Answer 2

您可以像这样构造嵌套对象

https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#Nested_object_and_array_destructuring

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

const [{val: valueOfA}, {val: valueOfB}] = arr

console.log(
  valueOfA, valueOfB
)