¿Hay alguna forma de usar map () en una matriz en orden inverso con javascript?

95

Quiero usar la map()función en una matriz de JavaScript, pero me gustaría que funcione en orden inverso.

La razón es que estoy renderizando componentes React apilados en un proyecto Meteor y me gustaría que el elemento de nivel superior se renderice primero mientras que el resto carga las imágenes a continuación.

var myArray = ['a', 'b', 'c', 'd', 'e'];
myArray.map(function (el, index, coll) {
    console.log(el + " ")
});

imprime a b c d epero desearía que hubiera un mapReverse () que imprimierae d c b a

¿Alguna sugerencia?

Robin Newhouse
fuente
2
¿Por qué no haces reversela matriz?
John
2
Para ordenar los elementos, configuro el índice z por el índice de la matriz. Supongo que podría establecer el índice z en negativo.
Robin Newhouse
Suena como una buena idea.
Juan
En una nota al margen, ¿está utilizando realmente la matriz que mapdevuelve? De lo contrario, debería considerarlo forEach.
canon
1
Puede acceder al elemento inverso dentro de la devolución de llamada del mapa:console.log(coll[coll.length - index - 1] + " ")
le_m

Respuestas:

148

Si no desea revertir la matriz original, puede hacer una copia superficial y luego hacer un mapa de la matriz invertida,

myArray.slice(0).reverse().map(function(...
AdamCooper86
fuente
Terminé usando el índice negativo para especificar el índice z, pero en la forma en que enmarqué la pregunta, esta es la más correcta.
Robin Newhouse
3
¿Por qué necesitamos .slice (0)? ¿Por qué no myArray.reverse () en lugar de myArray.slice (0) .reverse ()? Parece que la respuesta para mi comentario está aquí: stackoverflow.com/questions/5024085/…
Haradzieniec
Haradzieniec: va con los detalles de cómo se enmarcó la pregunta original, ya que se necesitaba el orden original para establecer una propiedad css del índice Z, pero se imprimió al revés.
AdamCooper86
No slice(0)es necesario ya que reverse()devuelve una nueva matriz y no modifica la matriz actual. @ AdamCooper86 espero que cambies eso.
Fahd Lihidheb
4
@FahdLihidheb SÍ reverse()modifica la matriz original.
Ferus
20

Sin mutar la matriz en absoluto, aquí hay una solución O (n) de una sola línea que se me ocurrió:

myArray.map((val, index, array) => array[array.length - 1 - index]);
tyborg
fuente
valno se usa aquí, así que no creo que esto sea lo que OP estaba buscando. (sigue siendo una buena solución)
Paul Razvan Berg
Además, el tercer argumento de map () es la matriz en sí
Knut
19

Puedes usar Array.prototype.reduceRight()

var myArray = ["a", "b", "c", "d", "e"];
var res = myArray.reduceRight(function (arr, last, index, coll) {
    console.log(last, index);
    return (arr = arr.concat(last))
}, []);
console.log(res, myArray)

invitado271314
fuente
noice (si está buscando realizar una reducción de todos modos) - MDN: El método reduceRight () aplica una función contra un acumulador y cada valor de la matriz (de derecha a izquierda) para reducirlo a un solo valor.
TamusJRoyce
8

Con función de devolución de llamada con nombre

const items = [1, 2, 3]; 
const reversedItems = items.map(function iterateItems(item) {
  return item; // or any logic you want to perform
}).reverse();

Taquigrafía (sin función de devolución de llamada con nombre) - Sintaxis de flecha, ES6

const items = [1, 2, 3];
const reversedItems = items.map(item => item).reverse();

Aqui esta el resultado

ingrese la descripción de la imagen aquí

Harry
fuente
El mapa se está utilizando como copia superficial
TamusJRoyce
7

Otra solución podría ser:

const reverseArray = (arr) => arr.map((_, idx, arr) => arr[arr.length - 1 - idx ]);

Básicamente trabajas con los índices de matriz

Madeo
fuente
2
Esto parece una forma extraña de hacerlo, pero el enfoque reduceRight también es extraño si desea acceder al índice además del elemento, realmente no quiere hacer una reducción, etc. En mi caso, este fue el la solución más limpia.
RealHandy
1
Si necesita trabajar más dentro del mapa, usar arr [...] no requiere una segunda copia o manipular la matriz original. Olvidé el tercer parámetro. ¡Qué estaba buscando!
TamusJRoyce
6

Prefiero escribir la función mapReverse una vez y luego usarla. Además, esto no necesita copiar la matriz.

function mapReverse(array, fn) {
    return array.reduceRight(function (result, el) {
        result.push(fn(el));
        return result;
    }, []);
}

console.log(mapReverse([1, 2, 3], function (i) { return i; }))
// [ 3, 2, 1 ]
console.log(mapReverse([1, 2, 3], function (i) { return i * 2; }))
// [ 6, 4, 2 ]
edi9999
fuente
1
function mapRevers(reverse) {
    let reversed = reverse.map( (num,index,reverse) => reverse[(reverse.length-1)-index] );
    return reversed;
}

console.log(mapRevers(myArray));

I Pasas la matriz para mapear Revers y en la función devuelves la matriz invertida. En el mapa cb, simplemente toma los valores con el índice contando desde 10 (longitud) hasta 1 de la matriz pasada

Simone Westphal
fuente
Una explicación por escrito de lo que hace este código puede ser útil.
Pro Q
0

Aquí está mi solución de TypeScript que es tanto O (n) como más eficiente que las otras soluciones al evitar una ejecución a través de la matriz dos veces:

function reverseMap<T, O>(arg: T[], fn: (a: T) => O) {
   return arg.map((_, i, arr) => fn(arr[arr.length - i - 1]))
}

En JavaScript:

const reverseMap = (arg, fn) => arg.map((_, i, arr) => fn(arr[arr.length - 1 - i]))

// Or 

function reverseMap(arg, fn) {
    return arg.map((_, i, arr) => fn(arr[arr.length - i - 1]))
}
Jack
fuente
-1

Puede hacer myArray.reverse () primero.

var myArray = ['a', 'b', 'c', 'd', 'e'];
myArray.reverse().map(function (el, index, coll) {
    console.log(el + " ")
});
dannielum
fuente
Esa sería mi solución en general, pero en la configuración que estoy usando, la tarjeta superior se coloca con el último índice. Supongo que una mejor indexación podría resolver el problema.
Robin Newhouse
16
Solo como una nota, esto revertirá la matriz original en su lugar, lo que significa que alterará el orden de la matriz de forma destructiva.
AdamCooper86
-2

Una vieja pregunta, pero para los nuevos espectadores, esta es la mejor manera de invertir la matriz usando map

var myArray = ['a', 'b', 'c', 'd', 'e'];
[...myArray].map(() => myArray.pop());
Duong Thanh Hop
fuente
esto modifica la matriz original
TamusJRoyce
tal vez quisiste decir [...myArray].map((_, _, arr) => arr.pop());:?
Madeo