在数组内构造所有元素的对象属性 [英] Destructure object properties inside array for all elements

问题描述

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

In its most basic form, having an array of objects:

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

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

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

获得第一个值很简单：

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

使用rest运算符可以获得数组内的所有值：

Obtaining all values inside the array can be done with the rest operator:

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

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

Combining those, I expected to be able to use:

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

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

The above returns undefined (Tested in FF). Some further testing seems to indicate that adding the rest operator when using an object destructuring as well doesn't use the iteration, but gets back the original object, e.g. let [...{length:res}] = arr; //res= 2. Some other trials, such as let [{val:...res}] = arr; or let [{val}:...res] = arr; produce syntax errors.

使用其他方法很容易，例如使用 map 在数组上，但大多数我在解构多个级别（一个包含具有包含数组的属性的对象的数组）时偶然发现了这个问题。因此，我真的想通过解构来解决如何做到这一点。
为方便起见：测试小提琴

It's easy enough to do with other methods, such as using map on the array, but mostly I stumble upon this problem while destructuring multiple levels (an array with objects which have their own property containing an array). Therefore I'm really trying to get around how to do it solely with destructuring. For convenience: a test fiddle

编辑

edit

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

My apologies if I failed to explain the goal of the question. I'm not looking for a solution to a specific problem, only to find the correct syntax to use when destructuring.

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

Otherwise formulated, a first question would be: in the example above, why doesn't let [...{val:res}] = arr; return all values (['a', 'b']). The second question would be: what is the proper syntax to use a rest operator with a nested object destructuring? (pretty sure I've gotten some definitions mixed up here). It seems that the latter is not supported, but I haven't come across any documentation that (and why) it wouldn't be.

推荐答案

为什么不让[... {val：res}] = arr; 返回所有值（ ['a'，'b'] ）？

你似乎混淆了其余的语法使用数组解析。

You seem to confuse the rest syntax with array comprehensions.

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

If you assign a value to [someElements, ...someExpression], the value is tested to be iterable and then each element generated by the iterator is assigned to the respective someElements variable. If you use the rest syntax in the destructuring expression, an array is created and the iterator is ran till its end while filling the array with the generated values. Then that array is assigned to the someExpression.

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

All of these assignment targets can be other destructuring expressions (arbitrarily nested and recursively evaluated), or references to variable or properties.

所以，如果你做，让[... {val：res}] = arr ，它将创建一个数组，并用 arr 的迭代器中的所有值填充该数组：

So if you do let [...{val:res}] = arr, it will create an array and fill that with all the values from the iterator of arr:

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

您现在可以看到为什么最终会出现 undefined ，以及为什么要使用 [.. 。{length：res}] 确实会产生结果。另一个例子：

You can see now why that ends up with undefined, and why using something like [...{length:res}] does yield a result. Another example:

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

如何使用解构来仅获取值 ['a'， 'b'] ？

完全没有。使用 map 方法。

这篇关于在数组内构造所有元素的对象属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！