2

JavaScript&ES6----数组去重的四种方法

 2 years ago
source link: https://segmentfault.com/a/1190000040748861
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

方法一 --- 双层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 ]



About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK