如何在 JS 中以相反顺序在数组上使用 map()

作者

在 JS 中以相反的顺序在数组上使用 map()

How to use map() on an Array in Reverse Order in JS

要map()以相反的顺序在数组上使用该方法：

  1. 使用slice()方法获取数组的副本。
  2. 使用该reverse()方法反转复制的数组。
  3. map()在反转数组上调用该方法。
索引.js
const arr = ['a', 'b', 'c'];

const mapReverse1 = arr
  .slice(0)
  .reverse()
  .map(element => {
    return element;
  });

console.log(mapReverse1); // 👉️ ['c', 'b', 'a']

第一步是使用
Array.slice
方法创建数组的浅表副本。

我们这样做是因为
Array.reverse
方法就地更改了原始数组的内容。

我们传递给该slice方法的唯一参数是起始索引——要包含在新数组中的第一个元素的索引。

通过传递起始索引0而不传递结束索引，我们创建了原始数组的浅表副本，我们可以将其反转。

索引.js
const arr = ['a', 'b', 'c'];

const copy = arr.slice(0);
console.log(copy); // 👉️ ['a', 'b', 'c']

该reverse()方法原地反转数组并返回结果。

索引.js
const arr = ['a', 'b', 'c'];

const reversed = arr.reverse();
console.log(reversed); // 👉️ ['c', 'b', 'a']

console.log(arr); // 👉️ ['c', 'b', 'a']
请注意，存储在arr变量中的原始数组也被颠倒了。

这就是我们提前创建浅表副本的原因——以避免更改原始数组。

最后一步是对

反向数组使用Array.map方法。

另一种方法是使用
扩展语法 (…)
创建数组的浅表副本。

要map()以相反的顺序在数组上使用该方法：

  1. 使用扩展语法 (…) 获取数组的副本。
  2. 使用该reverse()方法反转复制的数组。
  3. map()在反转数组上调用该方法。
索引.js
const arr = ['a', 'b', 'c'];

const mapReverse2 = [...arr].reverse().map(element => {
  return element;
});

console.log(mapReverse2); // 👉️ ['c', 'b', 'a']

传播语法 (…) 将原始数组中的值解包到一个新数组中，创建一个浅表副本。

然后我们反转副本以避免改变原始数组并调用
map()反转数组上的方法。

这种方法比使用slice()方法更简洁。

您选择哪种方法是个人喜好的问题。我会选择传播语法，因为它更具可读性和直观性，尤其是在代码读者不熟悉该slice 方法采用的参数的情况下。

–