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中测试）。一些进一步的测试似乎表明，在使用对象解构时添加其余运算符也不使用迭代，但是返回原始对象，例如， let [...{length:res}] = arr; //res= 2。其他一些试验（例如let [{val:...res}] = arr;或let [{val}:...res] = arr;会产生语法错误。

使用其他方法很容易，比如在数组上使用map，但大部分我在解构多个级别时遇到这个问题（一个包含自己属性的对象的数组）数组）。因此，我真的想通过解构来解决如何做到这一点。为方便起见：a test fiddle

修改

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

如果另外制定，第一个问题是：在上面的例子中，为什么没有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

＆＃13;

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

＆＃13;

Answer 3

除了使用值回调的映射

let arr = [{ val: "a" }, { val: "b" }];

console.log(arr.map(o => o.val));

你可以在参数列表中使用deconstructiong并仅使用值来返回。

let arr = [{ val: "a" }, { val: "b" }];

console.log(arr.map(({val}) => val));

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运算符以返回从对象中提取的值

let arr = [{val: "a"}, {val: "b"}];

let [...res] = [({val} = arr[0], val), ({val} = arr[1], val)];

console.log(res)

Answer 5

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

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

在数组中为所有元素

5 个答案: