js數組去重的方法

来源:https://www.cnblogs.com/lhx5213/archive/2020/05/06/12835543.html
-Advertisement-
Play Games

在實際工作或面試中,我們經常會遇到“數組去重”問題,接下來就是使用js實現的數組去重的多種方法: 1.將數組的每一個元素依次與其他元素做比較,發現重覆元素,刪除 var arr = [1,23,1,1,1,3,23,5,6,7,9,9,8,5,5,5,5]; console.log(arr); // ...


在實際工作或面試中,我們經常會遇到“數組去重”問題,接下來就是使用js實現的數組去重的多種方法:

1.將數組的每一個元素依次與其他元素做比較,發現重覆元素,刪除

    var arr = [1,23,1,1,1,3,23,5,6,7,9,9,8,5,5,5,5];
    console.log(arr);    //[1, 23, 1, 1, 1, 3, 23, 5, 6, 7, 9, 9, 8, 5, 5, 5, 5]
    function noRepeat1(arr) {
        for(var i = 0; i < arr.length-1; i++){
            for(var j = i+1; j < arr.length; j++){
                if(arr[i]===arr[j]){
                    arr.splice(j,1);
                    j--;
                }
            }
        }
        return arr;
    }
    var arr2 = noRepeat1(arr);
    console.log(arr2);    //[1, 23, 3, 5, 6, 7, 9, 8]

2.藉助indexOf()方法判斷此元素在該數組中首次出現的位置下標與迴圈的下標是否相等

    var arr = [1,23,1,1,1,3,23,5,6,7,9,9,8,5,5,5];
    console.log(arr);    //[1, 23, 1, 1, 1, 3, 23, 5, 6, 7, 9, 9, 8, 5, 5, 5]
    function noRepeat2(arr) {
        for (var i = 0; i < arr.length; i++) {
            if (arr.indexOf(arr[i]) != i) {
                arr.splice(i,1);//刪除數組元素後數組長度減1後面的元素前移
                i--;//數組下標回退
            }
        }
        return arr;
    }
    var newArr = noRepeat2(arr);
    console.log(newArr);    //[1, 23, 3, 5, 6, 7, 9, 8]

3.利用數組中的filter方法

    var arr = ['apple','banana','pear','apple','orange','orange'];
    console.log(arr)    //["apple", "banana", "pear", "apple", "orange", "orange"]
    var newArr = arr.filter(function(value,index,self){
    return self.indexOf(value) === index;
    });
    console.log(newArr);    //["apple", "banana", "pear", "orange"]

4.藉助新數組 通過indexOf方判斷當前元素在數組中的索引如果與迴圈的下標相等則添加到新數組中

    var arr = [1,23,1,1,1,3,23,5,6,7,9,9,8,5,5,5];
    console.log(arr)    //[1, 23, 1, 1, 1, 3, 23, 5, 6, 7, 9, 9, 8, 5, 5, 5]
    function noRepeat4(arr) {
        var ret = [];
        for (var i = 0; i < arr.length; i++) {
            if (arr.indexOf(arr[i]) == i) {
                ret.push(arr[i]);
            }
        }
        return ret;
    }
    var arr2 = noRepeat4(arr);
    console.log(arr2);    //[1, 23, 3, 5, 6, 7, 9, 8]

5.利用空對象來記錄新數組中已經存儲過的元素

    var arr = [1,23,1,1,1,3,23,5,6,7,9,9,8,5];
    console.log(arr)    //[1, 23, 1, 1, 1, 3, 23, 5, 6, 7, 9, 9, 8, 5]
    var obj={};
    var newArr=[];
    for(var i=0;i<arr.length;i++){
        if(!obj[arr[i]]){
            obj[arr[i]]=true;
            newArr.push(arr[i]);
        }
    }
    console.log(newArr);    //[1, 23, 3, 5, 6, 7, 9, 8]

6.藉助新數組,判斷新數組中是否存在該元素如果不存在則將此元素添加到新數組中

    var arr = [1,23,1,1,1,3,23,5,6,7,9,9,8,5];
    console.log(arr);    //[1, 23, 1, 1, 1, 3, 23, 5, 6, 7, 9, 9, 8, 5]
    function noRepeat6(arr){
        var newArr = [];
        for(var i = 0; i < arr.length; i++){
            if(newArr.indexOf(arr[i]) == -1){
                newArr.push(arr[i]);
            }
        }
        return newArr;
    }
    var arr2 = noRepeat6(arr);
    console.log(arr2);    //[1, 23, 3, 5, 6, 7, 9, 8]

7.藉助新數組,判斷新數組中是否存在該元素如果不存在則將此元素添加到新數組中(原數組長度不變但被按字元串順序排序)

    var arr = [1,23,1,1,1,3,23,5,6,7,9,9,8,5];
    console.log(arr);    //[1, 23, 1, 1, 1, 3, 23, 5, 6, 7, 9, 9, 8, 5]
    function noRepeat7(arr) {
        var ret = [],
            end;//臨時變數用於對比重覆元素
        arr.sort();//將數重新組排序
        end = arr[0];
        ret.push(arr[0]);
        for (var i = 1; i < arr.length; i++) {
            if (arr[i] != end) {//當前元素如果和臨時元素不等則將此元素添加到新數組中
                ret.push(arr[i]);
                end = arr[i];
            }
        }
        return ret;
    }
    var arr2 = noRepeat7(arr);
    console.log(arr2);    //[1, 23, 3, 5, 6, 7, 8, 9]

