JavaScript >> Javascript 文檔 >  >> Tags >> Arrays

如何使用 sort() 方法在 JavaScript 中對數組進行排序 [示例]

本教程將向您展示如何在 JavaScript 編程語言中使用數組對數組進行排序sort() 方法並提供一些代碼示例。

什麼是 JavaScript 中的數組?

數組是一種 JavaScript 變量,可以保存一系列變量、對變量的引用或值。

這就像一個項目列表。數組中的每個項目或元素都有一個值和一個位置。位置是元素在數組中出現的順序,稱為索引 . 索引 是零索引的——這意味著它們從 0 位置開始計數 – 所以數組中的第一個元素在索引 0 處,第二個元素在索引 1 處,依此類推。

在 JavaScript 中,數組是使用方括號 ([]) 構造的,以包含以逗號分隔的數組值列表:

var myArray = ['dog', 'cat', 'pig', 'parrot'];

數組sort() 方法

數組中的值可以重新排序(更改它們出現的順序,以及它們的索引 )。 sort() 方法可用於根據比較數組中的值的函數對數組中的元素進行重新排序。

JavaScript 數組 sort() 方法語法

數組的 JavaScript 語法 sort() 方法如下:

array.sort(COMPARE_FUNCTION)

注意:

  • 數組 可以是任何數組類型變量
  • COMPARE_FUNCTION 是一個可選 比較函數
    • 如果未提供,則數組中的元素將按其字符串值排序
    • COMPARE_FUNCTION 應該接受兩個參數 - 要比較以定義排序的兩個元素
    • COMPARE_FUNCTION 然後將對每個數組元素及其後面的元素運行以對數組進行排序
  • 數組 將被原地排序 – 原始數組將被修改,其中的元素將被排序,而不是返回一個重複的排序數組

數組排序示例

如果沒有比較函數傳遞給 sort() 方法,其中的值將被轉換為字符串並按它們的 UNICODE 值排序——實際上是按字母升序排序:

var myArray = ['dog', 'cat', 'pig', 'parrot'];
myArray.sort();
console.log(myArray);

數組現在將包含排序後的值:

["cat", "dog", "parrot", "pig"]

這種排序方式也可以通過簡單地反轉排序後的數組以降序完成:

var myArray = ['dog', 'cat', 'pig', 'parrot'];
myArray.sort();
myArray.reverse();
console.log(myArray);

該數組現在將包含:

["pig", "parrot", "dog", "cat"]

數組排序與比較函數示例

比較函數可用於根據您自己的標準對數組進行排序。

比較數字

下面的代碼將使用比較函數對數字進行升序排序。

var myNumbers = [1, 5, 2, 3, 6, 10];
myNumbers.sort(function(value1, value2) {
        return value1 - value2;
    }); 
console.log(myNumbers);

這是一個比較函數如何工作的簡單示例。 value1 – value2 的結果 將是否定的 如果 value2 大於 value1 , 或 0 如果它們相等,否則 .因此,可以根據排序值的返回值是正數、負數還是零對數組中的值進行排序。

比較對象(和其他值)

比較可以採用任何形式,只要返回的值可以解析為正、負或零數值。這使您可以編寫自己的比較邏輯以適應您的使用場景。

下面定義了一個對像數組,其中包含一個寵物列表——它們的名字、它們是什麼動物以及它們的年齡。

然後使用排序函數對數組進行排序,該函數比較每個對象的年齡——除非是 Moe the fish。根據排序邏輯,他在排序後的數組中總是排在第一位:

var myPets = [
    { name: 'Shemp', animal: "dog", age: 4 },
    { name: 'Larry', animal: "cat", age: 1 },
    { name: 'Moe', animal: "fish", age: 6 },
    { name: 'Curly', animal: "parrot", age: 5 }
];

myPets.sort(function(value1, value2) {
    if(value2.name === 'Moe') return 1;
    return value1.age - value2.age;
});

console.log(myPets);

隨機化 JavaScript 數組

數組也可以隨機化——我們將在另一篇文章中介紹。


Tutorial JavaScript 教程
  1. 結合 some() 和 startsWith() javascript

  2. 如何根據時間戳比率獲取未來日期

  3. Ionic From Scratch:使用 Ionic 組件

  4. Async/Await:編寫異步 JavaScript 的簡單性

  5. 何時不選擇 Next.js

  6. history.push 更改 url 但不呈現表單反應鉤子

  7. 如何在 Angular 中設置 Ace 編輯器?

  1. 了解 Javascript 數組系列 I - 什麼是數組?

  2. JavaScript 數組索引是字符串還是整數?

  3. 您將如何創建翻譯應用程序?

  4. 樣式化組件 + 樣式化系統 =超級力量第一部分

  5. 使用節點事件模塊

  6. 讓我們談談咖哩……不,不是斯蒂芬或食物。

  7. Git Hooks 不是那麼粗魯!我會跟踪你的!

  1. JavaScript Nullable – 如何在 JS 中檢查 Null

  2. 向 NPM 包注入後門

  3. React - 動態路由

  4. 🔥 GraphQL 速成課程(10 張圖片!)