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

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

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

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

编辑

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

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

Answer 1

你可以像这样解构嵌套对象

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
)

Answer 2

除了带有值回调的映射之外

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

console.log(arr.map(o => o.val));

您可以在参数列表中使用 deconstructiong 并仅使用 return 的值。

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

console.log(arr.map(({val}) => val));

Answer 3

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 方法。

Answer 4

你可以在解构赋值之前声明赋值目标；在解构目标中，通过解构源设置赋值目标索引的值

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

let arr2 = [{"foo":1,"arr":[{"val":"a"},{"val":"b"}]}
           , {"foo":2,"arr":[{"val":"c"},{"val":"d"}]}];

let [res1, res2] = [[], []];

[{val: res1[0]}, {val: res1[1]}] = arr1;

[{arr: [{val:res2[0]}, {val:res2[1]}]}
, {arr: [{val:res2[2]}, {val:res2[3]}]}] = arr2;

console.log(res1, res2);

您也可以在目标上使用 rest element 来收集源上的值，方法是将遵循对象模式的 comma 运算符包含到从对象

中提取的 return 值中

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

let [...res] = [({val} = arr[0], val), ({val} = arr[1], val)];

console.log(res)

Answer 5

此时您可以同时使用 For of loop with ES6 Object destructuring。

let arr = [{val:"a"},{val:"b"}];
    
    
    for (const item in arr){
        const {val} = arr[item];
        console.log(val);
    }

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

Destructure object properties inside array for all elements

javascript

destructuring