8.此方法沒有藉助新數組直接改變原數組,並且去重後的數組被排序

    var arr = [1,23,1,1,1,3,23,5,6,7,9,9,8,5];
    console.log(arr);    //[1, 23, 1, 1, 1, 3, 23, 5, 6, 7, 9, 9, 8, 5]
    function noRepeat8(arr) {
        var end;//臨時變數用於對比重覆元素
        arr.sort();//將數重新組排序
        end = arr[0];
        for (var i = 1; i < arr.length; i++) {
            if (arr[i] == end) {//當前元素如果和臨時元素相等則將此元素從數組中刪除
                arr.splice(i,1);
                i--;
            }else{
                end = arr[i];
            }
        }
        return arr;
    }
    var arr2 = noRepeat8(arr);
    console.log(arr2);    //[1, 23, 3, 5, 6, 7, 8, 9]

9.雙層迴圈改變原數組

    var arr = [1,1,2,2,3,3,4,4,5,5,4,3,1,2,6,6,6,6];
    console.log(arr);    //[1, 1, 2, 2, 3, 3, 4, 4, 5, 5, 4, 3, 1, 2, 6, 6, 6, 6]
    function noRepeat9(arr){
        for (var i = 0; i < arr.length; i++) {
            for (var j = 0; j < arr.length; j++) {
                if (arr[i] == arr[j] && i != j) {//將後面重覆的數刪掉
                    arr.splice(j, 1);
                }
            }
        }
        return arr;
    }
    var arr2  = noRepeat9(arr);
    console.log(arr2);    //[1, 2, 3, 4, 5, 6]

10.藉助新數組

    var arr = [1,1,2,2,3,3,4,4,5,5,4,3,2,1,1,1];
    console.log(arr);    //[1, 1, 2, 2, 3, 3, 4, 4, 5, 5, 4, 3, 2, 1, 1, 1]
    var newArr = [];
    for (var i = 0; i < arr.length; i++) {
        var repArr = [];//接收重覆數據後面的下標
        //內層迴圈找出有重覆數據的下標
        for (var j = i + 1; j < arr.length; j++) {
            if (arr[i] == arr[j]) {
                repArr.push(j);//找出後面重覆數據的下標
            }
        }
        //console.log(repArr);
        if (repArr.length == 0) {//若重覆數組沒有值說明其不是重覆數據
            newArr.push(arr[i]);
        }
    }
    console.log(newArr);    //[5, 4, 3, 2, 1]

11.藉助ES6提供的Set結構

    var arr = [1,1,2,2,3,3,4,4,5,5,4,3,2,1,1,1];
    console.log(arr);    //[1, 1, 2, 2, 3, 3, 4, 4, 5, 5, 4, 3, 2, 1, 1, 1]
    function noRepeat11(arr){
        var newArr = [];
        var myset = new Set(arr);//利用了Set結構不能接收重覆數據的特點
        for(var val of myset){
            newArr.push(val)
        }
        return newArr;
    }
    var arr2 = noRepeat11(arr)
    console.log(arr2);    //[1, 2, 3, 4, 5]




您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 介紹 棧(stack) 棧stack為自動分配的記憶體空間,它由系統自動釋放 堆(heap) 堆heap是動態分配的記憶體,大小不定也不會自動釋放 動態演示地址 http://latentflip.com/loupe 數據類型 基本類型:String、Number、Boolean、Null、Undefi ...
  • 介紹 Composition API的主要思想是,我們將它們定義為從新的 setup 函數返回的JavaScript變數,而不是將組件的功能(例如state、method、computed等)定義為對象屬性。 案例對比 下麵是一個經典的vue2的計數器案例. //Counter.vue export ...
  • 塊級元素 行內元素 塊級元素和行內元素的區別 行內塊標簽 inline block 標簽顯示模式轉換 display ...
  • 我是前端小白一枚,為了鞏固知識和增強記憶,開始整理相關的知識,方便以後複習和麵試的時候看看。OK,讓我們進入正題~ 先說說淺拷貝和深拷貝的理解吧,個人是這樣理解的:兩個對象A、B, A有數據B為空,B複製了A,我們修改A,如果B中的數據跟著變化了,那就是淺拷貝,如果沒有變化,那就是深拷貝。說明B另開 ...
  • 操作DOM 由於HTML文檔被瀏覽器解析後就是一棵DOM樹,要改變HTML的結構,就需要通過JavaScript來操作DOM。 始終記住DOM是一個樹形結構。操作一個DOM節點實際上就是這麼幾個操作: 更新:更新該DOM節點的內容,相當於更新了該DOM節點表示的HTML的內容; 遍歷:遍歷該DOM節 ...
  • 當面試官問道你高度塌陷時,人們第一想到的方法一定是 .clearfix::after { content: ''; display: block; clear: both; visibility: hidden; height: 0; } 對,沒錯,這是一個完美的解決方案,但是我們有考慮過這個方案的 ...
  • 一、函數參數的解構賦值 二、函數預設參數 2.1 基本方式 2.2 可以預設實參 2.3 預設實參的覆蓋 但如果傳入實參,那麼就會把預設的覆蓋。 2.4 預設值可以是函數 三、箭頭函數 語法:參數= 函數體 單行語句可以省略花括弧,如果還是return語句,還可以省略return關鍵字。 多行語句不 ...
  • 登高遠眺 天高地迥,覺宇宙之無窮 基礎技術 "使用 JavaScript 框架的代價" 作者從 JavaScript 下載時間、解析時間、執行時間、記憶體占用四個角度評測了 jQuery、Angular、React、Vue 四個框架,最終得出結論:「框架不值得」,應該選擇原生 JavaScript 或 ...
