elementos - lista de objetos javascript
Convertir matriz en matriz de objetos con reducir (10)
optimizedRoute = [''Bengaluru'', ''Salem'', ''Erode'', ''Tiruppur'', ''Coimbatore'']
result = [
{start: bengaluru, end: salem},
{start: salem, end: erode},
{start: erode, end: tiruppur},
{start: tiruppur, end: coimbatore},
]
Quiero convertir optimizedRoute
al resultado. Quiero hacer esto con ES6 .reduce()
. Esto es lo que he intentado:
const r = optimizedRoute.reduce((places, place, i) => {
const result: any = [];
places = []
places.push({
startPlace: place,
endPlace: place
});
// result.push ({ startplace, endplace, seats: 4 });
// console.log(result);
return places;
}, {});
console.log(r)
Aquí hay un ejemplo con reduce
. ¡No estoy seguro de que esta sea la forma más natural de hacer esto!
Usar reduce
siente bastante excesivo y en ese tipo de caso (pero eso es solo mi opinión), donde naturalmente uso un índice, bueno, prefiero un bucle simple.
const optimizedRoute = [''Bengaluru'', ''Salem'', ''Erode'', ''Tiruppur'', ''Coimbatore''];
let startCity;
const result = optimizedRoute.reduce((acc, city) => {
if(startCity) {
acc.push({start: startCity, end: city});
}
startCity = city;
return acc;
}, []);
console.log(result);
El siguiente código utiliza el Spread operator
, el Ternary operator
y Array.reduce
.
const optimizedRoute = [
''Bengaluru'',
''Salem'',
''Erode'',
''Tiruppur'',
''Coimbatore'',
];
// Look if we are at dealing with the last value or not
// If we do only return the constructed array
// If we don''t, add a new value into the constructed array.
// tmp is the array we are constructing
// x the actual loop item
// xi the index of the item
const lastItemIndex = optimizedRoute.length - 1;
const ret = optimizedRoute.reduce((tmp, x, xi) => xi !== lastItemIndex ? [
...tmp,
{
start: x,
// We access to the next item using the position of
// the current item (xi)
end: optimizedRoute[xi + 1],
},
] : tmp, []);
console.log(ret);
Otro enfoque es utilizar el método de map
en combinación con la slice
. Para la función de map
, debe pasar una función de callback
como argumento que se aplicará a cada elemento de su matriz dada.
optimizedRoute = [''Bengaluru'', ''Salem'', ''Erode'', ''Tiruppur'', ''Coimbatore'']
var result = optimizedRoute
.slice(0, -1)
.map((item, index) => ({start : item, end : optimizedRoute[index + 1]}));
console.log(result);
Puede usar reduce
para iniciar y finalizar parte de la ruta y devolver el final para el siguiente inicio.
getParts = a => ( // take a as array and return an IIFE
r => ( // with an initialized result array
a.reduce((start, end) => ( // reduce array by taking two values
r.push({ start, end }), // push short hand properties
end // and take the last value as start value for next loop
)),
r // finally return result
)
)([]); // call IIFE with empty array
const getParts = a => (r => (a.reduce((start, end) => (r.push({ start, end }), end)), r))([]);
var optimizedRoute = [''Bengaluru'', ''Salem'', ''Erode'', ''Tiruppur'', ''Coimbatore'']
console.log(getParts(optimizedRoute));
.as-console-wrapper { max-height: 100% !important; top: 0; }
@EDIT Grégory NEUT agregando explicaciones
// Two thing to know first :
// When no initial value is provided,
// Array.reduce takes the index 0 as first value and start to loop at index 1
// Doing (x, y, z)
// Will execute the code x, y and z
// Equivalent to :
// x;
// y;
// z;
let ex = 0;
console.log((ex = 2, ex = 5, ex = 3));
// So about the code
const getParts = (a) => {
// We are creating a new function here so we can have an array where to
// push data to
const func = (r) => {
// Because there is no initial value
//
// Start will be the value at index 0 of the array
// The loop is gonna start at index 1 of the array
a.reduce((start, end) => {
console.log(start, end);
r.push({
start,
end,
});
return end;
});
return r;
};
return func([]);
};
// Equivalent
const getPartsEquivalent = (a) => {
const r = [];
// Because there is no initial value
//
// Start will be the value at index 0 of the array
// The loop is gonna start at index 1 of the array
a.reduce((start, end) => {
console.log(start, end);
r.push({
start,
end,
});
return end;
});
return r;
};
var optimizedRoute = [''Bengaluru'', ''Salem'', ''Erode'', ''Tiruppur'', ''Coimbatore'']
console.log(getPartsEquivalent(optimizedRoute));
.as-console-wrapper {
max-height: 100% !important;
top: 0;
}
Realmente no entiendo el requisito "con reducción", ya que el código correspondiente que utiliza un bucle se puede leer de inmediato y no requiere explicación:
const optimizedRoute = [''Bengaluru'', ''Salem'', ''Erode'', ''Tiruppur'', ''Coimbatore''];
const result = new Array(optimizedRoute.length - 1);
for (let i = 0; i < result.length; ++i) {
result[i] = {
start: optimizedRoute[i],
end: optimizedRoute[i + 1]
};
}
console.log(result)
Es divertido hacer cosas inteligentes a veces, ¡pero algunas de las respuestas son muy complicadas en comparación con esto!
Simplifiqué la respuesta de nina scholz. Según la idea de nina, use reducir para obtener parte de inicio y final de la ruta y devolver el final para el siguiente inicio
getParts = a => {
const result = [];
a.reduce((start, end) => {
result.push({ start, end });
return end;
});
return result;
};
var optimizedRoute = [''Bengaluru'', ''Salem'', ''Erode'', ''Tiruppur'', ''Coimbatore''];
console.log(this.getParts(optimizedRoute));
Solución con ReduceRight, si alguien está buscando.
optimizedRoute.reduceRight((acc, d, i, arr) => i == 0 ? acc : [{ start: arr[i -1], end: d }, ...acc] , [])
Ya que pediste reduce
, aquí hay una manera de hacerlo:
let optimizedRoute = [''Bengaluru'', ''Salem'', ''Erode'', ''Tiruppur'', ''Coimbatore'']
let res = optimizedRoute.reduce((accum, item, i)=>{
if(i == optimizedRoute.length - 1)
return accum;
accum.push({start: item, end: optimizedRoute[i+1]})
return accum;
}, [])
console.log(res);
reduce
realmente no encaja a la perfección, ya que no está intentando reducir la matriz a un solo valor.
En un mundo perfecto tendríamos una versión de map
múltiples matrices , generalmente conocida como zip
, que podríamos usar como
const result = zipWith(optimisedRoute.slice(0, -1),
optimisedRoute.slice(1),
(start, end) => ({start, end}));
pero no hay ninguno en JavaScript. La mejor alternativa es map
un rango de índices en la ruta usando Array.from
. Array.from
:
const result = Array.from({length: optimisedRoute.length - 1}, (_, index) => {
const start = optimisedRoute[index];
const end = optimisedRoute[index + 1];
return {start, end};
});
Prefiero la legibilidad sobre el código corto que lo resuelve
optimizedRoute.reduce((routes, city, index) => {
const firstCity = index === 0;
const lastCity = index === optimizedRoute.length - 1;
if (!firstCity) {
routes.last().end = city;
}
if (!lastCity) {
routes.push({ start: city });
}
return routes;
}, []);
Además, esa solución se hizo más corta pero matando la legibilidad (al menos para mí), podría ser:
optimizedRoute.reduce((routes, city) => {
routes.last().start = city;
routes.push({ end: city });
return routes;
}, [{}]).slice(1, -1);
Y sobre el last()
, es una función que normalmente uso para facilitar la lectura:
Array.prototype.last = function() {
return this[this.length - 1]
}