摘要:工作到了這個(gè)年數(shù)感覺那些基本函數(shù)語(yǔ)法已經(jīng)跟人合一了根本不會(huì)為操作一些數(shù)據(jù)結(jié)構(gòu)而思考半天了在做小程序的時(shí)候遇到了個(gè)的場(chǎng)景結(jié)果發(fā)現(xiàn)沒有以為的那么簡(jiǎn)單也許是之前不求甚解的原因那么現(xiàn)在來(lái)解決的問題問題的產(chǎn)生與探討方向在小程序中有個(gè)將的某一條置頂?shù)男?/p>
工作到了這個(gè)年數(shù), 感覺那些基本函數(shù)語(yǔ)法已經(jīng)跟人合一了, 根本不會(huì)為操作一些數(shù)據(jù)結(jié)構(gòu)而思考半天了. 在做小程序的時(shí)候遇到了個(gè)orderby的場(chǎng)景, 結(jié)果發(fā)現(xiàn)沒有以為的那么簡(jiǎn)單. 也許是之前不求甚解的原因, 那么現(xiàn)在來(lái)解決orderby的問題.
問題的產(chǎn)生與探討方向在小程序中有個(gè)將list的某一條置頂?shù)男枨? 在初始化數(shù)據(jù)到時(shí)候可以使用數(shù)據(jù)庫(kù)的orderby, 但在更新數(shù)據(jù)以后再重新初始化就顯得有些不妥, 所以我嘗試直接使用computed列表來(lái)解決這個(gè)問題.
所以現(xiàn)在的問題是: 輸入list, 輸出orderby置頂字段.
之前以為的sort很簡(jiǎn)單, 我就嘗試了: arr.sort(i => i.stick). 字面看起來(lái)是根據(jù)stick字段來(lái)排序. 輸出結(jié)果一團(tuán)糟. 仔細(xì)思考了下又嘗試了別的方法, 還是失敗, 才決定仔細(xì)想一下應(yīng)該如何處理.
對(duì)sort的理解與快速shuffle先說(shuō)一下之前對(duì)sort的理解.
sort接受的參數(shù)返回大于0或者小于0. 根據(jù)結(jié)果來(lái)排序.
所以有一個(gè)快速shuffle數(shù)組的方法:
arr.sort(() => Math.random() - 0.5)
因?yàn)楹瘮?shù)的返回結(jié)果一半是大于0一半是小于0的(不嚴(yán)格, 但之后也認(rèn)為概率是一半一半). 所以任何輸出進(jìn)行了如此處理, 都會(huì)變成一個(gè)隨機(jī)順序的數(shù)組.
另外一個(gè)例子, 對(duì)一個(gè)數(shù)組: [1, 2, 3, 4, 5, 10, 11, 12]進(jìn)行排序, 如果不傳參數(shù)排序結(jié)果是錯(cuò)的, 因?yàn)槟J(rèn)是localCompare. 所以要寫成:
arr.sort((a, b) => a - b)
這樣才能得到正確從小到大的排列.
以上就是我多年以來(lái)對(duì)sort的所有理解. 所以才會(huì)寫出上面的: arr.sort(i => i.stick)這樣搞笑的東西. 因?yàn)槔斫馐怯袉栴}的.
sort是如何排序的因?yàn)椴恢纒ort函數(shù)得到了結(jié)果后是如何排序的. 所以對(duì)sort的理解有問題. 而我們知道reduce就是從頭到尾遍歷并傳遞每次計(jì)算的結(jié)果. sort卻不知道. 所以打出每次的返回值來(lái)看一下每次得到返回值后sort做了些什么.
我們要對(duì)不同數(shù)組進(jìn)行同樣的操作, 排序方法是一樣的, 先寫一下:
const log = (a, b) => { console.log(a, b, a - b > 0) return a - b }
開始對(duì)不同數(shù)組進(jìn)行排序: 先來(lái)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
目前看來(lái), sort應(yīng)該是插入排序.
[3, 5, 7, 9, 2, 1, 6].sort(log)
看log的時(shí)候我把當(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 // 于是一路比下來(lái) 2 5 false 2 3 false // 比到最小的, 于是確定了位置 [2, 3, 5, 7, 9] 1 5 false // 1選擇了與5比, 此時(shí)5是中間位置的數(shù), 而不是最大的數(shù) 1 3 false // 然后一個(gè)一個(gè)比較下來(lái) 1 2 false [1, 2, 3, 5, 7, 9] 6 5 true // 6還是于5比, 此時(shí)5也是中間位置的數(shù) 6 9 false // 沒有選擇與7, 而是與9比了 6 7 false
從這些log能得出一些粗淺的結(jié)論:
sort是插入排序
每次比較的數(shù)字會(huì)根據(jù)兩個(gè)因素來(lái)決定: 分別是之前比較的結(jié)果和當(dāng)前排序的位置
如何實(shí)現(xiàn)orderby首先明確思路:
sort認(rèn)為每個(gè)元素之間的關(guān)系是比大小, 所以我們需要做的是寫出任意兩個(gè)元素的相對(duì)順序的普遍公式.
先構(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ù)字, 無(wú)順序的orderby來(lái)理這個(gè)思路.
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ù)#
這個(gè)思路清晰以后, 做兼容就容易了:
如果要指定順序, 在排序參數(shù)里帶特征, 例如"height", "-height", 來(lái)決定在執(zhí)行的時(shí)候是a - b 還是b - a.
如果要指定排序函數(shù)(在非數(shù)字情況下). 把排序參數(shù)改寫成兼容function的, 判斷是string就執(zhí)行默認(rèn), 是function就調(diào)用function即可.
當(dāng)然, 功能越完善的函數(shù)就越復(fù)雜, 函數(shù)本身只是函數(shù)復(fù)雜度和業(yè)務(wù)復(fù)雜度交換的作用. 具體實(shí)現(xiàn)就不寫了.
所以置頂排序如何實(shí)現(xiàn)我們已經(jīng)想清楚了orderby的實(shí)現(xiàn), 那么置頂排序是stick這個(gè)布爾值字段, 就必須根據(jù)我上面說(shuō)的傳函數(shù)進(jìn)去, 并且改寫orderby函數(shù).
這樣又要多些2個(gè)函數(shù), 所以我選擇:
[...arr.filter({stick} => stick), ...arr.filter({stick} => !stick)]
搞定.
原文地址
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://specialneedsforspecialkids.com/yun/100311.html
摘要:在使用開發(fā)應(yīng)用的時(shí)候,還是會(huì)經(jīng)常遇到多條件的查詢語(yǔ)句,比如一個(gè)網(wǎng)站的商品篩選頁(yè)面就有可能是這樣子這種方式的篩選其實(shí)我們就會(huì)使用多條件的語(yǔ)句來(lái)做,比如我們通常會(huì)看到類似下面的代碼那如果說(shuō),你需要一個(gè)默認(rèn)的排序結(jié)果的話, 在使用 Laravel 開發(fā)應(yīng)用的時(shí)候,還是會(huì)經(jīng)常遇到多條件的查詢語(yǔ)句,比如一個(gè)網(wǎng)站的商品篩選頁(yè)面就有可能是這樣子: http://jd.com/products?col...
摘要:先來(lái)一波硬廣我的博客歡迎觀光傳送門這個(gè)小應(yīng)用使用創(chuàng)建演示地址,地址。這是之前的的版,之前的演示,改寫自的課程。 React-Redux-Appointment 先來(lái)一波硬廣:我的博客歡迎觀光:傳送門這個(gè)小應(yīng)用使用Create React App創(chuàng)建,演示地址:https://liliang-cn.github.io/react_redux_appointment,repo地址:http...
摘要:前言本文講述的數(shù)據(jù)模型并不是一個(gè)庫(kù),也不是需要的包,僅僅只是一種在多人團(tuán)隊(duì)協(xié)作開發(fā)的時(shí)候擬定的規(guī)則。至少目前為止,我們的開發(fā)團(tuán)隊(duì)再也沒用過(guò)雖然一開始也沒用,也不用擔(dān)心后臺(tái)數(shù)據(jù)的字段或結(jié)構(gòu)發(fā)生變動(dòng),真正實(shí)現(xiàn)前后臺(tái)并行開發(fā)的愉快模式。 前言 本文講述的數(shù)據(jù)模型并不是一個(gè)庫(kù),也不是需要npm的包,僅僅只是一種在多人團(tuán)隊(duì)協(xié)作開發(fā)的時(shí)候擬定的規(guī)則。至少目前為止,我們的開發(fā)團(tuán)隊(duì)再也沒用過(guò)mock(...
摘要:英文文章來(lái)源于刪除對(duì)象中除指定鍵值的屬性用遞歸的方法用方法遍歷對(duì)象然后刪除不是在給定數(shù)組中的屬性如果你傳入,它將對(duì)該鍵所對(duì)應(yīng)的對(duì)象進(jìn)行深度遍歷的變形非原著作對(duì)所有的鍵對(duì)應(yīng)的對(duì)象進(jìn)行深度遍歷用方法遍歷對(duì)象然后刪除不是在給定數(shù)組中的屬性如 英文文章來(lái)源于:https://github.com/Chalarangelo/30-seconds-of-code/blob/master/READM...
閱讀 3338·2021-11-22 15:22
閱讀 2862·2021-10-12 10:12
閱讀 2156·2021-08-21 14:10
閱讀 3822·2021-08-19 11:13
閱讀 2841·2019-08-30 15:43
閱讀 3223·2019-08-29 16:52
閱讀 438·2019-08-29 16:41
閱讀 1427·2019-08-29 12:53