好像不是最全的陣列去重方法

codeXiu發表於2018-12-26
陣列

這一篇文章，我們講解一下陣列去重。

1.最簡單粗暴地方式，兩重for迴圈

let arr = [9, 5, 6, 5, '1', '1', true, 5, true];
for (var i = 0; i < arr.length; i++) {
    for (var j = i + 1; j < arr.length; j++) {
        if(arr[i] === arr[j]){
            arr.splice(j,1);
        }       
    }
}
console.log(arr); // [9, 5, 6, "1", true, undefined, null, NaN, NaN, {…}, {…}]
// 兩個NaN, 因為NaN!=NaN
複製程式碼

2.indexOf

let a = [];
for (var i = 0; i < arr.length; i++) {
    if(a.indexOf(arr[i]) === -1){
        a.push(arr[i]);
    }
}
console.log(a); // [9, 5, 6, "1", true, undefined, null, NaN, NaN, {…}, {…}]
// 兩個NaN, 因為NaN!=NaN
複製程式碼

3.includes

for (var i = 0; i < arr.length; i++) {
    if(!a.includes(arr[i])){
        a.push(arr[i]);
    }
}
console.log(a); // [9, 5, 6, "1", true, undefined, null, NaN, {…}, {…}]
複製程式碼

4.Set

let a = [...(new Set(arr))];
console.log(a); // [9, 5, 6, "1", true, undefined, null, NaN, {…}, {…}]
複製程式碼

5.filter

let a = arr.filter(function(value, index){
    return arr.indexOf(value, 0) === index;
})
console.log(a);// [9, 5, 6, "1", true, undefined, null, {…}, {…}]
arr.filter(function(value){
    return a.indexOf(value) === -1 ? a.push(value) : a;
})
console.log(a);// [9, 5, 6, "1", true, undefined, null, NaN, NaN, {…}, {…}]
複製程式碼

6.sort

arr = arr.sort(); // 排序，如果相同就會挨著
a.push(arr[0]); // 先放陣列第一個元素
for (var i = 1; i < arr.length; i++) {
    if(arr[i] !== arr[i - 1]){
        a.push(arr[i]);
    }
}
複製程式碼

7.reduce

arr = arr.sort(); 
arr.reduce(function(preVal, nowVal){
    if(preVal !== nowVal){
        a.push(preVal);
    }
    return nowVal;
}, a)
arr.reduce(function(preVal, nowVal){
    return a.indexOf(nowVal) === -1 ? a.push(nowVal) : a;
}, a)
console.log(a); //["1", 5, 6, 9, NaN, NaN, {…}, {…}, null, true, undefined]
複製程式碼

8.hasOwnProperty

let obj = {};
for (var i = 0; i < arr.length; i++) {
    if(!obj.hasOwnProperty(obj[typeof arr[i] + arr[i]])){
        obj[typeof arr[i] + arr[i]] = arr[i];
    }
}
console.log(Object.values(obj)); //[9, 5, 6, "1", true, undefined, null, NaN, {…}] 無法判斷物件
複製程式碼

9.物件陣列去重方法

let obj = {};
for (var i = 0; i < arr.length; i++) {
    if(!obj[typeof arr[i] + arr[i]]){
        obj[typeof arr[i] + arr[i]] = arr[i];
    }
}
console.log(Object.values(obj)); //[9, 5, 6, "1", true, undefined, null, NaN, {…}]
複製程式碼

10.Map

let map = new Map();
for (var i = 0; i < arr.length; i++) {
    if(!map.get(arr[i])){
        map.set(arr[i], arr[i]);
    }
}
console.log(map);
複製程式碼

好像不是最全的陣列去重方法

  • 補充

我想說一下forEach與map

arr.forEach( function(element, index) {
    console.log(element);
});
arr.map(function(element, index){
    console.log(element);
});
複製程式碼
  • 相同點
    • 他們都是用來遍歷陣列的。
  • 不同點
    • map能有返回值，forEach沒有返回值。
    let arr = [9,3,6,3,6,3];
arr = arr.forEach( function(element, index) {
    return element + 1;
});
console.log(arr); // undefined
arr = arr.map(function(element, index){
    return element + 1;
});
console.log(arr); //[10, 4, 7, 4, 7, 4]
複製程式碼
    • forEach不能中途打斷
    let arr = [9,3,6,3,6,3];
arr.forEach( function(element, index) {
    console.log(element);
    if(index === 2){
        return; //沒用，break,continue會報錯是無效的
    }
});
複製程式碼
  • forEach模擬實現
    Array.prototype.bforEach = function (fn) {
    let array = this;
    for (var i = 0; i < array.length; i++) {
        fn(array[i], i, array);
    }
}
arr.bforEach(function(element, index){
    console.log(element); // 9, 3, 6, 3, 6, 3
});
複製程式碼
  • map模擬實現
    Array.prototype.Map = function (fn) {
    let array = this,
        a = [],
        r;
    for (var i = 0; i < array.length; i++) {
        r = fn(array[i], i, array);
        a.push(r);
    }
    return a;
}
複製程式碼
    喜歡的可以點一個贊，或者關注一下。鼓勵一下一名自學前端的大學生。

相關文章