有没有办法在数组上使用 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，但我希望有一个mapReverse() 可以打印e d c b a

有什么建议吗？

Answer 1

如果您不想反转原始数组，您可以对其进行浅拷贝，然后映射反转数组，

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

Answer 2

根本不改变数组，这是我想出的单线 O(n) 解决方案：

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

Answer 3

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

带有命名回调函数

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 5

另一种解决方案可能是：

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

您基本上使用数组索引

Answer 6

我更喜欢将 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 ]

Answer 7

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

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

Answer 8

这是我的 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]))
}

Answer 9

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 10

我认为将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 11

你可以先做 myArray.reverse()。

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

Answer 12

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

Answer 13

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

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