程式學習: 陣列去重/排重 1.for迴圈的變數以var設定則會把最後的值往下帶！而不是終結在for回圈裡！要終結再for迴圈要用let或const 2.对一个已经排好序的数组去重，这种方法效率肯定高于使用 indexOf！ 3.以function做判斷式，結果為true 4.把数组的值存成 Object 的 key 值 5. ES6，Array.from()函数的用法

本篇以陣列去重為主題，目的是形成unique的function
https://github.com/mqyqingfeng/Blog/issues/27

1. for迴圈的變數以var設定則會把最後的值往下帶！而不是終結在for回圈裡！要終結再for迴圈要用let或const

var array = [1, 1, '1', '1'];

function unique(array) {
    // res用来存储结果
    var res = [];
    for (var i = 0, arrayLen = array.length; i < arrayLen; i++) {
        for (var j = 0, resLen = res.length; j < resLen; j++ ) {
            if (array[i] === res[j]) {
                break;  //如果不break，會再執行下一圈，最後一層j === resLen，接著
往下帶，就把重複的值也寫入res[]

            }
        }
        // 如果array[i]是唯一的，那么执行完循环，j等于resLen
        if (j === resLen) {
            res.push(array[i])
        }
    }

console.log(i) //結果為4！！！
   return res;
}

console.log(unique(array)); // [1, "1"]

2. 对一个已经排好序的数组去重，这种方法效率肯定高于使用 indexOf！

var array = [1, 1, '1'];

function unique(array) {

var res = [];

var sortedArray = array.concat().sort(); //.concat()在這裡沒啥作用

var seen;

for (var i = 0, len = sortedArray.length; i < len; i++) {

// 如果是第一个元素或者相邻的元素不相同

if (!i || seen !== sortedArray[i]) {

res.push(sortedArray[i])

seen = sortedArray[i];

}        

}

return res;

}

console.log(unique(array));

或

比如使用 indexOf 的方法：(或是用es6的includes，他會回傳true或false，並且可判對NaN, 空值)

var array = [1, 2, 1, 1, '1'];

function unique(array) {
    var res = array.filter(function(item, index, array){
        return array.indexOf(item) === index;
    })
    return res;
}

console.log(unique(array));

排序去重的方法：

var array = [1, 2, 1, 1, '1'];

function unique(array) {
    return array.concat().sort().filter(function(item, index, array){
        return !index || item !== array[index - 1]
    })
}

console.log(unique(array));

3. 以function做判斷式，結果為true

var array3 = [1, 1, 'a', 'A', 2, 2];

// 第二版
// iteratee 英文释义：迭代 重复
function unique(array, isSorted, iteratee) {
    var res = [];
    var seen = [];

    for (var i = 0, len = array.length; i < len; i++) {
        var value = array[i];
        var computed = iteratee ? iteratee(value, i, array) : value;  //這行寫得有點多餘，不曉得為什
麼要做判斷，因為interatee結果必為true。又interatee只接收一個參數，所以寫入的第二第三個參數其實沒用，可改
寫為 var computed =  iteratee(value); 結果相同！（後來想想，大概是為了通用做鋪墊）

        if (isSorted) {
            if (!i || seen !== computed) {
                res.push(value)
            }
            seen = computed;
        }
        else if (iteratee) {
            if (seen.indexOf(computed) === -1) {
                seen.push(computed);
                res.push(value);
            }
        }
        else if (res.indexOf(value) === -1) {
            res.push(value);
        }        
    }
    return res;
}

console.log(unique(array3, false, function(item){
    return typeof item == 'string' ? item.toLowerCase() : item
})); // [1, "a", 2]

4.把数组的值存成 Object 的 key 值

var array = [1, 2, 1, 1, '1'];

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

console.log(unique(array)); // [1, 2]

但是这种方法会判断 1 和 '1' 为同一个值，这是因为对象的键值只能是字符串，可以改用 return obj.hasOwnProperty(typeof item + item) ? false : (obj[typeof item + item] = true) 區分型態

