当前位置:首页 > 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实现图片上传

图片上传的基本实现 使用HTML的<input type="file">元素配合JavaScript的File API可以实现图片上传功能。HTML部分需要创建一个文件选择输入框和一个用于…

vue拖拽实现方式

vue拖拽实现方式

Vue 拖拽实现方式 使用 HTML5 原生拖拽 API HTML5 提供了原生的拖拽 API,可以通过 draggable 属性和相关事件(如 dragstart、dragend、dragover、…

js实现游标

js实现游标

使用JavaScript实现游标 在JavaScript中,可以通过操作DOM元素的cursor样式属性来实现自定义游标效果。以下是几种常见的实现方法: 修改默认鼠标指针样式 通过CSS的curso…

js画图实现

js画图实现

使用Canvas API绘制图形 Canvas是HTML5提供的绘图API,通过JavaScript操作Canvas元素可以绘制各种图形。以下是一个简单的示例: <canvas id="myC…

js钟表实现

js钟表实现

实现JavaScript钟表的基本方法 创建一个简单的JavaScript钟表可以通过以下步骤完成,涵盖数字和模拟两种形式。 数字钟表实现 HTML结构只需一个显示时间的容器: <div i…

js实现密码

js实现密码

密码强度验证 使用正则表达式验证密码强度是一种常见方法。以下代码检查密码是否包含大小写字母、数字和特殊字符,且长度至少为8位: function checkPasswordStrength(pass…