JavaScript&ES6----陣列去重的四種方法

嘩啦啦啦發表於2021-09-28
JavaScript陣列

方法一 --- 雙層for迴圈

利用雙層for迴圈，前一個迴圈前一項，後一個迴圈後一項，兩兩比對，如果發現重複的就用splice()屬性，把重複的元素從陣列arr中刪除

let arr = [2,5,1,5,3,2,'hello','1',4]

let unique = (arr) =>{
    // 第一層for迴圈   迴圈陣列前一項
    for(i = 0;i < arr.length;i++){
        //第二層for迴圈   迴圈陣列後一項
        for(j = i+1;j < arr.length;j++){
            if(arr[i] === arr[j]){
           //splice(index,howmany)  j是索引值  1是要刪除的個數
                arr.splice(j,1);
                //每刪除一個元素，陣列長度相應減一
                j--;
            }
        } 
    }
    return arr
}

console.log(unique(arr));  //[ 2, 5, 1, 3, 'hello', '1', 4 ]

方法二 ---- indexOf

要先宣告一個新陣列，利用indexOf，找到重複的元素則返回索引值，找不到返回-1，並push進新陣列裡

let arr = [2,5,1,5,3,2,'hello','1',4]
let unique1 = (arr) =>{
    // 宣告一個新陣列
    let newArr = [];
    for(i = 0;i< arr.length;i++){
  //等於-1則表示新陣列裡不存在該元素 符合條件 將該元素放入新陣列 
     if(newArr.indexOf(arr[i]) === -1){
            newArr.push(arr[i])
        }
    }
    return newArr
}
console.log(unique1(arr));  //[ 2, 5, 1, 3, 'hello', '1', 4 ]

方法三 ---- includes

利用ES6中的includes屬性

在ES6中，Array.prototype.includes();
includes是否包含某個元素，返回true/false

// 陣列去重  第三種方法
let arr = [2,5,1,5,3,2,'hello','1',4]
let unique2 = (arr) =>{
    // 宣告一個新陣列
    let newArr = [];
    for(i = 0;i< arr.length;i++){
 //如果新陣列newArr不包含該元素，則符合條件 放入新陣列   
    if(!newArr.includes(arr[i])){
            newArr.push(arr[i])
        }
    }
    return newArr
}
console.log(unique2(arr));  //[ 2, 5, 1, 3, 'hello', '1', 4 ]

方法四 ----- Set()

在ES6中，Set類似於陣列，但是成員的值都是唯一的，沒有重複的值。Set 本身是一個建構函式，用來生成 Set 資料結構展。Set 建構函式可以接受一個陣列（或者具有 iterable 介面的其他資料結構）作為引數，用來初始化

// 陣列去重的第四種方法 
let set = new Set(arr)
let [...a] = set   //陣列解構的方法
console.log(set);  //Set(7) { 2, 5, 1, 3, 'hello', '1', 4 }
console.log(a);  //[ 2, 5, 1, 3, 'hello', '1', 4 ]

相關文章