使用 JavaScript 以相反顺序循环遍历数组

使用 JavaScript 以倒序遍历数组

Use forEach() on an Array in Reverse Order in JavaScript

以相反的顺序遍历数组：

1. 使用该slice()方法创建数组的副本。
2. 使用该reverse()方法反转复制的数组。
3. forEach()在反转数组上调用该方法。

const arr = ['a', 'b', 'c'];

arr
  .slice()
  .reverse()
  .forEach(element => {
    console.log(element); // 👉️ c, b, a
  });

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

这是必要的，因为
Array.reverse()方法会原地更改原始数组的内容。

调用slice()不带参数的方法返回原始数组的浅表副本，我们可以反转它。

const arr = ['a', 'b', 'c'];

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

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

const arr = ['a', 'b', 'c'];

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

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

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

最后一步是
对反向数组使用Array.forEach方法。

const arr = ['a', 'b', 'c'];

arr
  .slice()
  .reverse()
  .forEach(element => {
    console.log(element); // 👉️ c, b, a
  });

我们传递给方法的函数Array.forEach()被数组中的每个元素调用。

该forEach()方法返回undefined，所以我们必须执行某种变异来保持状态。

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

使用 forEach() 在数组上使用扩展语法以相反的顺序使用 (…)

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

1. 使用扩展语法 (…) 创建数组的副本。
2. 使用该reverse()方法反转复制的数组。
3. forEach()在反转数组上调用该方法。

const arr = ['a', 'b', 'c'];

[...arr].reverse().forEach(element => {
  console.log(element); // 👉️ c, b, a
});

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

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

通过使用索引在倒序数组上使用 forEach()

forEach()您还可以通过使用当前索引以相反的顺序使用该方法。

const arr = ['a', 'b', 'c'];

arr.forEach((_element, index) => {
  const last = arr[arr.length - 1 - index];

  console.log(last); // 👉️ c, b, a
});

调用回调函数的第二个参数是当前迭代的索引。

例如，在第一次迭代中，我们得到一个索引arr.length - 1 - 0。

对于具有 , 元素的数组3，此计算结果为2，这是数组中的最后一个索引。

JavaScript 索引是从零开始的，因此数组中的第一个元素的索引为0，最后一个元素的索引为array.length - 1。

在每次迭代中，我们1从数组的长度中减去当前索引以逆序映射数组。

for使用基本循环反向迭代数组

或者，您可以使用基本循环以相反的顺序遍历数组
for。

const arr = ['a', 'b', 'c'];

for (let index = arr.length - 1; index >= 0; index--) {
  console.log(arr[index]); // 👉️ c, b, a
}

我们将索引初始化为arr.length - 1（数组中的最后一个索引）。

在每次迭代中，只要当前索引大于或等于，我们就会递减索引0。

在一个数组上以相反的顺序使用 forEach()reduceRight

您还可以使用
Array.reduceRight
方法以相反的顺序遍历数组。

const arr = ['a', 'b', 'c'];

const result = arr.reduceRight((accumulator, last) => {
  console.log(last);

  return accumulator.concat(last);
}, []);

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

该reduceRight方法对累加器和数组的每个值从右到左应用提供的函数，将数组缩减为单个值。

该accumulator变量被初始化为一个空数组，因为这是我们作为第二个参数传递给该Array.reduceRight()方法的内容。

我还写了一篇关于
如何以相反顺序循环对象的文章。