JS實現數組去重

????????數組去重,一般都是在面試的時候才會碰到,一般是要求手寫數組去重方法的代碼。如果是被提問到,數組去重的方法有哪些?你能答出其中的 10 種,面試官很有可能對你刮目相看。

????????在真實的項目中碰到的數組去重,一般都是后臺去處理,很少讓前端處理數組去重。雖然日常項目用到的概率比較低,但還是需要了解一下,以防面試的時候可能回被問到。

????????注:寫的匆忙,加上這幾天有點忙,還沒有非常認真核對過,不過思路是沒有問題,可能一些小細節出錯而已。

一、利用 ES6 Set 去重(ES6 中最常用)

function unique (arr) {return Array.from(new Set(arr))
}
var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];
console.log(unique(arr))//[1, "true", true, 15, false, undefined, null, NaN, "NaN", 0, "a", {}, {}]

????????不考慮兼容性,這種去重的方法代碼最少。這種方法還無法去掉?{}?空對象,后面的高階方法會添加去掉重復?{}?的方法。

二、利用 for 嵌套 for,然后 splice 去重(ES5 中最常用)

function unique(arr){            for(var i=0; i<arr.length; i++){for(var j=i+1; j<arr.length; j++){if(arr[i]==arr[j]){         //第一個等同于第二個,splice方法刪除第二個arr.splice(j,1);j--;}}}
return arr;
}
var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];console.log(unique(arr))//[1, "true", 15, false, undefined, NaN, NaN, "NaN", "a", {…}, {…}]     //NaN和{}沒有去重,兩個null直接消失了

????????雙層循環,外層循環元素,內層循環時比較值。值相同時,則刪去這個值。

三、利用 indexOf 去重

function unique(arr) {if (!Array.isArray(arr)) {console.log('type error!')return}var array = [];for (var i = 0; i < arr.length; i++) {if (array .indexOf(arr[i]) === -1) {array .push(arr[i])}}return array;
}
var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];
console.log(unique(arr))// [1, "true", true, 15, false, undefined, null, NaN, NaN, "NaN", 0, "a", {…}, {…}]  //NaN、{}沒有去重

????????新建一個空的結果數組,for 循環原數組,判斷結果數組是否存在當前元素,如果有相同的值則跳過,不相同則 push 進數組。

四、利用 sort()

function unique(arr) {if (!Array.isArray(arr)) {console.log('type error!')return;}arr = arr.sort()var arrry= [arr[0]];for (var i = 1; i < arr.length; i++) {if (arr[i] !== arr[i-1]) {arrry.push(arr[i]);}}return arrry;
}var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];console.log(unique(arr))
//?[0, 1, 15, "NaN", NaN, NaN, {…}, {…}, "a", false, null, true, "true", undefined]      //NaN、{}沒有去重

????????利用?sort()?排序方法,然后根據排序后的結果進行遍歷及相鄰元素比對。

五、利用對象的屬性不能相同的特點進行去重(這種數組去重的方法有問題,不建議用,有待改進)

function unique(arr) {if (!Array.isArray(arr)) {console.log('type error!')return}var arrry= [];var  obj = {};for (var i = 0; i < arr.length; i++) {if (!obj[arr[i]]) {arrry.push(arr[i])obj[arr[i]] = 1} else {obj[arr[i]]++}}return arrry;
}var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];console.log(unique(arr))
//[1, "true", 15, false, undefined, null, NaN, 0, "a", {…}]    //兩個true直接去掉了,NaN和{}去重

六、利用 includes

function unique(arr) {if (!Array.isArray(arr)) {console.log('type error!')return}var array =[];for(var i = 0; i < arr.length; i++) {if( !array.includes( arr[i]) ) {//includes 檢測數組是否有某個值array.push(arr[i]);}}return array
}
var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];console.log(unique(arr))//[1, "true", true, 15, false, undefined, null, NaN, "NaN", 0, "a", {…}, {…}]     //{}沒有去重

七、利用 hasOwnProperty

function unique(arr) {var obj = {};return arr.filter(function(item, index, arr){return obj.hasOwnProperty(typeof item + item) ? false : (obj[typeof item + item] = true)})
}var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];console.log(unique(arr))
//[1, "true", true, 15, false, undefined, null, NaN, "NaN", 0, "a", {…}]   //所有的都去重了

????????利用 hasOwnProperty 判斷是否存在對象屬性

八、利用 filter

