Destroy object properties inside the array for all elements

Question

In its main form, having an array of objects:

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

How can you use destructuring to get only the values ['a', 'b'] .

getting the first value is easy:

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

Getting all the values ​​inside the array can be done using the rest statement:

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

By combining those, I expected that I could use:

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

The above returns undefined (checked in FF). Some additional testing seems to indicate that adding a rest statement when using object destructuring also does not use iteration, but returns the original object, for example. let [...{length:res}] = arr; //res= 2 let [...{length:res}] = arr; //res= 2 . Some other tests, such as let [{val:...res}] = arr; or let [{val}:...res] = arr; cause syntax errors.

It is quite simple to do this with other methods, such as using map in an array, but basically I stumble upon this problem while destroying several levels (an array with objects that have their own property that contains the array). So I'm really trying to get around how to do this only with destructuring. For convenience: test script

change

My apologies if I do not explain the purpose of the question. I am not looking for a solution to a specific problem, only to find the correct syntax to use for destruction.

Otherwise, the first question will be: in the example above, why let [...{val:res}] = arr; does not return all values ​​( ['a', 'b'] ). The second question: what is the correct syntax for using the rest operator with the restructuring of nested objects? (pretty sure I have some definitions mixed here). It seems that the latter is not supported, but I have not come across any documentation that (and why) will not.

Answer 1

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

It seems you are confusing the syntax of the rest with an array.

If you assign the value [someElements, ...someExpression] , the value is checked for iterability, and then each element generated by the iterator is assigned to the corresponding variable someElements . If you use the remainder syntax in the destructuring expression, an array is created, and the iterator starts before it finishes, filling the array with the generated values. Then this array is assigned to someExpression .

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

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

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

Now you can see why this ends with undefined , and why using something like [...{length:res}] gives the result. Another example:

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

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

Not at all. Use the map method.

Answer 2

You can destroy nested objects such as

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 3

Besides matching with callback for value

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

you can use deconstructiong inside the parameter list and use only the return value.

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

Answer 4

You can declare an appointment target before a destructuring assignment; for the purpose of destructuring, specify the values ​​of target assignment indices from the source of destructuring

 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); 

Alternatively, you can use the rest element in the target to collect values ​​in the source by including the comma operator in the next object template to return the value pulled from the object

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