本篇以陣列去重為主題，目的是形成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，但是这两个元素是重复的。
