有没有一种方法可以用 javascript 在数组上以相反的顺序使用 map () ？

我想在 javascript 数组上使用 map()函数，但是我希望它以相反的顺序操作。

原因是，我渲染堆叠反应组件在流星项目，并希望顶级元素渲染第一，而其余载入图像如下。

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

打印出 a b c d e，但我希望有一个地图反向() ，打印出 e d c b a

有什么建议吗？

147642 次浏览
小开

你可以先做 myArray。

var myArray = ['a', 'b', 'c', 'd', 'e'];
myArray.reverse().map(function (el, index, coll) {
console.log(el + " ")
});
小开
最佳答案

如果你不想反转原始数组你可以做一个浅拷贝然后映射反转的数组,

myArray.slice(0).reverse().map(function(...
小开

你可以使用 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)

小开

我更喜欢编写一次 map 反向函数，然后使用它。 而且这也不需要复制数组。

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 ]
小开

另一个解决方案可能是:

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

基本上就是处理数组索引

小开

根本没有对数组进行变异，下面是我想出的一行 O (n)解决方案:

myArray.map((val, index, array) => array[array.length - 1 - index]);
小开

使用命名回调函数

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

速记(没有命名回调函数)-箭头语法，ES6

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

结果是这样的

enter image description here

小开

这是一个老问题，但对于新的查看器来说，这是使用 map 反向数组的最佳方法

var myArray = ['a', 'b', 'c', 'd', 'e'];
[...myArray].map(() => myArray.pop());
小开

下面是我的 TypeScript 解决方案，它既是 O (n) ，又比其他解决方案更有效，因为它可以防止在数组中运行两次:

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

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


console.log(mapRevers(myArray));

将数组传递到 map Revers，并在函数中返回反向数组。在 map cb 中，您只需从传递的数组中获取索引从10(长度)计数到1的值

小开

我认为把 reverse()键后，map是工作。

tbl_products
.map((products) => (
<div
key={products.pro_id}
class="my-1 px-1 w-full md:w-1/2 lg:my-4 lg:px-4 lg:w-1/4 transform transition duration-500 hover:scale-105"
>
<article class="overflow-hidden rounded-lg border shadow">
<a href="#">
<img
alt="Placeholder"
class="block h-auto w-full px-5 pt-3"
src={products.product_img}
/>
</a>
</article>
</div>
))
.reverse();

对我来说，这是有效的

小开 

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

小开

您只需要在 .map()之前添加 .slice(0).reverse()

students.slice(0).reverse().map(e => e.id)
小开

如果您使用的是一个不可变数组，比如说一个 reducx reduce 状态，那么您可以应用 .reverse()，首先创建一个像下面这样的副本:

const reversedArray = [...myArray].reverse();
//where myArray is a state variable


//later in code
reversedArray.map((item, i)=>doStuffWith(item))
小开

首先，应该创建数组的浅表副本，然后在该副本上使用该函数。

[...myArray].reverse().map(function(...

小开

在代码片段中添加 return () :

YourData.reverse().map(...)

希望能有所帮助


提交答案