[JavaScript] 從 Array 的 sort 方法,聊到各瀏覽器的實作,沒想到 Chrome 和FireFox 的排序如此不同

目錄

  1. 前言
  2. sort 的用法
  3. 各家實作不一
  4. 為什麼多數人抨擊 sort
  5. 寫在最後

前言

???

sort() 的用法

arr.sort([compareFunction])
function compare(a, b) {
if (在某排序標準下 a 小於 b) {
return -1;
}
if (在某排序標準下 a 大於 b) {
return 1;
}
// a 必須等於 b
return 0;
}
讓我們開心的在瀏覽器按下 F12 ,看看會跑出什麼東西。

什麼是明確規則?

if (a < b) {
return -1;
}
// 如果有兩數 a b
// 當 a 小於 b 的時候
// 幫我把 a 排在 b 前面

if (a > b) {
return 1;
}
// 如果有兩數 a b
// 當 a 大於 b 的時候
// 幫我把 a 排在 b 的後面
// a 此時等於 b
return 0;
// 回傳零代表不改變彼此之間的順序

我比你高,換句話說你比我矮,只要規定高矮之間誰在前面、誰在後面就好。

目前正在比較 a = 3 與 b = 1
因為3>1,所以3在1後面
目前正在比較 a = 2 與 b = 3
因為2<3,所以2在3前面
目前正在比較 a = 2 與 b = 3
因為2<3,所以2在3前面
目前正在比較 a = 2 與 b = 1
因為2>1,所以2在1後面
目前正在比較 a = 1 與 b = 3 
因為1<3,所以1在3前面
目前正在比較 a = 3 與 b = 2
因為3>2,所以3在2後面
目前正在比較 a = 1 與 b = 2
因為1<2,所以1在2前面

快捷的方式撰寫 compareFunction 到

// 當我們想要由小往大
arr.sort((a,b)=>a-b);
// 當我們想要由大至小
arr.sort((a,b)=>b-a);

那當我們什麼都不寫的時候呢?

兄day,你可不是在寫 Python 啊

聊聊各家實作 Sort 的演算法

仔細看看 sort 的介紹

先來講講 原地(in place)

再來講講什麼是穩定 (stable)

var jojo= [
{
name:'Jonathan',
height:195
},{
name:'東方仗助',
height:180
},{
name:'Dio',
height:195
}
]

sort 的實作方式並沒有統一規範

What is the stability of the Array.sort() method in different browsers?

  • IE6+: stable
  • Firefox < 3: unstable
  • Firefox >= 3: stable
  • Chrome < 70: unstable
  • Chrome >= 70: stable
  • Opera < 10: unstable
  • Opera >= 10: stable
  • Safari 4: stable
  • Edge: unstable for long arrays

Mathias Bynens(他同時也是V8的開發者)提供的答案:

為什麼多數人會使用 sort 來抨擊 JavaScript

1. 沒有搞清楚 sort 是高階函數

2. 沒有閱讀文檔

3. 搞不懂 compare function

4. 被各家實作不一的 stable 、 unstable 搞死

寫在最後

--

--

--

If any interest, 👉 https://realdennis.me.

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
realdennis

realdennis

If any interest, 👉 https://realdennis.me.

More from Medium

How to create a function that will return an array with words inside a text

[Figure1: Super adorable mop dog living in Sendai, Japan]

JavaScript Promise: The Ultimate Promise

Delving into Developing: Intro to JavaScript Complex Data Types

#7 Building a JavaScript & HTML Browser RPG: Encountering Units , Fetching JSON Data