C

CodeRecipe:如何在 JavaScript 中反转数组

2025-06-10

CodeRecipe:如何在 JavaScript 中反转数组

SamanthaMing.com 的 CodeTidbit

如果你需要反转数组元素的顺序,这里有一个代码示例可以参考。你可以使用数组方法“reverse()”⏪

尝试一个名为 #CodeRecipes 的新板块。我想涵盖一些我经常在谷歌搜索的问题。这些食谱你绝对应该随身携带,因为问题不在于“是否”使用,而在于“何时”使用 😉

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

const benjaminButton = benjamin.reverse();

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

修改原始数组

需要注意的一点是,它会改变原始数组。

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

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

如何在不改变原始数组的情况下反转数组

以下是一些不会改变原始数组的配方。我们来看看吧👀

使用slicereverse

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

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

使用spreadreverse

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

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

使用reducespread

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' ]

使用reduceRightspread

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

源代码和测试可在此处获取

资源


感谢阅读❤
打个招呼!Instagram | Twitter | Facebook |博客| SamanthaMing.com

鏂囩珷鏉ユ簮锛�https://dev.to/samanthaming/coderecipe-how-to-reverse-an-array-in-javascript-m58
PREV
使用 Spread 将 Iterable 转换为数组 使用 Spread 将 Iterable 转换为数组
NEXT
代码异味:函数名称中没有 AND