当前位置:首页 > 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()
若需保留原数组,可通过扩展运算符创建新数组再翻转:

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 循环手动翻转
通过循环交换首尾元素位置(需处理奇偶长度):

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]

注意事项

翻转实现方式js

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

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

相关文章

js实现分页

js实现分页

实现分页的基本思路 分页功能通常需要处理数据分割、页码生成和用户交互。核心逻辑包括计算总页数、根据当前页截取数据、渲染页码按钮等。 前端分页实现(静态数据) 假设已有全部数据,仅需前端分页展示:…

js实现全屏

js实现全屏

实现全屏的基本方法 使用JavaScript实现全屏功能主要依赖Element.requestFullscreen()方法。现代浏览器均支持此API,但不同浏览器可能需要添加前缀。 // 触发全屏…

js实现类

js实现类

JavaScript 实现类的几种方式 JavaScript 是一种基于原型的语言,但在 ES6 之后引入了 class 语法糖,使得实现类更加直观。以下是几种常见的实现方式: 使用构造函数 传统的…

js实现瀑布流

js实现瀑布流

实现瀑布流布局 瀑布流布局是一种常见的网页布局方式,常用于图片展示、商品列表等场景。以下是使用 JavaScript 实现瀑布流布局的几种方法。 纯 JavaScript 实现 通过计算元素的位置和…

js实现点击显示和隐藏

js实现点击显示和隐藏

实现点击显示和隐藏的JavaScript方法 使用classList.toggle切换类名 通过添加/移除CSS类控制元素的显示与隐藏,需提前在CSS中定义隐藏样式(如display: none)。…

js实现二叉树

js实现二叉树

二叉树的基本概念 二叉树是一种树形数据结构,每个节点最多有两个子节点,分别称为左子节点和右子节点。二叉树的常见操作包括插入、删除、遍历等。 二叉树的节点定义 在JavaScript中,二叉树的节点可…