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

我想在javascript数组上使用

map（）

函数，但我希望它的操作顺序相反

原因是，我正在Meteor项目中渲染堆叠的React组件，希望在其他元素加载下面的图像时首先渲染顶级元素

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

打印出

a b c d e

，但我希望有一个mapReverse（）来打印

e d c b a

有什么建议吗？

你可以先做myArray.reverse（）

---

如果不想反转原始阵列，可以制作其浅层副本，然后映射反转的阵列

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

---

您可以使用

Array.prototype.reduceRight（）

var myArray=[“a”、“b”、“c”、“d”、“e”]；
var res=myArray.reduceRight（函数（arr、last、index、coll）{
日志（最后一个，索引）；
返回（arr=arr.concat（最后一次））
}, []);
log（res，myArray）

我更喜欢编写mapReverse函数一次，然后使用它。 此外，这不需要复制阵列

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();

结果如下

---

这是一个老问题，但对于新观众来说，这是使用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]))
}

---

我将数组传递给map Reverse，然后在函数中返回反向数组。在map cb中，您只需从传递的数组中获取索引计数从10（长度）到1的值

我认为在

map

之后放置

reverse（）

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();

tbl_产品
.map（（产品）=>(
))
.reverse（）；

就我而言，它正在工作

var myArray=['a'，'b'，'c'，'d'，'e']；
var reverseArray=myArray.reverse（）
reverseArray.map（函数（el、index、coll）{
console.log（el+“”）
});
为什么不
反转
数组？要对元素排序，我通过数组索引设置z索引。我想我可以将z-索引设置为负数。听起来是个好主意。顺便说一句，您是否实际使用了
map
返回的数组？否则，你应该考虑<代码>前缀。你可以访问地图回调中的反向元素：<代码>控制台。log（COLL [CLOCK-索引- 1 ] +）这将是我的一般解决方案，但是在安装中，我使用的是顶部卡片，最后一个索引被放置。我想只需要一些更好的索引就可以解决这个问题。注意，这将反转原始数组，这意味着它将破坏性地改变数组的顺序。我最终只是使用负索引来指定z索引，但按照我提出的问题的方式，这是最正确的。为什么我们需要。切片（0）？为什么不是myArray.reverse（）而不是myArray.slice（0.reverse（）？看起来我的评论的答案在这里：Haradzieniec-它与原始问题的框架细节相一致，因为设置Z索引css属性需要原始顺序，但以相反的方式打印。
slice（0）
不需要作为
reverse（）
返回新数组，不修改当前数组@AdamCooper86我希望你能改变这一点。@FahdLihidheb
reverse（）
确实修改了原始数组。这似乎是一种奇怪的方式，但是如果你想访问除元素之外的索引，不想做reduce等，reduceRight方法也很奇怪。在我的例子中，这是最干净的解决方案。如果您需要在映射内做进一步的工作，使用arr[…]不需要第二个副本或操作原始数组。忘记了第三个参数。我在找什么<这里没有使用code>val

，所以我认为这不是OP想要的？（这仍然是一个很好的解决方案）此外，map（）的第三个参数是数组本身。这修改了原始数组可能是指：

[…myArray].map（（，，arr）=>arr.pop（））？映射被用作浅复制这是brilliantnoice（如果您希望执行reduce）-MDN:reduceRight（）方法对累加器和数组的每个值应用函数（从右到左）将其减少为单个值。有关此代码所做操作的书面解释可能会有所帮助。
reverse
也会将
myArray
就地反转。作为（意外的）副作用，您的
myArray
在执行这些代码后会反转。同样的问题类似于
function mapRevers(reverse) {
    let reversed = reverse.map( (num,index,reverse) => reverse[(reverse.length-1)-index] );
    return reversed;
}

console.log(mapRevers(myArray));

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();