摘要：最近的一個項(xiàng)目中的需求要對一堆元素進(jìn)行排序，排序的依據(jù)是元素在頁面上面的坐標(biāo)位置，然后按照順序給所有元素一個編號。

最近的一個項(xiàng)目中的需求要對一堆元素進(jìn)行排序，排序的依據(jù)是元素在頁面上面的坐標(biāo)位置，然后按照順序給所有元素一個編號。如下圖所示：

做這個需求的是一個新入職的小伙，思考摸索了很久，他也沒有找到合適的方法。不得不說，部分新入職的小伙的思維能力還是有待提高啊。其實(shí)這個問題很簡單，就是對元素按照坐標(biāo)進(jìn)行排序。從圖上可以看出規(guī)則是x坐標(biāo)優(yōu)先于y坐標(biāo)，具體來說，兩個元素a和b：
如果a.x > b.x 則 a > b,
如果a.x < b.x 則 a < b,
如果a.x = b.x ，則當(dāng)a.y > b.y時 a > b，a.y < b.y時候，a < b

把上面的規(guī)則翻譯成JavaScript，并結(jié)合數(shù)組排序函數(shù)，很輕松就得出了解決方案：

array.sort(function(a,b){
   if(a.x > b.x ){
        return 1;
    }else if (a.x < b.x ){
        return - 1;
    }
    return a.y - b.y
})

以上規(guī)則 還可以整理成這樣一句話，就是： 當(dāng)x坐標(biāo)相同時，用y坐標(biāo)作為排序依據(jù)，單x坐標(biāo)不同時，用x坐標(biāo)作為排序依據(jù)，翻譯成代碼如下

array.sort(function(a,b){
   if(a.x  !=  b.x ){
        return a.x - b.x
    }else {
        return a.y - b.y
    }
})

改成三元運(yùn)算符就是：

array.sort(function(a,b){
        return (a.x  !=  b.x) ? (a.x - b.x) : (a.y - b.y)
})

上面已經(jīng)解決了問題中的需求，但是有沒有一個數(shù)學(xué)公式就可以解決這個問題呢？ 為什么要想數(shù)學(xué)公式，因?yàn)閿?shù)學(xué)公式是對于世間事物最好的、最優(yōu)雅的提煉。
經(jīng)過思考，可以考慮把x坐標(biāo)的差值的單位值和y坐標(biāo)的差值的單位值，通過一定的加權(quán)比例相加，由于x要占用的比例更高，所以考慮x的加權(quán)值更大，公式如下：

Math.sign(a.x - b.x) * 2  + Math.sign(a.y - b.y) 
當(dāng)a.x == b.x的時候，Math.sign(a.x - b.x) == 0，應(yīng)此判斷的依據(jù)自然是y坐標(biāo)。
當(dāng)a.x != b.x的時候,Math.sign(a.x - b.x)  2的值為 2 或者 -2 ， Math.sign(a.y - b.y) 的值 為1或者0，或者-1，所以相加的結(jié)果的正負(fù)是由Math.sign(a.x - b.x)  2決定，也就是x坐標(biāo)決定。
最終通過這個數(shù)學(xué)，改進(jìn)代碼如下：

array.sort(function(a,b){
        return Math.sign(a.x - b.x) * 2  + Math.sign(a.y - b.y) 
})

如果是三維坐標(biāo)（x,y,z) 排序，x優(yōu)先，y次之，z最末。 那么如果是用if判斷，代碼應(yīng)該如下：

array.sort(function(a,b){
        return (a.x  !=  b.x) ? (a.x - b.x) :（ (a.y != b.y) ?   (a.y - b.y) : (a.z - b.z)
})

x如果不相等，以x差值為判斷依據(jù)，x如果相等，如果y不相等，以y差值作為判斷依據(jù)，否則 以z值差值作為判斷依據(jù)。
如果同樣要構(gòu)建一個數(shù)學(xué)工具呢？思路和前面一樣，把x坐標(biāo)的差值的單位值和y坐標(biāo)的差值的單位值以及z坐標(biāo)的差值的單位值，通過一定的加權(quán)比例相加，由于x要占用的比例更高，所以考慮x的加權(quán)值更大，y要次之。如何來分配權(quán)值呢？ 因?yàn)椴荒苤皇莤的權(quán)值比y的大，其實(shí)應(yīng)該是x的權(quán)值比y和z的權(quán)值之和都要打，我最開始想的是這樣的：

Math.sign(a.x - b.x)  100  + Math.sign(a.y - b.y)   10 + Math.sign(a.z - b.z)

不過很快我否決了，用100和10可以滿足要求，但是感覺這個差值太多，沒有必要，
突然想到2的冪有一個公式，就是：

1 + 22 +... + 2n-1  = 2n  - 1

可以看出 2ⁿ大于1 + 2² +... + 2^n-1之和，應(yīng)此可以使用如下公式：

Math.sign(a.x - b.x)  4  + Math.sign(a.y - b.y)   2 + Math.sign(a.z - b.z)

根據(jù)這個公式，如果是n維向量的排序，大概如下：

Math.sign(a.x1 - b.x1)  Math.pow(2,n)  + Math.sign(a.x2 - b.x2)    Math.pow(2,n-1) + ... +  Math.sign(a.xn - b.xn) * 1

可能有人會說，我直接用條件判斷也可以做出來，你這個公式有什么用？ 其實(shí)我前面說了，因?yàn)閿?shù)學(xué)公式是對于世間事物最好的、最優(yōu)雅的提煉。
同時這也是一個有意思的思考練習(xí)，相信可以培養(yǎng)你的思維能力。 很多時候，多想想并沒有錯，雖然暫時看起來沒有太多作用。

歡迎關(guān)注公眾號“ITman彪叔”。彪叔，擁有10多年開發(fā)經(jīng)驗(yàn)，現(xiàn)任公司系統(tǒng)架構(gòu)師、技術(shù)總監(jiān)、技術(shù)培訓(xùn)師、職業(yè)規(guī)劃師。熟悉Java、JavaScript、Python語言，熟悉數(shù)據(jù)庫。熟悉java、nodejs應(yīng)用系統(tǒng)架構(gòu)，大數(shù)據(jù)高并發(fā)、高可用、分布式架構(gòu)。在計(jì)算機(jī)圖形學(xué)、WebGL、前端可視化方面有深入研究。對程序員思維能力訓(xùn)練和培訓(xùn)、程序員職業(yè)規(guī)劃有濃厚興趣。