js之闭包

一：原理及一些理解：

当一个子函数引用了父级函数的某个变量或数据，那么 闭包其实就产生了。

并且这个变量或数据的生命周期始终能保持使用，就能间接保持原构父级函数 在内存中的变量对象不会消失，

简而言之 在嵌套在父级函数内部的子函数被定义时,并且也引用了父级函数的数据时就产生了闭包。

外部函数执行完并返回后，闭包使得JS中的的垃圾回收机制GC(Garbage collection)不会收回外部函数所占用的资源，这里指的资源是它的变量对象, 因为外部函数的内部函数内部的执行一直需要依赖外部函数中的变量或者其他数据。这就是对闭包产生和特性最直白通俗的描述!

应用场景1 代码模块化

闭包的应用场景主要是用于模块化

闭包可以一定程度上保护函数内的变量安全

外部函数中的变量只有内部函数才能访问，而无法通过其他途径访问到，因此保护了变量的安全性, 所以闭包模块化基本可以解决函数污染或变量随意被修改问题!

比如说Java、php等语言中有支持将方法声明为私有，它们只能被同一个类中的其它方法所调用。

window.οnlοad=function(){
var btns = document.getElementsByTagName('button');
for(var i = 0, len = btns.length; i < len; i++) {
function test(index){
btns[index].onclick = function() {
console.log(index);
}
}
test(i)
}
}

闭包的缺陷
如果不是某些特定业务需求下, 尽量避免使用闭包，因为闭包在处理速度和内存消耗方面对脚本性能具有负面影响, 其会根据闭包数量的多少而在内存中创建更多的变量对象, 最终可能会导致内存溢出 等情况!

当然通常最简单的解决办法就是: 解除对引用变量函数的使用

引用变量函数 = null;
我们可以将引用变量的值将其设置为null即可,js垃圾回收将会将其清除, 释放内存资源!

总结闭包
1、当内部函数 在定义它的作用域的外部被引用(使用)时,就创建了该内部函数的闭包 ,如果内部函数引用了位于父级函数的变量或者其他数据时,当父级函数调用完毕后,这些变量数据在内存不会被GC(Garbage collection)释放,因为闭包它们被一直引用着!否则两者没有交互就不会长久存在于内存中,所以在Chrome中的debug找不到闭包

2、通过调用闭包的内部函数获取到闭包的成员变量： 在闭包中返回该函数，在外部接收该函数并执行就能获取闭包的成员变量。 原因是因为词法作用域，也就是函数的作用域是其声明的作用域而不是执行调用时的作用域。

二：js 数组去重的几种方法：

1、双层 for 循环

function distinct(arr) {

  for (let i=0, len=arr.length; i<len; i++) {

    for (let j=i+1; j<len; j++) {

      if (arr[i] === arr[j]) { arr.splice(j, 1); // splice 会改变数组长度，所以要将数组长度 len 和下标 j 减一 len--; j--;

     }

  }

 }

 return arr;

}

思想: 双重 for 循环是比较笨拙的方法，它实现的原理很简单：先定义一个包含原始数组第一个元素的数组，然后遍历原始数组，将原始数组中的每个元素与新数组中的每个元素进行比对，如果不重复则添加到新数组中，最后返回新数组；因为它的时间复杂度是O(n^2)，如果数组长度很大，效率会很低。

2、Array.filter() 加 indexOf

function distinct(a, b) {

  let arr = a.concat(b);

  return arr.filter((item, index)=> { return arr.indexOf(item) === index })

}

思想: 利用indexOf检测元素在数组中第一次出现的位置是否和元素现在的位置相等，如果不等则说明该元素是重复元素

3、Array.sort() 加一行遍历冒泡(相邻元素去重)

function distinct(array) {

 var res = [];

 var sortedArray = array.concat().sort();

 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;

}

思想: 调用了数组的排序方法 sort()，V8引擎 的 sort() 方法在数组长度小于等于10的情况下，会使用插入排序，大于10的情况下会使用快速排序。然后根据排序后的结果进行遍历及相邻元素比对(其实就是一行冒泡排序比较)，如果相等则跳过该元素，直到遍历结束。

4、ES6 中的 Set 去重

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

思想: ES6 提供了新的数据结构 Set，Set 结构的一个特性就是成员值都是唯一的，没有重复的值。 

5、Object 键值对

function distinct(array) {

  var obj = {};

  return array.filter(function(item, index, array){

   return obj.hasOwnProperty(typeof item + item) ? false : (obj[typeof item + item] = true)

  })

}

这种方法是利用一个空的 Object 对象，我们把数组的值存成 Object 的 key 值，比如 Object[value1] = true，在判断另一个值的时候，如果 Object[value2]存在的话，就说明该值是重复的,但是最后请注意这里obj[typeof item + item] = true没有直接使用obj[item],是因为 因为 123 和 '123' 是不同的，直接使用前面的方法会判断为同一个值，因为对象的键值只能是字符串，所以我们可以使用 typeof item + item 拼成字符串作为 key 值来避免这个问题。

6、reduce 实现对象数组去重复

var resources = [ { name: "张三", age: "18" }, { name: "张三", age: "19" }, { name: "张三", age: "20" }, { name: "李四", age: "19" }, { name: "王五", age: "20" }, { name: "赵六", age: "21" } ]

var temp = {}; resources = resources.reduce((prev, curv) => {

// 如果临时对象中有这个名字，什么都不做

if (temp[curv.name]) { } // 如果临时对象没有就把这个名字加进去，同时把当前的这个对象加入到prev中

else { temp[curv.name] = true; prev.push(curv); } return prev }, []); console.log("结果", resources);

这种方法是利用高阶函数 reduce 进行去重， 这里只需要注意initialValue得放一个空数组[]，不然没法push