Czy istnieje sposób użycia map () na tablicy w odwrotnej kolejności z javascript?

100

Chcę użyć tej map()funkcji na tablicy javascript, ale chciałbym, aby działała w odwrotnej kolejności.

Powodem jest to, że renderuję skumulowane komponenty React w projekcie Meteor i chciałbym, aby element najwyższego poziomu był renderowany jako pierwszy, podczas gdy reszta ładuje obrazy poniżej.

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

drukuje, a b c d eale chciałbym, żeby była wydrukowana mapReverse ()e d c b a

Jakieś sugestie?

Robin Newhouse
źródło
2
Dlaczego nie macie reversetablicy?
Jan
2
Aby uporządkować elementy, ustawiam indeks Z według indeksu tablicy. Przypuszczam, że mógłbym ustawić indeks Z na ujemny.
Robin Newhouse,
Brzmi jak dobry pomysł.
Jan
Na marginesie, czy faktycznie używasz mapzwracanej tablicy ? W przeciwnym razie powinieneś rozważyć forEach.
kanon
1
Możesz uzyskać dostęp do odwrotnego elementu w wywołaniu zwrotnym mapy:console.log(coll[coll.length - index - 1] + " ")
le_m

Odpowiedzi:

158

Jeśli nie chcesz odwracać oryginalnej tablicy, możesz zrobić jej płytką kopię, a następnie zmapować odwróconą tablicę,

myArray.slice(0).reverse().map(function(...
AdamCooper86
źródło
Skończyło się na tym, że użyłem ujemnego indeksu do określenia indeksu z, ale sposób, w jaki sformułowałem pytanie, jest najbardziej poprawny.
Robin Newhouse,
3
Dlaczego potrzebujemy .slice (0)? Dlaczego nie myArray.reverse () zamiast myArray.slice (0) .reverse ()? Wygląda na to, że odpowiedź na mój komentarz jest tutaj: stackoverflow.com/questions/5024085/…
Haradzieniec
Haradzieniec - To się zgadza ze szczegółami dotyczącymi tego, jak zostało sformułowane pierwotne pytanie, ponieważ pierwotna kolejność była potrzebna do ustawienia właściwości css Z-index, ale wydrukowana w odwrotnej kolejności.
AdamCooper86
Nie slice(0)jest potrzebny, ponieważ reverse()zwraca nową tablicę i nie modyfikuje bieżącej tablicy. @ AdamCooper86 Mam nadzieję, że to zmienisz.
Fahd Lihidheb
5
@FahdLihidheb reverse()NIE modyfikuje oryginalnej tablicy.
Ferus
20

W ogóle nie mutując tablicy, oto jedno liniowe rozwiązanie O (n), które wymyśliłem:

myArray.map((val, index, array) => array[array.length - 1 - index]);
tyborg
źródło
valnie jest tutaj używany, więc nie sądzę, aby tego szukał OP? (to wciąż dobre rozwiązanie)
Paul Razvan Berg
dodatkowo trzeci argument funkcji map () to sama tablica
Knut
19

Możesz użyć 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)

gość271314
źródło
noice (jeśli mimo wszystko chcesz wykonać redukcję) - MDN: Metoda reduRight () stosuje funkcję względem akumulatora i każdej wartości tablicy (od prawej do lewej), aby zredukować ją do jednej wartości.
TamusJRoyce
8

Z nazwaną funkcją zwrotną

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

Skrót (bez nazwanej funkcji zwrotnej) - składnia strzałki, ES6

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

Oto wynik

wprowadź opis obrazu tutaj

Złupić
źródło
mapa jest używana jako płytka kopia
TamusJRoyce
7

Innym rozwiązaniem mogłoby być:

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

Zasadniczo pracujesz z indeksami tablic

Madeo
źródło
2
Wydaje się, że to dziwna droga, ale podejście redukujRight jest również dziwne, jeśli chcesz mieć dostęp do indeksu oprócz elementu, tak naprawdę nie chcesz robić redukcji itp. W moim przypadku był to najczystsze rozwiązanie.
RealHandy
1
Jeśli musisz wykonać dalsze prace wewnątrz mapy, użycie arr [...] nie wymaga drugiej kopii ani manipulowania oryginalną tablicą. Zapomniałem o trzecim parametrze. Czego szukałem!
TamusJRoyce
6

Wolę raz napisać funkcję mapReverse, a następnie jej użyć. Nie ma też potrzeby kopiowania tablicy.

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
źródło
1
function mapRevers(reverse) {
    let reversed = reverse.map( (num,index,reverse) => reverse[(reverse.length-1)-index] );
    return reversed;
}

console.log(mapRevers(myArray));

I Przekazujesz tablicę, aby odwzorować Revers, aw funkcji zwracasz odwróconą tablicę. W mapie cb po prostu pobierasz wartości z indeksem liczącym od 10 (długość) do 1 z przekazanej tablicy

Simone Westphal
źródło
Pomocne może być pisemne wyjaśnienie, co robi ten kod.
Pro Q
0

Oto moje rozwiązanie TypeScript, które jest zarówno O (n), jak i bardziej wydajne niż inne rozwiązania, zapobiegając dwukrotnemu uruchomieniu przez tablicę:

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

W 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]))
}
Jacek
źródło
-1

Możesz najpierw wykonać myArray.reverse ().

var myArray = ['a', 'b', 'c', 'd', 'e'];
myArray.reverse().map(function (el, index, coll) {
    console.log(el + " ")
});
dannielum
źródło
To byłoby moje ogólne rozwiązanie, ale w konfiguracji, której używam, górna karta jest umieszczana z ostatnim indeksem. Myślę, że po prostu lepsze indeksowanie mogłoby rozwiązać problem.
Robin Newhouse,
16
Tak jak uwaga, spowoduje to odwrócenie oryginalnej tablicy w miejscu, co oznacza, że ​​spowoduje to destrukcyjną zmianę kolejności tablicy.
AdamCooper86,
-2

Stare pytanie, ale dla nowych widzów jest to najlepszy sposób na odwrócenie tablicy za pomocą mapy

var myArray = ['a', 'b', 'c', 'd', 'e'];
[...myArray].map(() => myArray.pop());
Duong Thanh Hop
źródło
to modyfikuje oryginalną tablicę
TamusJRoyce
może miałeś na myśli [...myArray].map((_, _, arr) => arr.pop());:?
Madeo