function unique(arr) {return arr.filter(function(item, index, arr) {//當前元素,在原始數組中的第一個索引==當前索引值,否則返回當前元素return arr.indexOf(item, 0) === index;});
}var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];console.log(unique(arr))
//[1, "true", true, 15, false, undefined, null, "NaN", 0, "a", {…}, {…}]

九、利用遞歸去重

function unique(arr) {var array= arr;var len = array.length;array.sort(function(a,b){   //排序后更加方便去重return a - b;})function loop(index){if(index >= 1){if(array[index] === array[index-1]){array.splice(index,1);}loop(index - 1);    //遞歸loop,然后數組去重}}loop(len-1);return array;
}var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];
console.log(unique(arr))
//[1, "a", "true", true, 15, false, 1, {…}, null, NaN, NaN, "NaN", 0, "a", {…}, undefined]

十、利用 Map 數據結構去重

function arrayNonRepeatfy(arr) {let map = new Map();let array = new Array();  // 數組用于返回結果for (let i = 0; i < arr.length; i++) {if(map .has(arr[i])) {  // 如果有該key值map .set(arr[i], true); } else { map .set(arr[i], false);   // 如果沒有該key值array .push(arr[i]);}} return array ;
}var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];console.log(unique(arr))
//[1, "a", "true", true, 15, false, 1, {…}, null, NaN, NaN, "NaN", 0, "a", {…}, undefined]

????????創建一個空 Map 數據結構,遍歷需要去重的數組,把數組的每一個元素作為 key 存到 Map 中。由于 Map 中不會出現相同的 key 值,所以最終得到的就是去重后的結果。

十一、利用 reduce+includes

function unique(arr){return arr.reduce((prev,cur) => prev.includes(cur) ? prev : [...prev,cur],[]);
}
var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];
console.log(unique(arr));
//?[1, "true", true, 15, false, undefined, null, NaN, "NaN", 0, "a", {…}, {…}]

十二、[...new Set(arr)]

[...new Set(arr)] 
//代碼就是這么少----(其實,嚴格來說并不算是一種,相對于第一種方法來說只是簡化了代碼)

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/166777.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/166777.shtml
英文地址,請注明出處:http://en.pswp.cn/news/166777.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

數據結構-樹

參考&#xff1a;https://www.hello-algo.com/chapter_tree/binary_tree/#711 1. 介紹 樹存儲不同于數組和鏈表的地方在于既可以保證數據檢索的速度&#xff0c;又可以保證數據插入刪除修改的速度&#xff0c;二者兼顧。 二叉樹是一種很重要的數據結構&#xff0c;是非線性的…

【學習篇】Linux中grep、sed、awk

Linux 文本處理三劍客 – awk, sed, grep grep過濾文本 https://zhuanlan.zhihu.com/p/561445240 grep 是 Linux/Unix 系統中的一個命令行工具&#xff0c;用于從文件中搜索文本或字符串。grep 代表全局正則表達式打印。當我們使用指定字符串運行 grep 命令時&#xff0c;如…

Mysql并發時常見的死鎖及解決方法

使用數據庫時&#xff0c;有時會出現死鎖。對于實際應用來說&#xff0c;就是出現系統卡頓。 死鎖是指兩個或兩個以上的事務在執行過程中&#xff0c;因爭奪資源而造成的一種互相等待的現象。就是所謂的鎖資源請求產生了回路現象&#xff0c;即死循環&#xff0c;此時稱系統處于…

星河創新,開拓新紀!2023“星河產業應用創新獎”報名全面開啟!

科技的浪潮洶涌而至&#xff0c;人工智能正悄無聲息地滲透進我們生活的每一個角落&#xff0c;成為推動社會奔騰向前的強大引擎。 隨著大模型時代到來&#xff0c;更多的創新者涌現出來&#xff0c;他們正積極探索AI與實體的深度融合&#xff0c;解決行業難題&#xff0c;開拓…

算法的奧秘:種類、特性及應用詳解(算法導論筆記1)

算法&#xff0c;是計算機科學領域的靈魂&#xff0c;是解決問題的重要工具。在算法的世界里&#xff0c;有著各種各樣的種類和特性。今天&#xff0c;我將帶各位踏上一段探索算法種類的旅程&#xff0c;分享一些常見的算法種類&#xff0c;并給出相應的實踐和案例分析。希望通…

c# 微信小程序支付,訂單錄入發貨

微信改動&#xff0c;大家一起改&#xff0c;來吧 private string GetAccessToken(string openid){string AppID "";string AppSecret "";string url "https://api.weixin.qq.com/cgi-bin/token?grant_typeclient_credential&appid"AppI…

華納云:Linux每天自動備份mysql數據庫怎么實現

在 Linux 系統中&#xff0c;你可以使用 cron 任務來定期執行 MySQL 數據庫備份。以下是一個簡單的步驟&#xff0c;演示如何設置每天自動備份 MySQL 數據庫&#xff1a; 創建備份腳本&#xff1a; 創建一個 Shell 腳本&#xff0c;其中包含備份 MySQL 數據庫的命令。假設腳本名…

【目標檢測】保姆級別教程從零開始實現基于Yolov8的一次性筷子計數

前言 一&#xff0c;環境配置 一&#xff0c;虛擬環境創建 二&#xff0c;安裝資源包 前言 最近事情比較少&#xff0c;無意間刷到群聊里分享的基于百度飛漿平臺的一次性筷子檢測&#xff0c;感覺很有意思&#xff0c;恰巧自己最近在學習Yolov8&#xff0c;于是看看能不能復…

前端JS數據時間排序

