Existe-t-il un moyen d'utiliser map () sur un tableau dans l'ordre inverse avec javascript?

94

Je veux utiliser la map()fonction sur un tableau javascript, mais je voudrais qu'elle fonctionne dans l'ordre inverse.

La raison en est que je rends des composants React empilés dans un projet Meteor et que je souhaite que l'élément de niveau supérieur soit rendu en premier pendant que le reste charge les images ci-dessous.

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

imprime a b c d emais je souhaite qu'il y ait un mapReverse () qui a imprimée d c b a

Aucune suggestion?

Robin Newhouse
la source
2
Pourquoi pas reversele tableau?
John
2
Pour ordonner les éléments, j'ai défini le z-index par l'index du tableau. Je suppose que je pourrais définir le z-index sur négatif.
Robin Newhouse
Ça semble être une bonne idée.
John
Sur une note latérale, utilisez-vous réellement le tableau qui mapretourne? Sinon, vous devriez envisager forEach.
canon du
1
Vous pouvez accéder à l'élément inverse dans le rappel de carte:console.log(coll[coll.length - index - 1] + " ")
le_m

Réponses:

147

Si vous ne voulez pas inverser le tableau d'origine, vous pouvez en faire une copie superficielle puis mapper le tableau inversé,

myArray.slice(0).reverse().map(function(...
AdamCooper86
la source
J'ai fini par utiliser simplement l'index négatif pour spécifier le z-index, mais de la manière dont j'ai formulé la question, c'est la plus correcte.
Robin Newhouse
3
Pourquoi avons-nous besoin de .slice (0)? Pourquoi pas myArray.reverse () au lieu de myArray.slice (0) .reverse ()? On dirait que la réponse à mon commentaire est ici: stackoverflow.com/questions/5024085/…
Haradzieniec
Haradzieniec - Cela va avec les détails sur la façon dont la question d'origine a été formulée, en ce sens que l'ordre d'origine était nécessaire pour définir une propriété css Z-index, mais imprimé à l'envers.
AdamCooper86
Le slice(0)n'est pas nécessaire car reverse()renvoie un nouveau tableau et ne modifie pas le tableau actuel. @ AdamCooper86 j'espère que vous changez cela.
Fahd Lihidheb
4
@FahdLihidheb reverse()modifie le tableau d'origine.
Ferus le
20

Ne mutant pas du tout le tableau, voici une solution O (n) à une seule ligne que j'ai trouvée:

myArray.map((val, index, array) => array[array.length - 1 - index]);
Tyborg
la source
valn'est pas utilisé ici, donc je ne pense pas que ce soit ce que OP recherchait? (c'est toujours une bonne solution)
Paul Razvan Berg
de plus, le 3ème argument de map () est le tableau lui
Knut
19

Vous pouvez utiliser 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)

invité271314
la source
noice (si vous cherchez quand même à effectuer une réduction) - MDN: La méthode reductionRight () applique une fonction contre un accumulateur et chaque valeur du tableau (de droite à gauche) pour le réduire à une valeur unique.
TamusJRoyce le
8

Avec la fonction de rappel nommé

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

Raccourci (sans fonction de rappel nommée) - Syntaxe de flèche, ES6

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

Voici le résultat

entrez la description de l'image ici

Harry
la source
la carte est utilisée comme une copie peu profonde
TamusJRoyce
7

Une autre solution pourrait être:

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

Vous travaillez essentiellement avec les index de tableau

Madeo
la source
2
Cela semble être une manière étrange de procéder, mais l'approche de réductionRight est également étrange si vous souhaitez accéder à l'index en plus de l'élément, que vous ne voulez pas vraiment faire une réduction, etc. Dans mon cas, c'était le solution la plus propre.
RealHandy
1
Si vous avez besoin de travailler davantage à l'intérieur de la carte, utiliser arr [...] ne nécessite pas une deuxième copie ou la manipulation du tableau d'origine. J'ai oublié le 3ème paramètre. Ce que je cherchais!
TamusJRoyce le
6

Je préfère écrire la fonction mapReverse une fois, puis l'utiliser. De plus, cela n'a pas besoin de copier le tableau.

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
la source
1
function mapRevers(reverse) {
    let reversed = reverse.map( (num,index,reverse) => reverse[(reverse.length-1)-index] );
    return reversed;
}

console.log(mapRevers(myArray));

I Vous passez le tableau à mapper Revers et dans la fonction vous renvoyez le tableau inversé. Dans la carte cb, vous prenez simplement les valeurs avec l'index comptant de 10 (longueur) à 1 à partir du tableau passé

Simone Westphal
la source
Une explication écrite de ce que fait ce code peut être utile.
Pro Q
0

Voici ma solution TypeScript qui est à la fois O (n) et plus efficace que les autres solutions en empêchant une exécution dans le tableau deux fois:

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
la source
-1

Vous pouvez d'abord faire myArray.reverse ().

var myArray = ['a', 'b', 'c', 'd', 'e'];
myArray.reverse().map(function (el, index, coll) {
    console.log(el + " ")
});
dannielum
la source
Ce serait ma solution en général, mais dans la configuration j'utilise la carte du haut est placée avec le dernier index. Je suppose qu'une meilleure indexation pourrait résoudre le problème.
Robin Newhouse
16
Pour rappel, cela inversera le tableau d'origine en place, ce qui signifie qu'il modifiera l'ordre du tableau de manière destructive.
AdamCooper86
-2

Une vieille question mais pour les nouveaux spectateurs, c'est le meilleur moyen d'inverser le tableau à l'aide de la carte

var myArray = ['a', 'b', 'c', 'd', 'e'];
[...myArray].map(() => myArray.pop());
Duong Thanh Hop
la source
cela modifie le tableau d'origine
TamusJRoyce
peut-être que vous vouliez dire [...myArray].map((_, _, arr) => arr.pop());:?
Madeo le