Gibt es eine Möglichkeit, map () in einem Array in umgekehrter Reihenfolge mit Javascript zu verwenden?

90

Ich möchte die map()Funktion in einem Javascript-Array verwenden, möchte aber, dass sie in umgekehrter Reihenfolge ausgeführt wird.

Der Grund dafür ist, dass ich gestapelte React-Komponenten in einem Meteor-Projekt rendere und möchte, dass das Element der obersten Ebene zuerst gerendert wird, während der Rest die folgenden Bilder lädt.

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

druckt aus, a b c d eaber ich wünschte, es gäbe eine mapReverse (), die gedruckt wurdee d c b a

Irgendwelche Vorschläge?

Robin Newhouse
quelle
2
Warum bist du nicht reversedas Array?
John
2
Um die Elemente zu ordnen, setze ich den Z-Index durch den Array-Index. Ich könnte den Z-Index auf negativ setzen.
Robin Newhouse
Klingt wie eine gute Idee.
John
Verwenden Sie tatsächlich das Array, das mapzurückgibt? Ansonsten sollten Sie berücksichtigen forEach.
Kanon
1
Sie können auf das umgekehrte Element innerhalb des console.log(coll[coll.length - index - 1] + " ")
Kartenrückrufs

Antworten:

138

Wenn Sie das ursprüngliche Array nicht umkehren möchten, können Sie eine flache Kopie davon erstellen und dann das umgekehrte Array zuordnen.

myArray.slice(0).reverse().map(function(...
AdamCooper86
quelle
Am Ende habe ich nur den negativen Index verwendet, um den Z-Index anzugeben, aber in der Art, wie ich die Frage formuliert habe, ist dies die richtigste.
Robin Newhouse
2
Warum brauchen wir .slice (0)? Warum nicht myArray.reverse () anstelle von myArray.slice (0) .reverse ()? Die Antwort auf meinen Kommentar scheint
Haradzieniec
Haradzieniec - Dies hängt mit den Angaben zum Rahmen der ursprünglichen Frage zusammen, da die ursprüngliche Reihenfolge zum Festlegen einer CSS-Eigenschaft für den Z-Index erforderlich war, jedoch in umgekehrter Reihenfolge gedruckt wurde.
AdamCooper86
Das slice(0)wird nicht als reverse()Rückgabe eines neuen Arrays benötigt und ändert das aktuelle Array nicht. @ AdamCooper86 Ich hoffe du änderst das.
Fahd Lihidheb
2
@FahdLihidheb reverse()Ändert das ursprüngliche Array.
Ferus
18

Sie können verwenden 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)

guest271314
quelle
noice (wenn Sie trotzdem eine Reduzierung durchführen möchten) - MDN: Die Methode reduRight () wendet eine Funktion auf einen Akkumulator und jeden Wert des Arrays (von rechts nach links) an, um ihn auf einen einzelnen Wert zu reduzieren.
TamusJRoyce
17

Hier ist eine einzeilige O (n) -Lösung, die ich mir ausgedacht habe:

myArray.map((val, index, array) => array[array.length - 1 - index]);
Tyborg
quelle
valwird hier nicht verwendet, also glaube ich nicht, dass dies das ist, wonach OP gesucht hat? (Es ist immer noch eine gute Lösung)
Paul Razvan Berg
Zusätzlich ist das dritte Argument von map () das Array selbst
Knut
8

Mit benannter Rückruffunktion

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

Kurzform (ohne benannte Rückruffunktion) - Pfeilsyntax, ES6

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

Hier ist das Ergebnis

Geben Sie hier die Bildbeschreibung ein

Harry
quelle
Karte wird als flache Kopie verwendet
TamusJRoyce
7

Eine andere Lösung könnte sein:

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

Sie arbeiten grundsätzlich mit den Array-Indizes

Madeo
quelle
2
Dies scheint ein seltsamer Weg zu sein, aber der reduRight-Ansatz ist auch seltsam, wenn Sie zusätzlich zum Element Zugriff auf den Index wünschen, nicht wirklich eine Reduktion durchführen möchten usw. In meinem Fall war dies der sauberste Lösung.
RealHandy
1
Wenn Sie weitere Arbeiten innerhalb der Karte ausführen müssen, erfordert die Verwendung von arr [...] keine zweite Kopie oder Bearbeitung des ursprünglichen Arrays. Ich habe den 3. Parameter vergessen. Was ich gesucht habe!
TamusJRoyce
6

Ich schreibe die mapReverse-Funktion lieber einmal und benutze sie dann. Auch dies muss das Array nicht kopieren.

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
quelle
0

Hier ist meine TypeScript-Lösung, die sowohl O (n) als auch effizienter als die anderen Lösungen ist, indem sie verhindert, dass das Array zweimal durchlaufen wird:

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

In 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
quelle
-1

Sie können zuerst myArray.reverse () ausführen.

var myArray = ['a', 'b', 'c', 'd', 'e'];
myArray.reverse().map(function (el, index, coll) {
    console.log(el + " ")
});
dannielum
quelle
Das wäre im Allgemeinen meine Lösung, aber im Setup, das ich verwende, wird die oberste Karte mit dem letzten Index platziert. Ich denke, nur eine bessere Indizierung könnte das Problem lösen.
Robin Newhouse
16
Nur als Hinweis: Dadurch wird das ursprüngliche Array an Ort und Stelle umgekehrt, was bedeutet, dass die Reihenfolge des Arrays destruktiv geändert wird.
AdamCooper86
-2

Eine alte Frage, aber für neue Betrachter ist dies der beste Weg, um das Array mithilfe der Karte umzukehren

var myArray = ['a', 'b', 'c', 'd', 'e'];
[...myArray].map(() => myArray.pop());
Duong Thanh Hop
quelle
Dies ändert das ursprüngliche Array
TamusJRoyce
Vielleicht meintest du : [...myArray].map((_, _, arr) => arr.pop());?
Madeo