[TOC] #### 1. 情景再現(xiàn) --- 最近在開發(fā)一個物聯(lián)網(wǎng)項目時,需要對一個數(shù)據(jù)進行排序處理,這個數(shù)據(jù)結(jié)構(gòu)如下所示: 需要根據(jù) position 屬性將數(shù)組元素進行升序排序,換做是你,代碼會怎么寫? ```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 }, ] ``` 我的第一個想法是這樣的:先取出數(shù)組元素中的 position 屬性,然后對其進行升序排列,再查詢每一個 position 在原數(shù)組中的下標(biāo),最后構(gòu)建出所需的數(shù)據(jù)結(jié)構(gòu),代碼如下所示。這種寫法顯然是比較復(fù)雜的,于是我在想有沒有更好的方法實現(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ù)的,此時說明了基礎(chǔ)牢固的重要性 Array.sort() 默認把數(shù)組元素先轉(zhuǎn)為 string 類型,字符串是根據(jù) ASCII 碼進行升序排列 ```javascript // 你意料之中的結(jié)果 [5, 3, 8, 6].sort();// [3, 5, 8, 6] // 下面的結(jié)果可能是你意料之外的 [10, 20, 1, 2].sort();// [1, 10, 2, 20] ``` 幸運的是,Array.sort() 也是一個高階函數(shù),支持傳入一個比較函數(shù)來自定義排序 傳入的函數(shù)返回值如果小于 0,前后兩個元素會交換位置 ```javascript // x 后一個元素 y 當(dāng)前一個元素 [10, 20, 1, 2].sort((x, y) => x - y);// [1, 2, 10, 20] ``` 回到上面的問題,對于數(shù)組元素是一個對象,根據(jù)對象中某個屬性進行排序??梢赃@樣寫: ```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 }, ] // 代碼非常簡潔易懂 data.sort((x, y) => x.position - y.position) ```