一周排行
    -Advertisement-
    Play Games
  • 概述:在C#中,++i和i++都是自增運算符,其中++i先增加值再返回,而i++先返回值再增加。應用場景根據需求選擇,首碼適合先增後用,尾碼適合先用後增。詳細示例提供清晰的代碼演示這兩者的操作時機和實際應用。 在C#中,++i 和 i++ 都是自增運算符,但它們在操作上有細微的差異,主要體現在操作的 ...
  • 上次發佈了:Taurus.MVC 性能壓力測試(ap 壓測 和 linux 下wrk 壓測):.NET Core 版本,今天計劃準備壓測一下 .NET 版本,來測試並記錄一下 Taurus.MVC 框架在 .NET 版本的性能,以便後續持續優化改進。 為了方便對比,本文章的電腦環境和測試思路,儘量和... ...
  • .NET WebAPI作為一種構建RESTful服務的強大工具,為開發者提供了便捷的方式來定義、處理HTTP請求並返迴響應。在設計API介面時,正確地接收和解析客戶端發送的數據至關重要。.NET WebAPI提供了一系列特性,如[FromRoute]、[FromQuery]和[FromBody],用 ...
  • 原因:我之所以想做這個項目,是因為在之前查找關於C#/WPF相關資料時,我發現講解圖像濾鏡的資源非常稀缺。此外,我註意到許多現有的開源庫主要基於CPU進行圖像渲染。這種方式在處理大量圖像時,會導致CPU的渲染負擔過重。因此,我將在下文中介紹如何通過GPU渲染來有效實現圖像的各種濾鏡效果。 生成的效果 ...
  • 引言 上一章我們介紹了在xUnit單元測試中用xUnit.DependencyInject來使用依賴註入,上一章我們的Sample.Repository倉儲層有一個批量註入的介面沒有做單元測試,今天用這個示例來演示一下如何用Bogus創建模擬數據 ,和 EFCore 的種子數據生成 Bogus 的優 ...
  • 一、前言 在自己的項目中,涉及到實時心率曲線的繪製,項目上的曲線繪製,一般很難找到能直接用的第三方庫,而且有些還是定製化的功能,所以還是自己繪製比較方便。很多人一聽到自己畫就害怕,感覺很難,今天就分享一個完整的實時心率數據繪製心率曲線圖的例子;之前的博客也分享給DrawingVisual繪製曲線的方 ...
  • 如果你在自定義的 Main 方法中直接使用 App 類並啟動應用程式,但發現 App.xaml 中定義的資源沒有被正確載入,那麼問題可能在於如何正確配置 App.xaml 與你的 App 類的交互。 確保 App.xaml 文件中的 x:Class 屬性正確指向你的 App 類。這樣,當你創建 Ap ...
  • 一:背景 1. 講故事 上個月有個朋友在微信上找到我,說他們的軟體在客戶那邊隔幾天就要崩潰一次,一直都沒有找到原因,讓我幫忙看下怎麼回事,確實工控類的軟體環境複雜難搞,朋友手上有一個崩潰的dump,剛好丟給我來分析一下。 二:WinDbg分析 1. 程式為什麼會崩潰 windbg 有一個厲害之處在於 ...
  • 前言 .NET生態中有許多依賴註入容器。在大多數情況下,微軟提供的內置容器在易用性和性能方面都非常優秀。外加ASP.NET Core預設使用內置容器,使用很方便。 但是筆者在使用中一直有一個頭疼的問題:服務工廠無法提供請求的服務類型相關的信息。這在一般情況下並沒有影響,但是內置容器支持註冊開放泛型服 ...
  • 一、前言 在項目開發過程中,DataGrid是經常使用到的一個數據展示控制項,而通常表格的最後一列是作為操作列存在,比如會有編輯、刪除等功能按鈕。但WPF的原始DataGrid中,預設只支持固定左側列,這跟大家習慣性操作列放最後不符,今天就來介紹一種簡單的方式實現固定右側列。(這裡的實現方式參考的大佬 ...