JavaScript數組去重方法匯總

標籤：遍曆數組   去重   nbsp   div   indexof   bug   i++   ring   bsp   

1.運用數組的特性

　　1.遍曆數組，也遍曆輔助數組，找出兩個數組中是否有相同的項，若有則break，沒有的話就push進去。

　　

//第一版本數組去重function unique(arr){    var  res = [],         len = arr.length;    for(let i = 0;i < len; i++){        var reslen = res.length;        for(let j = 0;j < reslen; j++){ //遍曆輔助數組            if(arr[i] === res[j]){                break;            }        }        if(j === reslen){            res.push(arr[i]); //沒有就添加進去        }    }    return res;}

　　

　　2.運用es5的indexOf方法

//第二版本數組去重 es5文法， IE8不能用function unique(arr){    var len = arr.length,        res = [];    for( let i = 0; i < len ; i++){        let val = arr[i];        if(res.indexOf(val) === -1){ //找不到返回-1            res.push(arr[i]);        }    }    return res;}

　　

　　3.如果數組已經排好序

function unique(arr){    var len = arr.length;        last,        res = [];    for(let i = 0;i < len; i++){        let val = arr[i];        if(val !== last){ //用last儲存上一次的值            res.push(val);        }        last = val;    }    return res;}

　　

　　4.留一個介面，傳一個參數判斷數組是否已經排好序

function unique(arr, isSort){    var len = arr.length,        res = [],        last;    if(isSort !== ‘boolean‘){        isSort = false;    }    for(let i = 0;i < len; i++){        var val = arr[i];        if(isSort){            if(!i || val!== last){                res.push(val);            }            last = val;        }else{            if(res.indexOf(val) === -1){                res.push(val);            }        }    }    return res;}

 

　　5.如果有特殊需求的話，留一個介面，更靈活

function unique(arr, isSort, fn){    var res = [],        len = arr.length,        newArr = [],        last;    for(let i = 0;i < len; i++){        var val = arr[i],            com = fn ? fn(val, i, arr) : val;        if(isSort){            if(!i || com === last){                res.push(val);            }            last = com;        }else if(fn){            if(newArr.indexOf(com) === -1){                newArr.push(com);                res.push(val);            }        }else if(res.indexOf(val === -1)){            res.push(val);        }    }    return res;}

 

　　6.用內部 filter 方法最佳化

function unique(arr){    var res = [],    res = arr.filter(function(item, index, arr){        return res.indexOf(item) === index;  //返回true則添加到數組res,否則不添加    });    return res;}

 

2.運用對象的特性

　　1.第一種方法

function unique(arr){    var obj = {},        res = [],    res = arr.filter(function (item, index, aee){        return obj.hasOwnProperty(item) ? false : (obj[item] = true);    });    return res}

 

　　注意： 有一個Bug，var  = [ 1,1,"1",2]，不能識別number類型的和string類型，添加到對象中都會轉化為string。

　　2.第二種方法

　

function unique(arr){    var obj = {},        res = [],        len = arr.length;    res = arr.filter(function (item, index, arr){        return obj.hasOwnProperty(typeof item + item) ? false : (typeof item + item) = true;      });    return res;}

　　注意：這裡也有bug，因為typeof的傳回型別，檢測不了對象。

　　3.第三種方法

　　運用json方法進行最佳化。

function unique(arr){    var obj = {},        res = [],        len = arr.length;    res = arr.filter(function (item, index, arr){        return obj.hasOwnProperty(typeof item + JSON.stringify(item)) ? false : (typeof item + JSON.stringify(item)) = true;    })    return res;}

3.ES6中的Set()對象

function unique(arr){    return [...new Set(arr)];}

JavaScript數組去重方法匯總