成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

用sort實現(xiàn)orderby

jiekechoo / 2776人閱讀

摘要：工作到了這個年數(shù)感覺那些基本函數(shù)語法已經(jīng)跟人合一了根本不會為操作一些數(shù)據(jù)結(jié)構(gòu)而思考半天了在做小程序的時候遇到了個的場景結(jié)果發(fā)現(xiàn)沒有以為的那么簡單也許是之前不求甚解的原因那么現(xiàn)在來解決的問題問題的產(chǎn)生與探討方向在小程序中有個將的某一條置頂?shù)男?/p>

工作到了這個年數(shù), 感覺那些基本函數(shù)語法已經(jīng)跟人合一了, 根本不會為操作一些數(shù)據(jù)結(jié)構(gòu)而思考半天了. 在做小程序的時候遇到了個orderby的場景, 結(jié)果發(fā)現(xiàn)沒有以為的那么簡單. 也許是之前不求甚解的原因, 那么現(xiàn)在來解決orderby的問題.

問題的產(chǎn)生與探討方向

在小程序中有個將list的某一條置頂?shù)男枨? 在初始化數(shù)據(jù)到時候可以使用數(shù)據(jù)庫的orderby, 但在更新數(shù)據(jù)以后再重新初始化就顯得有些不妥, 所以我嘗試直接使用computed列表來解決這個問題.

所以現(xiàn)在的問題是: 輸入list, 輸出orderby置頂字段.

之前以為的sort很簡單, 我就嘗試了: arr.sort(i => i.stick). 字面看起來是根據(jù)stick字段來排序. 輸出結(jié)果一團糟. 仔細思考了下又嘗試了別的方法, 還是失敗, 才決定仔細想一下應(yīng)該如何處理.

對sort的理解與快速shuffle

先說一下之前對sort的理解.

sort接受的參數(shù)返回大于0或者小于0. 根據(jù)結(jié)果來排序.

所以有一個快速shuffle數(shù)組的方法:

arr.sort(() => Math.random() - 0.5)

因為函數(shù)的返回結(jié)果一半是大于0一半是小于0的(不嚴格, 但之后也認為概率是一半一半). 所以任何輸出進行了如此處理, 都會變成一個隨機順序的數(shù)組.

另外一個例子, 對一個數(shù)組: [1, 2, 3, 4, 5, 10, 11, 12]進行排序, 如果不傳參數(shù)排序結(jié)果是錯的, 因為默認是localCompare. 所以要寫成:

arr.sort((a, b) => a - b)

這樣才能得到正確從小到大的排列.

以上就是我多年以來對sort的所有理解. 所以才會寫出上面的: arr.sort(i => i.stick)這樣搞笑的東西. 因為理解是有問題的.

sort是如何排序的

因為不知道sort函數(shù)得到了結(jié)果后是如何排序的. 所以對sort的理解有問題. 而我們知道reduce就是從頭到尾遍歷并傳遞每次計算的結(jié)果. sort卻不知道. 所以打出每次的返回值來看一下每次得到返回值后sort做了些什么.

我們要對不同數(shù)組進行同樣的操作, 排序方法是一樣的, 先寫一下:

const log = (a, b) => {
    console.log(a, b, a - b > 0)
    return a - b
}

開始對不同數(shù)組進行排序: 先來1到5

[1, 2, 3, 4, 5].sort(log)

結(jié)果: [1, 2, 3, 4, 5]

2 1 true
3 2 true
4 3 true
5 4 true

嘗試: 從5到1

[5, 4, 3, 2, 1].sort(log)

結(jié)果: [1, 2, 3, 4, 5]

4 5 false
3 4 false
2 3 false
1 2 false

目前看來, sort應(yīng)該是插入排序.

[3, 5, 7, 9, 2, 1, 6].sort(log)

看log的時候我把當(dāng)前排序結(jié)果也打一下:

5 3 true [3, 5]
7 5 true [3, 5, 7]
9 7 true [3, 5, 7, 9]
2 9 false // 2還是與當(dāng)前最大的9比.結(jié)果第一次false
2 7 false // 于是一路比下來
2 5 false
2 3 false // 比到最小的, 于是確定了位置 [2, 3, 5, 7, 9]
1 5 false // 1選擇了與5比, 此時5是中間位置的數(shù), 而不是最大的數(shù)
1 3 false // 然后一個一個比較下來
1 2 false [1, 2, 3, 5, 7, 9]
6 5 true // 6還是于5比, 此時5也是中間位置的數(shù)
6 9 false // 沒有選擇與7, 而是與9比了
6 7 false

從這些log能得出一些粗淺的結(jié)論:

sort是插入排序

每次比較的數(shù)字會根據(jù)兩個因素來決定: 分別是之前比較的結(jié)果和當(dāng)前排序的位置