但如果array的value帶入的是object，如 var array = [{value: 1}, {value: 1}, {value: 2}]; ，則需改為 return obj.hasOwnProperty(typeof item + JSON.stringify(item)) ? false : (obj[typeof item + JSON.stringify(item)] = true)

5. ES6，Array.from()函数的用法

ES6为Array增加了from函数用来将其他对象转换成数组。

当然，其他对象也是有要求，也不是所有的，可以将两种对象转换成数组。

1.部署了Iterator接口的对象，比如：Set，Map，Array。

2.类数组对象，什么叫类数组对象，就是一个对象必须有length属性，没有length，转出来的就是空数组。

var array = [1, 2, 1, 1, '1'];

function unique(array) {
   return Array.from(new Set(array));
}

console.log(unique(array)); // [1, 2, "1"]

甚至可以再简化下：

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

还可以再简化下：

var unique = (a) => [...new Set(a)]

此外，如果用 Map 的话：

function unique (arr) {
    const seen = new Map()
    return arr.filter((a) => !seen.has(a) && seen.set(a, 1))
}

最後，總結與特殊类型比较

去重的方法就到此结束了，然而要去重的元素类型可能是多种多样，除了例子中简单的 1 和 '1' 之外，其实还有 null、undefined、NaN、对象等，那么对于这些元素，之前的这些方法的去重结果又是怎样呢？

在此之前，先让我们先看几个例子：

var str1 = '1';
var str2 = new String('1');

console.log(str1 == str2); // true
console.log(str1 === str2); // false

console.log(null == null); // true
console.log(null === null); // true

console.log(undefined == undefined); // true
console.log(undefined === undefined); // true

console.log(NaN == NaN); // false
console.log(NaN === NaN); // false

console.log(/a/ == /a/); // false
console.log(/a/ === /a/); // false

console.log({} == {}); // false
console.log({} === {}); // false

那么，对于这样一个数组

var array = [1, 1, '1', '1', null, null, undefined, undefined, new String('1'), new String('1'), /a/, /a/, NaN, NaN];

以上各种方法去重的结果到底是什么样的呢？

我特地整理了一个列表，我们重点关注下对象和 NaN 的去重情况：

方法	结果	说明
for循环	[1, "1", null, undefined, String, String, /a/, /a/, NaN, NaN]	对象和 NaN 不去重
indexOf	[1, "1", null, undefined, String, String, /a/, /a/, NaN, NaN]	对象和 NaN 不去重
sort	[/a/, /a/, "1", 1, String, 1, String, NaN, NaN, null, undefined]	对象和 NaN 不去重数字 1 也不去重
filter + indexOf	[1, "1", null, undefined, String, String, /a/, /a/]	对象不去重 NaN 会被忽略掉
filter + sort	[/a/, /a/, "1", 1, String, 1, String, NaN, NaN, null, undefined]	对象和 NaN 不去重数字 1 不去重
优化后的键值对方法	[1, "1", null, undefined, String, /a/, NaN]	全部去重
Set	[1, "1", null, undefined, String, String, /a/, /a/, NaN]	对象不去重 NaN 去重

想了解为什么会出现以上的结果，看两个 demo 便能明白：

// demo1
var arr = [1, 2, NaN];
arr.indexOf(NaN); // -1

indexOf 底层还是使用 === 进行判断，因为 NaN === NaN的结果为 false，所以使用 indexOf 查找不到 NaN 元素

// demo2
function unique(array) {
   return Array.from(new Set(array));
}
console.log(unique([NaN, NaN])) // [NaN]

Set 认为尽管 NaN === NaN 为 false，但是这两个元素是重复的。

程式學習

文章加密

2019年6月16日星期日

沒有留言:

張貼留言

文章加密

2019年6月16日 星期日

沒有留言:

張貼留言

2019年6月16日星期日