JavaScript中使用Set對數(shù)組去重并排序的示例詳解
在日常的前端開發(fā)中，我們經(jīng)常會遇到這樣一個場景：對一個數(shù)組進(jìn)行去重并排序。今天我們就通過一段簡單的代碼來演示如何在 JavaScript 中快速實(shí)現(xiàn)這個功能。
一、原始數(shù)據(jù)
const arr = [1, 2, 11, 2, 5, 4, 1, 2, 5, 4, 1, 254, 1, 25, 41];
這是一個包含重復(fù)元素的數(shù)組。我們的目標(biāo)是：
- 去除數(shù)組中的重復(fù)值；
- 將結(jié)果從小到大排序。
二、使用 Set 去重
const testSet = new Set(arr);
Set 是 ES6 引入的一種新的數(shù)據(jù)結(jié)構(gòu)，它類似于數(shù)組，但其中的值是唯一的。將數(shù)組傳入 Set 構(gòu)造函數(shù)時，會自動去除重復(fù)元素。
此時，testSet 的內(nèi)容是一個無重復(fù)元素的集合（但不是數(shù)組）：
Set(9) {1, 2, 11, 5, 4, 254, 25, 41}
三、轉(zhuǎn)換為數(shù)組
const testArr = [...testSet];
Set 不是數(shù)組，因此無法直接使用數(shù)組的方法（如 sort）。我們可以使用擴(kuò)展運(yùn)算符（...）將其展開，并放入一個新的數(shù)組中。
此時 testArr 是一個已去重的普通數(shù)組：
[1, 2, 11, 5, 4, 254, 25, 41]
四、進(jìn)行排序
testArr.sort((a, b) => a - b);
JavaScript 的數(shù)組 sort() 方法默認(rèn)按照字符串的 Unicode 順序排序，這在處理數(shù)字時常常會得出錯誤結(jié)果（例如 [1, 2, 11] 會變成 [1, 11, 2]）。因此，我們需要傳入一個比較函數(shù) (a, b) => a - b 來確保按數(shù)值從小到大排序。
最終的 testArr 是：
[1, 2, 4, 5, 11, 25, 41, 254]
五、完整代碼回顧
const arr = [1, 2, 11, 2, 5, 4, 1, 2, 5, 4, 1, 254, 1, 25, 41]; const testSet = new Set(arr); // 去重 const testArr = [...testSet]; // 轉(zhuǎn)換為數(shù)組 testArr.sort((a, b) => a - b); // 數(shù)值排序 console.log(testArr); // 輸出結(jié)果
六、總結(jié)
這段代碼展示了一個非常實(shí)用的 JavaScript 小技巧，結(jié)合了 ES6 的 Set 和現(xiàn)代語法糖 ... 展開符，搭配 sort 函數(shù)，使得數(shù)組的去重與排序一氣呵成，簡潔高效，極具實(shí)用性。
這種寫法在處理用戶輸入、表單數(shù)據(jù)、日志數(shù)據(jù)分析等場景中都非常常見，值得掌握。
以上就是JavaScript中使用Set對數(shù)組去重并排序的示例詳解的詳細(xì)內(nèi)容，更多關(guān)于JavaScript Set數(shù)組去重并排序的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
Flexible.js可伸縮布局實(shí)現(xiàn)方法詳解
這篇文章主要介紹了Flexible.js可伸縮布局實(shí)現(xiàn)方法詳解,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-11-11
javascript實(shí)現(xiàn)表單驗(yàn)證
這篇文章主要介紹了javascript實(shí)現(xiàn)表單驗(yàn)證的相關(guān)資料，以一個完整的實(shí)例對javascript實(shí)現(xiàn)表單驗(yàn)證的方法進(jìn)行分析，感興趣的小伙伴們可以參考一下2016-01-01
微信小程序?qū)崿F(xiàn)選擇內(nèi)容顯示對應(yīng)內(nèi)容
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)選擇內(nèi)容顯示對應(yīng)內(nèi)容，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
JavaScript中fetch流式實(shí)現(xiàn)中斷重連
在JavaScript中,當(dāng)使用fetch API發(fā)送網(wǎng)絡(luò)請求時可能會遇到中斷的錯誤,這篇文章主要介紹了JavaScript中fetch流式實(shí)現(xiàn)中斷重連的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2026-03-03
這篇文章主要介紹了js實(shí)現(xiàn)簡單的省市縣三級聯(lián)動效果,以完整實(shí)例形式分析了JavaScript實(shí)現(xiàn)省市縣三級聯(lián)動效果的具體步驟與相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2016-05-05
javascript動態(tài)添加樣式(行內(nèi)式/嵌入式/外鏈?zhǔn)降纫?guī)則)
添加CSS的方式有行內(nèi)式、嵌入式、外鏈?zhǔn)健?dǎo)入式，下面為大家詳細(xì)介紹下javascript動態(tài)添加以上樣式規(guī)則的方法，感興趣的朋友可以參考下哈2013-06-06
js加強(qiáng)的經(jīng)典分頁實(shí)例，需要的朋友可以參考一下2013-03-03
JS實(shí)現(xiàn)的點(diǎn)擊表頭排序功能示例
這篇文章主要介紹了JS實(shí)現(xiàn)的點(diǎn)擊表頭排序功能,可實(shí)現(xiàn)針對表格中的字母、數(shù)字、日期等格式進(jìn)行排序的功能,涉及javascript針對頁面table元素的獲取及字符串、數(shù)字等排序操作相關(guān)技巧,需要的朋友可以參考下2017-03-03
Json實(shí)現(xiàn)傳值到后臺代碼實(shí)例
這篇文章主要介紹了Json實(shí)現(xiàn)傳值到后臺代碼實(shí)例,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-06-06
這篇文章主要是對jquery檢測元素是否存在的實(shí)例代碼進(jìn)行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助2013-11-11