双重循环
- 双重循环是利用两个for循环来实现数组去重的，兼容性最好，但是如果数组的数据过于庞大的时候，性能不佳。
function unique(array) {
let result = []
for(var i = 0; i < array.length; i++){
for(var j = 0; j < result.length; j ++){
if (array[i] === result[j]) {
// 如果result中有和array[i]相同的项，直接跳出循环不再继续，并且j不会自增
// j 不自增，就意味着，j不会等于result.length，下面的if语句就不会执行
break
}
}
// 如果result中没有与array[i]相同的项，那么第二层for循环完毕之后，j === result.length
// 并将这轮循环的 array[i] push 到result中
if (j === result.length) {
result.push(array[i])
}
}
return result
}
使用indexOf()方法
- 通过indexOf()方法，来判断数组中是否存在指定的值，找到之后返回下标，没有找到则返回 -1
function unique(array) {
var res = []
for (var i = 0; i < array.length; i ++){
if (res.indexOf(array[i]) === -1) {
res.push(array[i])
}
}
return res
}
ES5的filter()方法结合indexOf()方法去重
- filter()方法可以过滤数组，返回过滤后的数组，且不改变原数组
function unique(array) {
return array.filter((item, index, self) => self.indexOf(item) === index)
// [1,1,1,1].indexOf(1)返回的是第一个'1'的下标0，不会再查询第一个 '1' 后面的元素了。
// 在这里，self.indexOf(item)每次返回的都是下标0，除了第一个元素(index = 0)，之后等式都不成立了。
}
通过对象的key-value来实现去重
- 对象有个hasOwnProperty()方法，用来查找对象是否含有某个key，返回布尔值
- 注意，如果我们定义一个如下的对象，结果会是什么呢 ?
var obj = {
1: 'number1',
'1': 'string1'
}
- 答案是字符串'1'会将数字1覆盖，知道这个小细节之后，我们再来实现去重的方法。
function unique(array) {
var obj = {}
return array.filter((item, index, self) => {
// 如果对象中没有找到 typeof item + item, 则向其添加一个 key: typeof item + item，value设置为true，表示将item过滤出来。
// value可以随便设置，除了0,'',undefined等等这些会转化成false值的值
return obj.hasOwnProperty(typeof item + item) ? false : obj[typeof item + item] = true
})
}
最后我们可以采用ES6中的一种新的数据结果Set,它类似于数组，但是它的项都是唯一的，没有重复的值。
Set本身是一个构造函数，用来生成 Set 数据结构。
-
Set 结构的实例有以下属性。
- Set.prototype.constructor：构造函数，默认就是Set函数。
- Set.prototype.size：返回Set实例的成员总数。
-
Set 实例的方法分为两大类：操作方法（用于操作数据）和遍历方法（用于遍历成员）。
- add(value)：添加某个值，返回 Set 结构本身。
- delete(value)：删除某个值，返回一个布尔值，表示删除是否成功。
- has(value)：返回一个布尔值，表示该值是否为Set的成员。
- clear()：清除所有成员，没有返回值。
- keys()：返回键名的遍历器
- values()：返回键值的遍历器
- entries()：返回键值对的遍历器
- forEach()：使用回调函数遍历每个成员
var uniqueArr = new Set([1,2,3,1,'1','a','a'])
>>>uniqueArr
<<< Set(5) {1, 2, 3, "1", "a"}
>>> uniqueArr instanceof Array
<<< false
- 可以看到，返回的结果是Set数据结果，那么如何返回一个数组呢？这就要用到ES6提供的另一个数组方法了
- Array.from(obj, fn, context)方法将一个类数组对象或者可遍历对象转换成一个真正的数组，它可以接受三个参数，第一个是需要转化的对象，第二个是一个函数，对象的每一项都会执行这个函数，返回处理后的项，context指定执行fn的this对象
理解用法之后，我们再来看一下如何使用Set来实现数组去重
function unique(array) {
return Array.from(new Set(array))
}
当然也可以不使用Array.from()方法，使用ES6 '...' 扩展运算符
function unique(array) {
return [...new Set(array)]
}
// 我们可以简化一下这个函数
var unique = (array) => [...new Set(array)]
总结：我们看到，数组去重的方式有很多，但以上都是在处理基本数据类型，但是如果碰到数组中存在对象的时候，还需要另当别论。看下如下的例子:
>>> NaN === NaN
<<< false
>>> NaN == NaN
<<< false
>>> {} == {}
<<< false
>>> {} === {}
<<< false
>>> undefined == undefined
<<< true
>>> undefined === undefined
<<< true
>>> null == null
<<< true
>>> null === null
<<< true
