在JavaScript中改变数组元素顺序的多种方法

 更新时间:2025年12月07日 14:44:57   作者:Never_Satisfied  
本文介绍了JavaScript中改变数组元素顺序的多种方法,包括反转、排序、移动元素、随机打乱、旋转、条件排序和自定义排序规则,并提醒了sort()会修改原数组,使用时要注意,需要的朋友可以参考下

在JavaScript中,改变数组元素顺序有多种方法。以下是最常用的几种:

1.反转数组 - reverse()

const arr = [1, 2, 3, 4, 5];
arr.reverse(); // 原地反转
console.log(arr); // [5, 4, 3, 2, 1]

// 创建新数组而不修改原数组
const reversed = [...arr].reverse();

2.排序 - sort()

// 默认排序(按字符串Unicode码点)
const fruits = ['banana', 'apple', 'cherry', 'date'];
fruits.sort();
console.log(fruits); // ['apple', 'banana', 'cherry', 'date']

// 自定义排序
const numbers = [40, 100, 1, 5, 25, 10];
numbers.sort((a, b) => a - b); // 升序
console.log(numbers); // [1, 5, 10, 25, 40, 100]

numbers.sort((a, b) => b - a); // 降序
console.log(numbers); // [100, 40, 25, 10, 5, 1]

// 按对象属性排序
const users = [
  { name: 'Alice', age: 30 },
  { name: 'Bob', age: 25 },
  { name: 'Charlie', age: 35 }
];
users.sort((a, b) => a.age - b.age);

3.移动元素位置

方法1:使用 splice() 移动

function moveElement(arr, fromIndex, toIndex) {
  const element = arr.splice(fromIndex, 1)[0];
  arr.splice(toIndex, 0, element);
  return arr;
}

const arr = ['A', 'B', 'C', 'D', 'E'];
moveElement(arr, 2, 0); // 将C移动到开头
console.log(arr); // ['C', 'A', 'B', 'D', 'E']

方法2:交换两个元素

function swapElements(arr, index1, index2) {
  [arr[index1], arr[index2]] = [arr[index2], arr[index1]];
  return arr;
}

const arr = [1, 2, 3, 4, 5];
swapElements(arr, 0, 4);
console.log(arr); // [5, 2, 3, 4, 1]

4.随机打乱顺序 - Fisher-Yates洗牌算法

function shuffleArray(arr) {
  const newArr = [...arr];
  for (let i = newArr.length - 1; i > 0; i--) {
    const j = Math.floor(Math.random() * (i + 1));
    [newArr[i], newArr[j]] = [newArr[j], newArr[i]];
  }
  return newArr;
}

const arr = [1, 2, 3, 4, 5];
console.log(shuffleArray(arr)); // 随机顺序

5.旋转数组

// 向右旋转k个位置
function rotateRight(arr, k) {
  const n = arr.length;
  k = k % n;
  return [...arr.slice(n - k), ...arr.slice(0, n - k)];
}

// 向左旋转k个位置
function rotateLeft(arr, k) {
  const n = arr.length;
  k = k % n;
  return [...arr.slice(k), ...arr.slice(0, k)];
}

const arr = [1, 2, 3, 4, 5];
console.log(rotateRight(arr, 2)); // [4, 5, 1, 2, 3]
console.log(rotateLeft(arr, 2));  // [3, 4, 5, 1, 2]

6.根据条件重新排序

// 将特定元素移到前面
const numbers = [1, 2, 3, 4, 5, 6];
const evenFirst = numbers.sort((a, b) => {
  // 偶数在前,奇数在后
  if (a % 2 === 0 && b % 2 !== 0) return -1;
  if (a % 2 !== 0 && b % 2 === 0) return 1;
  return a - b;
});
console.log(evenFirst); // [2, 4, 6, 1, 3, 5]

// 按分组重新排序
const items = ['apple', 'banana', 'carrot', 'date', 'eggplant'];
const order = ['date', 'apple', 'banana']; // 优先顺序
items.sort((a, b) => {
  const aIndex = order.indexOf(a);
  const bIndex = order.indexOf(b);
  if (aIndex === -1 && bIndex === -1) return 0;
  if (aIndex === -1) return 1;
  if (bIndex === -1) return -1;
  return aIndex - bIndex;
});
console.log(items); // ['date', 'apple', 'banana', 'carrot', 'eggplant']

7.使用自定义排序规则

