2021-10-25發表2023-01-03更新筆記5 分鐘讀完 (大約743個字)

JavaScript 陣列排序 sort

預設排序

array.sort()是以字串的 Unicode 編碼位置來排序陣列中的元素。

1
2
3

let fruit = ['Orange', 'Banana', 'Apple', 'Cherry']
fruit.sort()
console.log(fruit); // [ 'Apple', 'Banana', 'Cherry', 'Orange' ]

自訂義排序

若用sort()來排序「數字」，我們也會得到「照字母排序」的結果。

下面的執行結果為100排在25之前，因為以字母順序來看，1是排在2之前。

1
2
3

let numbers = [ 25, 3, 100, 67, 45, 7]
numbers.sort()
console.log(numbers); // [ 100, 25, 3, 45, 67, 7 ]

要如何使用自訂義排序？

在sort()帶入比較方法，而比較方法需要自己定義。

原則上：

比較方法應傳入兩個參數，用來做比較。
比較方法應回傳正、負值，或是 0，用來決定排序。

以下面的程式碼為例：

如果compare(a, b)回傳 正的值(大於 0)**，就把 a 排在 b **後面。
如果compare(a, b)回傳 負的值(小於 0)**，就把 a 排在 b **前面。
如果compare(a, b)回傳 0，就不動順序。

let numbers = [ 25, 3, 100, 67, 45, 7]

function compare(a, b) {
  if(a > b) {
    return 1 // 如果 a 大於 b ，就把 a 排在 b 後面
  }

  if (a < b) {
    return -1 // 如果 a 大於 b ，就把 a 排在 b 前面
  }

  return 0 // a = b ，就不動
}

// 把 compare function 傳進去 numbers.sort()
numbers.sort(compare)

console.log(numbers); // [ 3, 7, 25, 45, 67, 100 ]

簡單應用自訂排序

數字由小到大排序

當回傳a - b是 4 - 3 = 1，等於回傳大於 0的數字，代表 4 要排在 3 後面。
當回傳a - b是 2 - 4 = -2，等於回傳小於 0的數字，代表 2 要排在 4 前面。
當回傳a - b是 100 - 100 = 0，等於回傳 0，代表 100 跟 100 不動。

let numbers = [ 2, 4, 3, 100, 1, 100]

function compare(a, b) {
  return a - b
}

// 把 compare function 傳進去 numbers.sort()
numbers.sort(compare)

console.log(numbers); // [ 1, 2, 3, 4, 100, 100 ]

依照物件的值排序

compareName(a, b) 與 compareAge(a, b) 傳入的 a 跟 b，代表 person 陣列中的物件
compareName(a, b)比較姓名的方法
- a.name 跟 b.name，代表從物件中取出 name 的值
- 若比較的方法是拿字串進行比較，會根據第一個不同字元的 ASCII 編碼進行大小比較。例如： Banana 與 Berry 比較，第一個位元都是 B，就會從第二個位元 a 跟 e 開始比較。
compareAge(a, b) 比較年齡的方法
- a.age 跟 b.age，代表從物件中取出 age 的值

let person = [
  { name : 'Aidan Jackson', age: 75 , phone: '576-7883'},
  { name : 'Mia Abraham', age: 26 , phone: '913-9939'},
  { name : 'Harry King', age: 50 , phone: '173-8232'},
  { name : 'Dean Burton', age: 50 , phone: '394-4192'},
]

// 比較姓名的方法
function compareName(a, b){
  if (a.name < b.name) {
    return -1;
  }
  if (a.name > b.name) {
    return 1;
  }
  return 0;
}

// 比較年齡的方法
function compareAge(a, b){
  return a.age - b.age
}

// 照姓名排序
let personSortByName = person.sort(compareName)
console.log(personSortByName);

// 照年齡排序
let personSortByAge = person.sort(compareAge)
console.log(personSortByAge);

小測驗
也可以用上述的例子，來做出「照電話號碼排序」的方法喔~

參考資料

JavaScript 数组排序
 Array.prototype.sort() - JavaScript | MDN

#javascript