一、sort()方法 var data [ { name:‘1’, time:‘2019-04-26 10:53:19’ }, { name:‘2’, time:‘2019-04-26 10:51:19’ },{ name:‘3’, time:‘2019-04-26 11:04:32’ },{ name:‘4’, time:‘2019-04-26 11:05:32’ } ] data.sort(function(a,b){ return a.time < b…

js進階筆記之作用域

目錄 全局作用域 局部作用域 函數作用域 塊作用域 作用域鏈 閉包 垃圾回收機制 作用域&#xff08;scope&#xff09;規定了變量能夠被訪問的“范圍”&#xff0c;離開了這個“范圍”變量便不能被訪問&#xff0c;作用域分為全局作用域和局部作用域。 全局作用域 <…

【Go語言從入門到實戰】反射編程、Unsafe篇

反射編程 reflect.TypeOf vs reflect.ValueOf func TestTypeAndValue(t *testing.T) {var a int64 10t.Log(reflect.TypeOf(a), reflect.ValueOf(a))t.Log(reflect.ValueOf(a).Type()) }判斷類型 - Kind() 當我們需要對反射回來的類型做判斷時&#xff0c;Go 語言內置了一個…

【23真題】最簡單的211!均分141分!

今天分享的是23年河海大學863的信號與系統試題及解析。 我猜測是由于23年太簡單&#xff0c;均分都141分&#xff0c;導致24考研臨時新增一門數字信號處理&#xff01;今年考研的同學趕不上這么簡單的專業課啦&#xff01; 本套試卷難度分析&#xff1a;平均分為102和141分&a…

ECharts與DataV:數據可視化的得力助手

文章目錄 引言一、ECharts簡介優勢&#xff1a;劣勢&#xff1a; 二、DataV簡介優勢&#xff1a;劣勢&#xff1a; 三、ECharts與DataV的聯系四、區別與選擇五、如何選擇根據需求選擇技術棧考慮預算和商業考慮 結論我是將軍&#xff0c;我一直都在&#xff0c;。&#xff01; 引…

LeetCode題解:13. 羅馬數字轉整數,哈希表,JavaScript,詳細注釋

原題鏈接&#xff1a;13. 羅馬數字轉整數 解題思路&#xff1a; 本題涉及到的羅馬數字都是唯一的&#xff0c;因此可以創建一個哈希表&#xff0c;存儲羅馬數字和整數的對應關系。遍歷s&#xff0c;分別截取從i開始的2位和1位字符串&#xff0c;查看其在哈希表中的羅馬數字對…

pytest調用其他測試用例方法

pytest調用其他測試用例方法 一. 第一種方法&#xff0c;測試用例前置pytest.fixture() def test1():print("我是用例一") pytest.fixture(test1) def test2():print("我是用例二")二.第二種方法,如果不是同一文件中測試用例調用或者同一py文件中 def t…

3.10-容器的操作

這一節講解一下對于container我們可以進行哪些操作&#xff1f; 可以使用以下命令來停止正在運行的Docker容器&#xff1a; docker container stop <CONTAINER ID> 關于運行中的容器&#xff0c;我們可以進行的操作&#xff1a; 第一個是docker exec命令&#xff0c;這個…

NLP實踐——LLM生成過程中防止重復循環

NLP實踐——LLM生成過程中防止重復 1. 準備工作2. 問題分析3. 創建processor3.1 防止重復生成的processor3.2 防止數字無規則循環的processor 4. 使用 本文介紹如何使用LogitsProcessor避免大模型在生成過程中出現重復的問題。 1. 準備工作 首先實例化一個大模型&#xff0c;…

實時語音克隆:5 秒內生成任意文本的語音 | 開源日報 No.84

CorentinJ/Real-Time-Voice-Cloning Stars: 43.3k License: NOASSERTION 這個開源項目是一個實時語音克隆工具&#xff0c;可以在5秒內復制一種聲音&#xff0c;并生成任意文本的語音。 該項目的主要功能包括&#xff1a; 從幾秒鐘的錄音中創建聲紋模型根據給定文本使用參考…

數字化轉型沒錢?沒人?沒IT?低代碼平臺輕松幫你搞定

隨著數字技術的不斷滲透&#xff0c;數字化已經不僅僅是一個趨勢&#xff0c;而是深入人心的日常生活部分。在這樣的時代背景下&#xff0c;企業面臨的挑戰也愈發嚴峻&#xff1a;如何不斷創新&#xff0c;滿足用戶日益增長的業務需求&#xff1f; 傳統的開發方式&#xff0c;隨…

基于單片機設計的大氣氣壓檢測裝置(STC89C52+BMP180實現)

一、前言 本項目設計一個大氣氣壓檢測裝置&#xff0c;該裝置以單片機為基礎&#xff0c;采用STC89C52作為核心控制芯片&#xff0c;結合BMP180模塊作為氣壓傳感器。大氣氣壓&#xff0c;也就是由氣體重力在大氣層中產生的壓力&#xff0c;其變化與天氣預報、氣象觀測以及高度…