在JavaScript中改變數(shù)組元素順序的多種方法
更新時間：2025年12月07日 14:44:57 作者：Never_Satisfied
本文介紹了JavaScript中改變數(shù)組元素順序的多種方法,包括反轉、排序、移動元素、隨機打亂、旋轉、條件排序和自定義排序規(guī)則,并提醒了sort()會修改原數(shù)組,使用時要注意,需要的朋友可以參考下
在JavaScript中，改變數(shù)組元素順序有多種方法。以下是最常用的幾種：
1.反轉數(shù)組 - reverse()
const arr = [1, 2, 3, 4, 5]; arr.reverse(); // 原地反轉 console.log(arr); // [5, 4, 3, 2, 1] // 創(chuàng)建新數(shù)組而不修改原數(shù)組 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.旋轉數(shù)組
// 向右旋轉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.根據(jù)條件重新排序
// 將特定元素移到前面
const numbers = [1, 2, 3, 4, 5, 6];
const evenFirst = numbers.sort((a, b) => {
// 偶數(shù)在前，奇數(shù)在后
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']; // 優(yōu)先順序
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.使用自定義排序規(guī)則
// 按字符串長度排序
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() 會修改原數(shù)組，如果需要保留原數(shù)組，先創(chuàng)建副本：
const sorted = [...arr].sort();
sort() 的默認行為是字符串排序，對數(shù)字排序需要提供比較函數(shù)：
// 錯誤 [10, 2, 1].sort(); // [1, 10, 2] // 正確 [10, 2, 1].sort((a, b) => a - b); // [1, 2, 10]
性能考慮：對于大型數(shù)組，選擇合適的算法很重要。
根據(jù)你的具體需求，選擇最合適的方法來改變數(shù)組元素的順序。
以上就是在JavaScript中改變數(shù)組元素順序的多種方法的詳細內(nèi)容，更多關于JavaScript改變數(shù)組元素順序的資料請關注腳本之家其它相關文章！
相關文章
這篇文章主要介紹了javascript修改圖片src的方法,通過簡單的圖片src獲取與賦值來實現(xiàn)修改src的功能,需要的朋友可以參考下2015-01-01
這篇文章主要為大家詳細介紹了js實現(xiàn)移動端tab切換時下劃線滑動效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-09-09
前端JavaScript實現(xiàn)圖片懶加載的方法詳解
圖片懶加載是一種優(yōu)化網(wǎng)頁性能的技術,主要作用是延遲加載視口外的圖片,直到用戶滾動到它們附近時才加載,下面我們就來看看前端實現(xiàn)圖片懶加載的多少方法吧2025-12-12
這篇文章主要為大家詳細介紹了js計時事件實現(xiàn)圓形時鐘，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-10-10
JS組件系列之Bootstrap table表格組件神器【終結篇】
Bootstrap Table是輕量級的和功能豐富的以表格的形式顯示的數(shù)據(jù)，支持單選，復選框，排序，分頁,顯示/隱藏列,固定標題滾動表,響應式設計，Ajax加載JSON數(shù)據(jù)，點擊排序的列，卡片視圖等。本文給大家介紹JS組件系列之Bootstrap table表格組件神器【終結篇】，一起學習吧2016-05-05
JS基于myFocus庫實現(xiàn)各種功能的tab選項卡切換效果
這篇文章主要介紹了JS基于myFocus庫實現(xiàn)各種功能的tab選項卡切換效果,實例演示了JS實現(xiàn)tab嵌套顯示及常用過度效果的相關技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-09-09
這篇文章主要介紹了js與jquery正則驗證電子郵箱、手機號、郵政編碼的方法,涉及javascript與jQuery鼠標事件的響應與正則驗證操作字符串的相關技巧,需要的朋友可以參考下2016-07-07
Code: write(s,d) 輸出連續(xù)字符串...2007-08-08
Bootstrap是Twitter推出的一個用于前端開發(fā)的開源工具包。本文給大家介紹Bootstrap 組件之按鈕的相關知識，感興趣的朋友一起學習吧2016-05-05
這篇文章主要介紹了JS小游戲之極速快跑源碼詳解,對游戲的主要流程及原理進行了較為詳細的講解,并附有完整實例源碼,需要的朋友可以參考下2014-09-09