如何實現(xiàn)orderby

首先明確思路:

sort認為每個元素之間的關(guān)系是比大小, 所以我們需要做的是寫出任意兩個元素的相對順序的普遍公式.

先構(gòu)建一組數(shù)據(jù):

let gnrt = () => ({ age: Math.round(Math.random() * 50), height: Math.round(Math.random() * 200) })
let arr = Array.from({length: 10}).map(() => gnrt())

我們先建立純數(shù)字, 無順序的orderby來理這個思路.

let orderby = function (arr, ...orders) {
    return arr.sort((a, b) => {
        let res = 0
        for (let order of orders) {
            if (a[order] - b[order] !== 0) {
                res = a[order] - b[order]
                break
            } 
        }
        return res
    })
}

調(diào)用orderby(arr, "height", "age")就得到了理想的orderby結(jié)果了: 根據(jù)權(quán)重排序, 如果都一樣就保持順序.

#后續(xù)#

這個思路清晰以后, 做兼容就容易了:

如果要指定順序, 在排序參數(shù)里帶特征, 例如"height", "-height", 來決定在執(zhí)行的時候是a - b 還是b - a.

如果要指定排序函數(shù)(在非數(shù)字情況下). 把排序參數(shù)改寫成兼容function的, 判斷是string就執(zhí)行默認, 是function就調(diào)用function即可.

當(dāng)然, 功能越完善的函數(shù)就越復(fù)雜, 函數(shù)本身只是函數(shù)復(fù)雜度和業(yè)務(wù)復(fù)雜度交換的作用. 具體實現(xiàn)就不寫了.

所以置頂排序如何實現(xiàn)

我們已經(jīng)想清楚了orderby的實現(xiàn), 那么置頂排序是stick這個布爾值字段, 就必須根據(jù)我上面說的傳函數(shù)進去, 并且改寫orderby函數(shù).

這樣又要多些2個函數(shù), 所以我選擇:

[...arr.filter({stick} => stick), ...arr.filter({stick} => !stick)]

搞定.

原文地址

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/100311.html

相關(guān)文章

  • Laravel 多條件 where 查詢語句

    摘要：在使用開發(fā)應(yīng)用的時候，還是會經(jīng)常遇到多條件的查詢語句，比如一個網(wǎng)站的商品篩選頁面就有可能是這樣子這種方式的篩選其實我們就會使用多條件的語句來做，比如我們通常會看到類似下面的代碼那如果說，你需要一個默認的排序結(jié)果的話， 在使用 Laravel 開發(fā)應(yīng)用的時候，還是會經(jīng)常遇到多條件的查詢語句，比如一個網(wǎng)站的商品篩選頁面就有可能是這樣子： http://jd.com/products?col...

    sanyang 評論0 收藏0

  • React-Redux小應(yīng)用（一）-React_Redux_Appointment

    摘要：先來一波硬廣我的博客歡迎觀光傳送門這個小應(yīng)用使用創(chuàng)建演示地址，地址。這是之前的的版，之前的演示，改寫自的課程。 React-Redux-Appointment 先來一波硬廣：我的博客歡迎觀光：傳送門這個小應(yīng)用使用Create React App創(chuàng)建,演示地址:https://liliang-cn.github.io/react_redux_appointment，repo地址：http...

    CoorChice 評論0 收藏0

  • 前端數(shù)據(jù)模型Model;適用于多人團隊協(xié)作的開發(fā)模式

    摘要：前言本文講述的數(shù)據(jù)模型并不是一個庫，也不是需要的包，僅僅只是一種在多人團隊協(xié)作開發(fā)的時候擬定的規(guī)則。至少目前為止，我們的開發(fā)團隊再也沒用過雖然一開始也沒用，也不用擔(dān)心后臺數(shù)據(jù)的字段或結(jié)構(gòu)發(fā)生變動，真正實現(xiàn)前后臺并行開發(fā)的愉快模式。 前言 本文講述的數(shù)據(jù)模型并不是一個庫，也不是需要npm的包，僅僅只是一種在多人團隊協(xié)作開發(fā)的時候擬定的規(guī)則。至少目前為止，我們的開發(fā)團隊再也沒用過mock（...

    linkFly 評論0 收藏0

  • 30-seconds-code——Object

    摘要：英文文章來源于刪除對象中除指定鍵值的屬性用遞歸的方法用方法遍歷對象然后刪除不是在給定數(shù)組中的屬性如果你傳入，它將對該鍵所對應(yīng)的對象進行深度遍歷的變形非原著作對所有的鍵對應(yīng)的對象進行深度遍歷用方法遍歷對象然后刪除不是在給定數(shù)組中的屬性如 英文文章來源于：https://github.com/Chalarangelo/30-seconds-of-code/blob/master/READM...

    lbool 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<