// 按字符串长度排序
const words = ['apple', 'kiwi', 'banana', 'pear'];
words.sort((a, b) => a.length - b.length);
console.log(words); // ['pear', 'kiwi', 'apple', 'banana']

// 按多个条件排序
const students = [
  { name: 'Alice', grade: 'A', age: 20 },
  { name: 'Bob', grade: 'B', age: 22 },
  { name: 'Alice', grade: 'B', age: 21 }
];

students.sort((a, b) => {
  // 先按名字,再按年级,最后按年龄
  if (a.name !== b.name) return a.name.localeCompare(b.name);
  if (a.grade !== b.grade) return a.grade.localeCompare(b.grade);
  return a.age - b.age;
});

注意事项:

sort() 会修改原数组,如果需要保留原数组,先创建副本:

const sorted = [...arr].sort();

sort() 的默认行为是字符串排序,对数字排序需要提供比较函数:

// 错误
[10, 2, 1].sort(); // [1, 10, 2]

// 正确
[10, 2, 1].sort((a, b) => a - b); // [1, 2, 10]

性能考虑:对于大型数组,选择合适的算法很重要。

根据你的具体需求,选择最合适的方法来改变数组元素的顺序。

以上就是在JavaScript中改变数组元素顺序的多种方法的详细内容,更多关于JavaScript改变数组元素顺序的资料请关注脚本之家其它相关文章!

相关文章

  • javascript修改图片src的方法

    javascript修改图片src的方法

    这篇文章主要介绍了javascript修改图片src的方法,通过简单的图片src获取与赋值来实现修改src的功能,需要的朋友可以参考下
    2015-01-01
  • js实现移动端tab切换时下划线滑动效果

    js实现移动端tab切换时下划线滑动效果

    这篇文章主要为大家详细介绍了js实现移动端tab切换时下划线滑动效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-09-09
  • 前端JavaScript实现图片懒加载的方法详解

    前端JavaScript实现图片懒加载的方法详解

    图片懒加载是一种优化网页性能的技术,主要作用是延迟加载视口外的图片,直到用户滚动到它们附近时才加载,下面我们就来看看前端实现图片懒加载的多少方法吧
    2025-12-12
  • js计时事件实现圆形时钟

    js计时事件实现圆形时钟

    这篇文章主要为大家详细介绍了js计时事件实现圆形时钟,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-10-10
  • JS组件系列之Bootstrap table表格组件神器【终结篇】

    JS组件系列之Bootstrap table表格组件神器【终结篇】

    Bootstrap Table是轻量级的和功能丰富的以表格的形式显示的数据,支持单选,复选框,排序,分页,显示/隐藏列,固定标题滚动表,响应式设计,Ajax加载JSON数据,点击排序的列,卡片视图等。本文给大家介绍JS组件系列之Bootstrap table表格组件神器【终结篇】,一起学习吧
    2016-05-05
  • JS基于myFocus库实现各种功能的tab选项卡切换效果

    JS基于myFocus库实现各种功能的tab选项卡切换效果

    这篇文章主要介绍了JS基于myFocus库实现各种功能的tab选项卡切换效果,实例演示了JS实现tab嵌套显示及常用过度效果的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-09-09
  • js与jquery正则验证电子邮箱、手机号、邮政编码的方法

    js与jquery正则验证电子邮箱、手机号、邮政编码的方法

    这篇文章主要介绍了js与jquery正则验证电子邮箱、手机号、邮政编码的方法,涉及javascript与jQuery鼠标事件的响应与正则验证操作字符串的相关技巧,需要的朋友可以参考下
    2016-07-07
  • Code: write(s,d) 输出连续字符串

    Code: write(s,d) 输出连续字符串

    Code: write(s,d) 输出连续字符串...
    2007-08-08
  • Bootstrap 组件之按钮(二)

    Bootstrap 组件之按钮(二)

    Bootstrap是Twitter推出的一个用于前端开发的开源工具包。本文给大家介绍Bootstrap 组件之按钮的相关知识,感兴趣的朋友一起学习吧
    2016-05-05
  • JS小游戏之极速快跑源码详解

    JS小游戏之极速快跑源码详解

    这篇文章主要介绍了JS小游戏之极速快跑源码详解,对游戏的主要流程及原理进行了较为详细的讲解,并附有完整实例源码,需要的朋友可以参考下
    2014-09-09

最新评论