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