数组驱虫

数组去重方法的演变

1. es5以前：

es5以前我们数组去重的方法显得有点笨笨的，我的需要创建一个新数组和一个缓存对象，遍历原来数组，一个个的push到新数组中，如果新数组有当前的元素，就不加了。

var testArray = [1,1,5,76,9,3,2,7,99,3,'a','a']

    var resultArray = null

    function uniqueArray (arr) {
      var newArray = []
      var cache = {}
      var item;
      for (var i = 0; i < arr.length; i++) {
        item = arr[i]
        if (!cache[item] ) {   //  如果缓存中没有记录当前元素，意味着新数组中没有这个元素，可以添加
          cache[item] = 1
          newArray.push(item)
        }
      }
      return newArray;
    }
   // 毫无疑问，去重了，这里就不展示了
    console.log(uniqueArray(testArray)) 

2. es5时代

试问，es5时代来了，你还在用这样的方法么，答案肯定是不用了，我们该怎么办呢，用filter方法

resultArray = testArray.filter(function (item, index, arr) {
      return index === arr.indexOf(item)
    })
    // 成功
    console.log(resultArray)

filter方法是es5中对数组新添加的方法，此方法用来过滤return 为 true的。回调函数接收3个参数，分别是当前元素、当前下标、当前数组（相当于this），代码中我们用arr.indecOf这个es5的方法来取到当前元素的下标再与index比较，达到了过滤重复元素的效果，看以下简单过程

var arr = [1,2,1]
var arr2 = arr.filter(function (item, index, arr) {
  return index === arr.indexOf(item)
}}

// 以下 = 并未赋值，是数学上的等于意思
// 第一个元素 1： item = 1, index = 0， arr.indexOf(1) = 0，成功加入新数组
// 第二个元素 2: item = 2, index = 1, arr.indexOf(2) = 1, 成功加入新数组
// 第三个元素 1: item = 1, index = 2 , arr.indexOf(1) = 0 ，这里发现indexOf得到的下标并不是2，因为indexOf查找到匹配元素就返回，所以这个元素在之前出现过，因此被屏蔽了。
//最终arr2 = [1,2]

3. es6的问世

es6的出现带来了许多方便的方法，博主也没有仔细看es6的文档，这里介绍两个演变过程。

1）. 箭头函数

resultArray = testArray.filter((item, index, arr) => index === arr.indexOf(item))
//    成功
console.log(resultArray)

箭头函数在一定程度上减少了我们的代码量，因此我们可以更简洁的完成es5方法的代码。但这并不是最优的

2). Set结构

Set结构可以接收一个数组，然后把它变成Set表，它会自动屏蔽数组中重复的元素，实现自动过滤

resultArray = [...new Set(testArray)]
// ok
console.log(resultArray)

我们把数组传入Set中，创建一个Set实例，这样就自动完成了过滤，但是这样还不是数组，我们得再把Set结构转化为数组，这就用到了es6中的解构赋值，如上。详情可以看阮一峰老是的es6入门系列。