JS知识点回顾(2)(this，[call,apply,bind]，跨域，[for...in,for...of]，数组去重，数组扁平化)

this关键字

1. 普通函数中的this window
2. 构造函数中的this 是当前构造函数建立的对象在new这个构造函数的时候会在内存中建立一个对象,此时会让this指向刚建立好的这个对象
3. 方法中的this 方法所属的对象,谁调用这个方法this就指向谁
4. 事件处理函数中的this 事件源 谁调用的该事件this就指向谁在这里就指向事件源this

call，apply，bind 三者用法和区别

• 改变函数内部的this指向

• call()

  call 方法第一个参数做为函数上下文的对象，可是后面传入的是一个参数列表，而不是数组。

  function a(xx) {         
      this.b = xx; 
  } 
  var o = {}; 
  a.call(o, 5); 
  console.log(a.b);    // undefined 
  console.log(o.b);    // 5 
  复制代码

• apply()

  apply 方法传入两个参数：一个是做为函数上下文的对象，另一个是做为函数参数所组成的数组。

  function add(a,b) {         
      this.sum = a + b; 
  } 
  var o = {}; 
  add.call(o, 5,5);
  console.log(o.sum);    // 10
  add.apply(o,[3,5]);
  console.log(o.sum);    // 8
  复制代码

• bind()

  bind()的做用其实与call()以及apply()都是同样的，都是为了改变函数运行时的上下文，bind()与后面二者的区别是，call()和apply()在调用函数以后会当即执行，而bind()方法调用并改变函数运行时的上下文的以后，返回一个新的函数，在咱们须要调用的地方去调用他。

  var a = 1;
  var obj = {
      a=9;
  };
  function example(b){
      return this.a+b
  };
  console.log(example.bind(obj,2));  // 打印出来的是一个函数  不会当即执行
  
  var newexample = example();
  newexample(); // 调用的地方去调用
  复制代码

跨域问题

• 产生跨域的缘由：浏览器的同源策略。

  • 什么是同源策略：同源是指域名，协议，端口三个都相同。

  • 例子：

    www.jianshu.com 和jianshu.com 不一样源，由于域名不一样

    www.bilibili.tv和http://www.bilibili.com 不一样源，由于域名不一样

    http://localhost:3000 和 http://localhost:3001 不一样源,由于端口不一样

    qq.com 和https://qq.com 不一样源，由于协议不一样

    www.pixiv.net 和 www.pixiv.net/manage/illu… 同源，由于域名，协议，端口都相同

• 如何解决跨域

  1. 后端代理：后端不存在跨域
  2. cros(xhr2)：设置请求头
  3. jsonp：利用script的src属性不存在跨域的特性；请求方式：get
  4. nginx(最好的)

事件委托（代理）

• 事件委托：利用事件冒泡的原理,将子元素的事件委托给父元素执行。

• 事件对象下面的属性：

  target:获取当前操做的元素对象。兼容问题：srcElement

• var oUl = document.querySelector('ul');
   oUl.onclick = function (ev) {
       var ev = ev || window.event;
       var element = ev.target || ev.srcElement;//获取当前操做的元素对象
       alert(element.innerHTML);
  }
  复制代码

for...in迭代和for...of的区别+forEach

• for … in循环遍历的是对象的属性名称。

  var a = ['A', 'B', 'C'];
  a.name = 'Hello';
  for (var x in a) {
      alert(x); // '0', '1', '2', 'name'
  }
  复制代码

• for … of循环只循环集合自己的元素(没法遍历对象)

  var a = ['A', 'B', 'C'];
  a.name = 'Hello';
  for (var x of a) {
      alert(x); // 'A', 'B', 'C'
  }
  复制代码

• forEach方法

  var a = ['A', 'B', 'C'];
  a.forEach(function (element, index, array) {
      // element: 指向当前元素的值
      // index: 指向当前索引
      // array: 指向Array对象自己
      alert(element);
  });
  复制代码

数组去重

• 利用ES6 set + 解构赋值

  let arr = [1, 2, 2, 3, 3, 3, 4, 4, 4, 5, 6, 6, 7, 8, 8, 9, 9, 9, 9]
  console.log([...new Set(arr)])
  复制代码

• indexOf

• 利用对象的键值对惟一

  var arr = [1, 2, 3, 2, 3, 4, 5, 6, 7, 8, 9, 8, 5];
   
   //将数组转换成对象
   //利用对象的key值不能重复这一特性
   var toObject = function (array) {
   	var obj = {};
   	for (var i = 0, j = array.length; i < j; i++) {
  		obj[array[i]] = true;
      	}
      return obj;
  }
  //再将对象转换成数组
  var toArray = function (obj) {
  	var arr = [];
      for (var i in obj) {
  		arr.push(i);
      }
      return arr;
  }
  
  var uiq = function (arr) {
     return toArray(toObject(arr));
  }
  var arr1 = uiq(arr);
  console.log(arr1);
  复制代码

数组扁平化

• reduce

  function flatten(arr) {  
      return arr.reduce((result, item)=> {
          return result.concat(Array.isArray(item) ? flatten(item) : item);
      }, []);
  }
  复制代码

  reduce是数组的一种方法，它接收一个函数做为累加器，数组中的每一个值（从左到右）开始缩减，最终计算为一个值。

  reduce包含两个参数：回调函数，传给total的初始值

• toString & split

  function flatten(arr) {
      return arr.toString().split(',').map(function(item) {
          return Number(item);
      })
  }
  复制代码

• join & split

  function flatten(arr) {
      return arr.join(',').split(',').map(function(item) {
          return parseInt(item);
      })
  }
  复制代码

• 递归

  function flatten(arr) {
      var res = [];
      arr.map(item => {
          if(Array.isArray(item)) {
              res = res.concat(flatten(item));
          } else {
              res.push(item);
          }
      });
      return res;
  }
  复制代码

• 扩展运算符

  function flatten(arr) {
      while(arr.some(item=>Array.isArray(item))) {
          arr = [].concat(...arr);
      }
      return arr;
  }
  复制代码