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;
  }
  複製代碼