当前位置:首页 > 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实现vue路由

js实现vue路由

Vue路由基础实现 使用Vue Router实现前端路由需要先安装并配置路由库。Vue Router是Vue.js官方的路由管理器。 安装Vue Router: npm install vue-r…

js实现继承

js实现继承

原型链继承 通过将子类的原型指向父类的实例实现继承。子类实例可以访问父类原型上的属性和方法。 function Parent() { this.name = 'parent'; } Parent…

js 实现vue

js 实现vue

Vue.js 的基本实现 在 JavaScript 中实现 Vue.js 的核心功能,可以通过数据绑定、响应式系统和虚拟 DOM 来实现。以下是实现 Vue.js 核心功能的简化版本。 数据响应式系…

js实现复制到剪贴板

js实现复制到剪贴板

使用document.execCommand方法(传统方式,已废弃但部分浏览器仍支持) 该方法适用于旧版浏览器,但已被标记为废弃。执行前需确保文本已被选中: function copyToClipb…

js实现拷贝

js实现拷贝

实现文本拷贝 使用 document.execCommand 方法(已废弃但兼容性较好): function copyText(text) { const textarea = document…

js实现交换

js实现交换

交换变量的方法 在JavaScript中,交换两个变量的值有多种方法。以下是常见的几种实现方式: 使用临时变量 通过引入一个临时变量来存储其中一个变量的值,实现交换: let a = 1; le…