[TOC] #### 1. 情景再現(xiàn) --- 最近在開(kāi)發(fā)一個(gè)物聯(lián)網(wǎng)項(xiàng)目時(shí)，需要對(duì)一個(gè)數(shù)據(jù)進(jìn)行排序處理，這個(gè)數(shù)據(jù)結(jié)構(gòu)如下所示： 需要根據(jù) position 屬性將數(shù)組元素進(jìn)行升序排序，換做是你，代碼會(huì)怎么寫(xiě)？ ```javascript const data = [ { id: 1, name: 'maria', position: 17 }, { id: 2, name: 'liang', position: 18 }, { id: 3, name: 'monday', position: 16 }, { id: 4, name: 'monday', position: 15 }, { id: 5, name: 'monday', position: 19 }, ] ``` 我的第一個(gè)想法是這樣的：先取出數(shù)組元素中的 position 屬性，然后對(duì)其進(jìn)行升序排列，再查詢(xún)每一個(gè) position 在原數(shù)組中的下標(biāo)，最后構(gòu)建出所需的數(shù)據(jù)結(jié)構(gòu)，代碼如下所示。這種寫(xiě)法顯然是比較復(fù)雜的，于是我在想有沒(méi)有更好的方法實(shí)現(xiàn) ```javascript const arr = data.map(({ position }) => position) arr.sort() const newArr = arr.map(val => { return data.findIndex((item, index) => item.position == val) }).map(item => data[item]) ``` #### 2. Array.sort() --- 眾所周知，Array.sort() 方法用于數(shù)組排序，使用它一般都是不帶參數(shù)，但它是有參數(shù)的，此時(shí)說(shuō)明了基礎(chǔ)牢固的重要性 Array.sort() 默認(rèn)把數(shù)組元素先轉(zhuǎn)為 string 類(lèi)型，字符串是根據(jù) ASCII 碼進(jìn)行升序排列 ```javascript // 你意料之中的結(jié)果 [5, 3, 8, 6].sort();// [3, 5, 8, 6] // 下面的結(jié)果可能是你意料之外的 [10, 20, 1, 2].sort();// [1, 10, 2, 20] ``` 幸運(yùn)的是，Array.sort() 也是一個(gè)高階函數(shù)，支持傳入一個(gè)比較函數(shù)來(lái)自定義排序 傳入的函數(shù)返回值如果小于 0，前后兩個(gè)元素會(huì)交換位置 ```javascript // x 后一個(gè)元素 y 當(dāng)前一個(gè)元素 [10, 20, 1, 2].sort((x, y) => x - y);// [1, 2, 10, 20] ``` 回到上面的問(wèn)題，對(duì)于數(shù)組元素是一個(gè)對(duì)象，根據(jù)對(duì)象中某個(gè)屬性進(jìn)行排序。可以這樣寫(xiě)： ```javascript const data = [ { id: 1, name: 'maria', position: 17 }, { id: 2, name: 'liang', position: 18 }, { id: 3, name: 'monday', position: 16 }, { id: 4, name: 'monday', position: 15 }, { id: 5, name: 'monday', position: 19 }, ] // 代碼非常簡(jiǎn)潔易懂 data.sort((x, y) => x.position - y.position) ```