有没有办法在javascript上以相反的顺序在数组上使用map（）？

Question

我想在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，但我希望有一个打印e d c b a的mapReverse（）

有什么建议吗？

Answer 1

如果您不想反转原始数组，可以对其进行浅层复制，然后反转数组的映射，

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

Answer 2

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

Answer 3

通过使用spread syntax，您可以使数组比Array.prototype.map和Array.prototype.slice更容易反转。

例如：

{
  const myArray = ['a', 'b', 'c', 'd', 'e'];
  [...myArray].reverse().map(el => console.log(el + " ")); 
}

Answer 4

根本不改变数组，这是我想出的单层O（n）解决方案：

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

Answer 5

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

.Net Standard

Answer 6

具有命名回调功能

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

这是结果

Answer 7

function mapRevers(reverse) {
    let reversed = reverse.map( (num,index,reverse) => reverse[(reverse.length-1)-index] );
    return reversed;
}

console.log(mapRevers(myArray));

I您将数组传递给Revers，然后在函数中返回反向数组。在地图cb中，您只需从传递的数组中获取索引值从10（长度）到1的数字即可

Answer 8

我认为将 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();

就我而言，它正在运行

Answer 9

你只需要在.slice(0).reverse()前加上.map()

Answer 10

这是我的TypeScript解决方案，它通过两次阻止遍历数组来实现O（n）效率，并且比其他解决方案更有效：

PHPMailer

在JavaScript中：

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

Answer 11

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

Answer 12

你可以先做myArray.reverse（）。

Child

Answer 13

一个老问题，但对于新观众来说，这是使用map反转数组的最佳方法

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