2021 年 10 月 30 日

在 JavaScript 中怎样倒序数组

如果你需要倒序数组元素的顺序，这里有一种代码技巧是你做到。你可以使用数组方法 "reverse()" ⏪

尝试一种新的称谓 #CodeRecipes。我通常 google 想要解决问题。这些是你应该保持习惯技巧，因为不是单方面的 "如果" 你使用它，而是 "当" 你使用它 😉

const benjamin = ['👶', '👦', '👨', '👴'];

const benjaminButton = benjamin.reverse();

console.log(benjaminButton);
// ['👴', '👨', '👦', '👶']

修改的原数组

一件需要注意的事情是 Array.reverse() 会修改原数组。

const originalArray = ['a', 'b', 'c'];
const newArray = originalArray.reverse();

console.log(originalArray); // [ 'c', 'b', 'a' ]
console.log(newArray); // [ 'c', 'b', 'a' ]```

怎样倒序数组却不改变原数组

有一些不修改原数组的方法。让我们了解 👀

使用 slice 和 reverse

const originalArray = ['a', 'b', 'c'];
const newArray = originalArray.slice().reverse();

console.log(originalArray); // ['a', 'b', 'c']
console.log(newArray); // [ 'c', 'b', 'a' ]

使用扩展操作符(spread)和 reverse

const originalArray = ['a', 'b', 'c'];
const newArray = [...originalArray].reverse();

console.log(originalArray); // ['a', 'b', 'c']
console.log(newArray); // [ 'c', 'b', 'a' ]

使用 reduce 和扩展操作符(spread)

const originalArray = ['a', 'b', 'c'];
const newArray = originalArray.reduce((accumulator, value) => {
  return [value, ...accumulator];
}, []);

console.log(originalArray); // ['a', 'b', 'c']
console.log(newArray); // [ 'c', 'b', 'a' ]

使用 reduceRight 和扩展操作符(spread)

const originalArray = ['a', 'b', 'c'];
const newArray = originalArray.reduceRight((accumulator, value) => {
  console.log(value);
  return [...accumulator, value];
}, []);

console.log(originalArray); // ['a', 'b', 'c']
console.log(newArray); // [ 'c', 'b', 'a' ]

或者使用 push

const originalArray = ['a', 'b', 'c'];
const newArray = originalArray.reduceRight((accumulator, value) => {
  accumulator.push(value);
  return accumulator;
}, []);

console.log(originalArray); // ['a', 'b', 'c']
console.log(newArray); // [ 'c', 'b', 'a' ]

社区支持

@aminnair：我决定测试想到的另一种方法，下面是结果：

with slice and reverse: 83.085ms
With one loop: 309.763ms

源代码以及测试情况在这里。

资源

本文作者 Samantha Ming，转载请注明来源链接：
原文链接：https://www.samanthaming.com/tidbits/74-how-to-reverse-an-array
本文链接：https://tie.pub/2019/09/how-to-reverse-an-array/