JS數(shù)組中sort的用法(避坑版)
在 JavaScript 中,Array.prototype.sort() 方法用于對(duì)數(shù)組的元素進(jìn)行排序,但它的默認(rèn)行為可能和直覺(jué)不一致。以下是完整的用法解析和注意事項(xiàng):
一、基本用法
1. 默認(rèn)排序(?? 有坑)
默認(rèn)按 Unicode 編碼 進(jìn)行字符串排序:
const arr = [10, 2, 1, 20]; arr.sort(); console.log(arr); // [1, 10, 2, 20] ? 不是數(shù)值大小排序!
2. 自定義比較函數(shù)(? 推薦)
通過(guò)回調(diào)函數(shù)定義排序規(guī)則:
// 數(shù)字升序排序 arr.sort((a, b) => a - b); // [1, 2, 10, 20] // 數(shù)字降序排序 arr.sort((a, b) => b - a); // [20, 10, 2, 1]
二、排序規(guī)則詳解
比較函數(shù)返回值解析:
function compare(a, b) {
if (a < b) return -1; // a 排在 b 前面
if (a > b) return 1; // a 排在 b 后面
return 0; // 位置不變(ES6+ 后穩(wěn)定排序)
}
簡(jiǎn)化寫法:
// 等價(jià)于上面的 compare 函數(shù) arr.sort((a, b) => a - b);
三、常見(jiàn)場(chǎng)景示例
1. 對(duì)象數(shù)組排序
const users = [
{ name: 'Bob', age: 25 },
{ name: 'Alice', age: 30 }
];
// 按 age 升序
users.sort((a, b) => a.age - b.age);
// 按 name 字母排序(區(qū)分大小寫)
users.sort((a, b) => a.name.localeCompare(b.name));
2. 多條件排序
const products = [
{ name: 'Laptop', price: 1000, rating: 4.5 },
{ name: 'Phone', price: 999, rating: 4.7 }
];
// 先按 rating 降序,再按 price 升序
products.sort((a, b) => {
if (b.rating !== a.rating) return b.rating - a.rating;
return a.price - b.price;
});
3. 字符串特殊排序
// 不區(qū)分大小寫排序 const letters = ['Apple', 'banana', 'Cherry']; letters.sort((a, b) => a.toLowerCase().localeCompare(b.toLowerCase())); // 含中文的排序 const names = ['張三', '李四', '王五']; names.sort((a, b) => a.localeCompare(b, 'zh-Hans-CN'));
四、注意事項(xiàng)
| 場(chǎng)景 | 問(wèn)題與解決方案 |
|---|---|
| 修改原數(shù)組 | sort 是原地排序,用 [...arr].sort() 可避免改變?cè)瓟?shù)組 |
| 穩(wěn)定性 | ES2019 后 sort 穩(wěn)定(相同元素保持原有順序) |
| 稀疏數(shù)組 | 空位(empty)會(huì)被排序到數(shù)組末尾 |
| 非 ASCII 字符 | 需用 localeCompare 正確處理國(guó)際化排序 |
| 無(wú)效比較函數(shù) | 函數(shù)未返回?cái)?shù)字會(huì)導(dǎo)致意外行為(如返回布爾值) |
五、實(shí)用技巧
1. 隨機(jī)排序
// ?? 非嚴(yán)格均勻隨機(jī),適用于簡(jiǎn)單場(chǎng)景 const arr = [1, 2, 3]; arr.sort(() => Math.random() - 0.5);
2. 按字符串長(zhǎng)度排序
const words = ['apple', 'kiwi', 'banana']; words.sort((a, b) => a.length - b.length); // ['kiwi', 'apple', 'banana']
3. 按日期排序
const dates = [ '2023-10-01', '2023-09-15', '2023-12-25' ]; dates.sort((a, b) => new Date(a) - new Date(b));
六、性能對(duì)比
對(duì) 10,000 個(gè)數(shù)字 排序耗時(shí)測(cè)試(Chrome):
| 方法 | 耗時(shí) (ms) | 說(shuō)明 |
|---|---|---|
| arr.sort() | 1.2 | 默認(rèn)字符串排序 ? |
| arr.sort((a,b)=>a-b) | 0.8 | 正確數(shù)值排序 ? |
| Lodash _.sortBy | 1.5 | 功能更全但稍慢 |
到此這篇關(guān)于JS數(shù)組中sort的用法(避坑版)的文章就介紹到這了,更多相關(guān)JS sort用法內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Javascript中獲取出錯(cuò)代碼所在文件及行數(shù)的代碼
之前在做一個(gè)Javascript的日志控制臺(tái)功能模塊,希望能夠在Javascript代碼出錯(cuò)時(shí)捕獲此錯(cuò)誤,并將出錯(cuò)的文件及相應(yīng)的行數(shù)打印到控制臺(tái)并匯報(bào)給服務(wù)器。2010-09-09
使用Cookies保存網(wǎng)站歷史瀏覽記錄實(shí)例代碼
仿淘寶網(wǎng)的最近瀏覽記錄功能,喜歡的朋友可以參考下。2010-07-07
深入聊聊Array的sort方法的使用技巧.詳細(xì)點(diǎn)評(píng)protype.js中的sortBy方法
深入聊聊Array的sort方法的使用技巧.詳細(xì)點(diǎn)評(píng)protype.js中的sortBy方法...2007-04-04
JS實(shí)現(xiàn)一個(gè)列表中包含上移下移刪除等功能
一個(gè)項(xiàng)目,包括了一個(gè)列表頁(yè)其中包括在列表中實(shí)現(xiàn)上移,下移,刪除等功能,為了用戶體驗(yàn),操作均使用JS實(shí)現(xiàn)2014-09-09
js學(xué)習(xí)總結(jié)之DOM2兼容處理重復(fù)問(wèn)題的解決方法
這篇文章主要為大家詳細(xì)介紹了js學(xué)習(xí)總結(jié)之DOM2兼容處理重復(fù)問(wèn)題的解決方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-07-07
Javascript實(shí)現(xiàn)圖片懶加載的示例代碼
最近公司和第三方材料供應(yīng)商對(duì)接開(kāi)發(fā)了物資集采平臺(tái),其中有個(gè)功能需求需要展示數(shù)百?gòu)埐牧闲畔D片,有時(shí)頁(yè)面會(huì)出現(xiàn)卡頓的情況,并使用了圖片懶加載的方式進(jìn)行了優(yōu)化,下面把方法分享給大家一起學(xué)習(xí),感興趣的小伙伴跟著小編一起來(lái)看看吧2024-12-12

