Basically I have an array of objects like
var array = [{x: 10, y: 5, r: 10, ...} ]
There are more fields in the object, but to the point, this is the way I've found to seperate the fields to arrays:
var x = array.map(obj => obj.x);
var y = array.map(obj => obj.y);
// and so on for each field
Works, but seems very inefficient as the number of fields and the array size grows, as this scans the array multiple times. I could use a standard loop, but I do prefer the map() as I think it is more readable in this case. Is it possible to return multiple values from map? I think something like:
var [x, y] = array.map(obj => [obj.x, obj.y]); // should output two arrays
Or anything similar which will be readable (reduce is less readable IMO).
array.entries()
which return an iterator object. How can I implement such functions?You could reduce the array and iterate the objects key/value pairs. Then push the values to the array of the given property.
var array = [{ x: 10, y: 5, r: 10 }, { x: 11, y: 6, r: 11 }],
result = array.reduce((r, o) => {
Object.entries(o).forEach(([k, v]) => (r[k] = r[k] || []).push(v));
return r;
}, Object.create(null));
console.log(result);
.as-console-wrapper { max-height: 100% !important; top: 0; }
So, you were on to the right start with your second attempt:
var [x, y] = array.map(obj => [obj.x, obj.y]);
As you indicate, the first attempt is too inefficient, since you will have to loop through the array multiple times for each field you want to pull out, but you can do everything you want to do using an array's .reduce()
method.
I would do the following:
var [x, y] = array.reduce(
(accum, val) => {
accum[0].push(val.x);
accum[1].push(val.y);
return accum;
},
[ [], [] ]
);
What I'm doing is telling the reducer to initialize the accumulator with an empty array of arrays ([ [], [] ]
), and when it loops through the array, it will put the .x
properties into the first array in the accumulator and the .y
properties into the second array. And thanks to destructuring, x
will be an array of all the .x
properties and y
will be an array of all the .y
properties.
This approach is easy to extend as your fields grow by adding more empty arrays to the initial accumulator object and making sure in the reducer to push those fields into that new object.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With