当前位置:首页 > JavaScript

翻转实现方式js

2026-01-30 21:50:48JavaScript

翻转数组的 JavaScript 实现方法

方法一:使用 Array.prototype.reverse()
直接调用数组的 reverse() 方法,会原地修改原数组并返回翻转后的结果:

const arr = [1, 2, 3];
const reversed = arr.reverse(); 
console.log(reversed); // [3, 2, 1]
console.log(arr); // [3, 2, 1](原数组被修改)

方法二:扩展运算符 ... + reverse()
若需保留原数组,可通过扩展运算符创建新数组再翻转:

翻转实现方式js

const arr = [1, 2, 3];
const reversed = [...arr].reverse();
console.log(reversed); // [3, 2, 1]
console.log(arr); // [1, 2, 3](原数组不变)

方法三:reduce() 实现
通过 reduce 从右向左遍历构建新数组:

const arr = [1, 2, 3];
const reversed = arr.reduce((acc, cur) => [cur, ...acc], []);
console.log(reversed); // [3, 2, 1]

方法四:for 循环手动翻转
通过循环交换首尾元素位置(需处理奇偶长度):

翻转实现方式js

function reverseArray(arr) {
  const result = [...arr];
  for (let i = 0; i < Math.floor(result.length / 2); i++) {
    [result[i], result[result.length - 1 - i]] = 
      [result[result.length - 1 - i], result[i]];
  }
  return result;
}
console.log(reverseArray([1, 2, 3])); // [3, 2, 1]

方法五:reduceRight() 实现
利用 reduceRight 从右向左合并元素:

const arr = [1, 2, 3];
const reversed = arr.reduceRight((acc, cur) => [...acc, cur], []);
console.log(reversed); // [3, 2, 1]

注意事项

  • 直接调用 reverse() 会修改原数组,需注意副作用。
  • 性能敏感场景建议测试不同方法的执行效率(通常原生 reverse() 最快)。
  • 字符串翻转可先转为数组再操作:str.split('').reverse().join('')

标签: 方式js
分享给朋友:

相关文章

js实现

js实现

JavaScript 实现方法 JavaScript 是一种广泛使用的编程语言,适用于网页开发、服务器端编程以及移动应用开发。以下是几种常见的 JavaScript 实现方法: 网页交互功能 使用…

js实现文件下载

js实现文件下载

使用 a 标签下载文件 通过动态创建 a 标签并设置 download 属性实现文件下载。适用于已知文件 URL 或 Blob 数据的情况。 function downloadFile(url, f…

js 实现分页

js 实现分页

实现分页的基本逻辑 分页功能通常需要后端返回数据总量或总页数,前端根据当前页码和每页条数截取对应数据。以下是一个基于JavaScript的简单分页实现方案: 前端分页实现 假设已有从后端获取的完整数…

vue实现js休眠

vue实现js休眠

实现 JavaScript 休眠的方法 在 Vue 中实现 JavaScript 休眠(延迟执行)可以通过以下方式实现。由于 JavaScript 本身没有内置的 sleep 函数,通常使用 Prom…

js实现滚动

js实现滚动

实现滚动效果的方法 在JavaScript中实现滚动效果可以通过多种方式完成,以下是一些常见的方法: 使用window.scrollTo() window.scrollTo()方法可以将页面滚动到指…

js进度条实现

js进度条实现

使用HTML和CSS创建基础结构 在HTML中创建一个容器元素用于显示进度条,通常使用<div>元素。CSS用于设置进度条的样式,包括宽度、高度、颜色和圆角等属性。 <div cl…