Apakah ada cara untuk menggunakan map () pada array dalam urutan terbalik dengan javascript?

96

Saya ingin menggunakan map()fungsi tersebut pada array javascript, tetapi saya ingin fungsi tersebut beroperasi dalam urutan terbalik.

Alasannya adalah, saya merender komponen React yang ditumpuk dalam proyek Meteor dan ingin elemen tingkat atas dirender terlebih dahulu sementara sisanya memuat gambar di bawah.

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

mencetak a b c d etetapi saya berharap ada mapReverse () yang dicetake d c b a

Ada saran?

Robin Newhouse
sumber
2
Mengapa Anda tidak reversearray?
John
2
Untuk memesan elemen saya mengatur z-index dengan indeks array. Saya kira saya bisa mengatur z-index menjadi negatif.
Robin Newhouse
Sepertinya ide yang bagus.
Yohanes
Di samping catatan, apakah Anda benar-benar menggunakan array yang mapmengembalikan? Jika tidak, Anda harus mempertimbangkan forEach.
kanon
1
Anda dapat mengakses elemen sebaliknya dalam callback peta:console.log(coll[coll.length - index - 1] + " ")
le_m

Jawaban:

149

Jika Anda tidak ingin membalikkan larik asli, Anda dapat membuat salinan dangkal darinya kemudian memetakan larik terbalik tersebut,

myArray.slice(0).reverse().map(function(...
AdamCooper 86
sumber
Saya akhirnya hanya menggunakan indeks negatif untuk menentukan indeks-z, tetapi dalam cara saya menyusun pertanyaan ini adalah yang paling benar.
Robin Newhouse
3
Mengapa kita membutuhkan .slice (0)? Mengapa bukan myArray.reverse () daripada myArray.slice (0) .reverse ()? Sepertinya jawaban untuk komentar saya ada di sini: stackoverflow.com/questions/5024085/…
Haradzieniec
Haradzieniec - Ini sesuai dengan rincian bagaimana pertanyaan asli dibingkai, di mana pengurutan asli diperlukan untuk menetapkan properti indeks-Z css, tetapi dicetak secara terbalik.
AdamCooper86
Tidak slice(0)diperlukan sebagai reverse()mengembalikan larik baru dan tidak mengubah larik saat ini. @ AdamCooper86 saya harap Anda mengubahnya.
Fahd Lihidheb
4
@FahdLihidheb reverse()TIDAK mengubah array asli.
Ferus
20

Tidak mengubah array sama sekali, berikut adalah solusi O (n) satu baris yang saya buat:

myArray.map((val, index, array) => array[array.length - 1 - index]);
tyborg.dll
sumber
valtidak digunakan di sini, jadi menurut saya ini bukan yang dicari OP? (ini masih merupakan solusi yang baik)
Paul Razvan Berg
Selain itu, argumen ke-3 dari map () adalah array itu sendiri
Knut
19

Kamu bisa memakai 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)

tamu271314
sumber
noice (jika Anda ingin melakukan pengurangan) - MDN: Metode reduceRight () menerapkan fungsi terhadap akumulator dan setiap nilai array (dari kanan ke kiri) untuk menguranginya menjadi satu nilai.
TamusJRoyce
8

Dengan fungsi panggilan balik bernama

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

Singkatan (tanpa fungsi panggilan balik bernama) - Sintaks Panah, ES6

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

Inilah hasilnya

masukkan deskripsi gambar di sini

Harry
sumber
peta digunakan sebagai salinan dangkal
TamusJRoyce
7

Solusi lain bisa jadi:

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

Anda pada dasarnya bekerja dengan indeks array

Madeo
sumber
2
Ini sepertinya cara yang aneh untuk dilakukan, tetapi pendekatan reduceRight juga aneh jika Anda menginginkan akses ke indeks selain elemen, tidak benar-benar ingin melakukan pengurangan, dll. Dalam kasus saya, ini adalah solusi terbersih.
RealHandy
1
Jika Anda perlu melakukan pekerjaan lebih lanjut di dalam peta, menggunakan arr [...] tidak memerlukan salinan kedua atau memanipulasi larik asli. Lupa tentang parameter ke-3. Apa yang saya cari!
TamusJRoyce
6

Saya lebih suka menulis fungsi mapReverse sekali, lalu menggunakannya. Ini juga tidak perlu menyalin array.

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

console.log(mapRevers(myArray));

I Anda meneruskan array untuk memetakan Pembalik dan dalam fungsi Anda mengembalikan array terbalik. Di peta cb Anda cukup mengambil nilai dengan indeks dihitung dari 10 (panjang) ke 1 dari larik yang dilewati

Simone Westphal
sumber
Penjelasan tertulis tentang apa yang dilakukan kode ini mungkin bisa membantu.
Pro Q
0

Berikut adalah solusi TypeScript saya yang O (n) dan lebih efisien daripada solusi lain dengan mencegah run melalui array dua kali:

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

Dalam 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]))
}
Mendongkrak
sumber
-1

Anda bisa melakukan myArray.reverse () terlebih dahulu.

var myArray = ['a', 'b', 'c', 'd', 'e'];
myArray.reverse().map(function (el, index, coll) {
    console.log(el + " ")
});
dannielum
sumber
Itu akan menjadi solusi saya secara umum, tetapi dalam pengaturan saya menggunakan kartu teratas ditempatkan dengan indeks terakhir. Saya kira hanya beberapa pengindeksan yang lebih baik yang bisa menyelesaikan masalah.
Robin Newhouse
16
Hanya sebagai catatan, ini akan membalikkan larik asli pada tempatnya, artinya ini akan mengubah urutan larik secara destruktif.
AdamCooper86
-2

Sebuah pertanyaan lama tetapi untuk pemirsa baru, ini adalah cara terbaik untuk membalikkan larik menggunakan peta

var myArray = ['a', 'b', 'c', 'd', 'e'];
[...myArray].map(() => myArray.pop());
Duong Thanh Hop
sumber
ini mengubah array asli
TamusJRoyce
mungkin Anda berarti: [...myArray].map((_, _, arr) => arr.pop());?
Madeo