ES6之數組擴展方法【一】（至關好用）

form 轉化爲真正的數組

 

先說一下使用場景，在Js中，咱們要常常操做DOM，好比獲取所有頁面的input標籤，而且找到類型爲button的元素，而後給這個按鈕註冊一個點擊事件，咱們可能會這樣操做；

var inputObjs=document.getElementsByTagName('input'); for(var i=0;i<inputObjs.length;i++){ if(inputObjs[i].type==='button'){ inputObjs[i].onclick=function(){ return; } } }

這樣寫確定是沒有問題的，可是咱們知道不少操做數組的方法比for循環好用多了，好比es5的forEach方法就很好用；可是能直接用嗎？不能！由於dom對象集合不是一個真正得Array數組類型，直接使用會報錯的；

  var inputObjs=document.getElementsByTagName('input'); inputObjs.forEach(); //inputObjs.forEach is not a function

儘管如此咱們仍是能夠用，不能直接用能夠間接用，使用js強大的對象冒充功能便可；

  var inputObjs=document.getElementsByTagName('input'); console.info(inputObjs); //[]length: 0__proto__: HTMLCollection
  console.info([].slice.call(inputObjs));   //[]length: 0__proto__: Array[0]

 這樣轉化爲真正的數組以後就能夠隨便調用數組的方法啦；這種方法當然可行，可是不太容易理解並且太過於「曲折」，es6給咱們提供了一個更爲簡單直接的方法，form，使用起來很簡單：

  var inputObjs=document.getElementsByTagName('input'); console.info(inputObjs); //[]length: 0__proto__: HTMLCollection
  console.info(Array.from(inputObjs));      //[]length: 0__proto__: Array[0]

結果是同樣的可是語義上更加貼切也更容易理解，是否是很好用啊！固然這些還不夠，不只僅是類數組任何數據類型都能使用此方法轉化爲數組，可是不一樣的類型效果是不同的，測試以下：

  let str='google'; console.log(Array.from(str)); //["g", "o", "o", "g", "l", "e"]
  let num=234; console.log(Array.from(num)); //[]
  let bol=false; console.log(Array.from(bol)); let obj={foo:'foo',bar:'bar'}; console.log(Array.from(obj)); //[]
  let superObj={0:'foo',1:'bar',length:2}; console.log(Array.from(superObj)); //["foo", "bar"]

 這裏列出了不一樣的數據類型調用該方法後的結果，值得留意的是字符串和一些特殊對象是能夠轉化爲有內容的數組的，特殊的對象是指內容按照數字鍵值對排列，而且有length屬性的對象；這種對象是可使用for循環的，而字符串也是可使用for循環來獲得每個字符的，因此歸結爲一句話，能使用for循環輸出內容的使用from方法就不是一個空數組；在這裏提醒一下，使用過jQuery的小夥伴能夠留意一下，當你使用選擇器選擇元素返回的jquery對象是什麼結構的？其實就是咱們例子中最後一個的結構，具體能夠參考個人jQuery源碼分析系列文章

 

of 將值轉化爲數組

 

建立數組有兩種方法一種是構造函數式：

 let arr=Array(1,2,3);

另外一種是最經常使用的字面量建立：

  let arr=[1,2,3];

Array.of方法實際上是對第一個種方式的補充，用法以下：

 console.log(Array.of(1,2,3)); //[1,2,3]

貌似跟跟構造方法同樣的效果，那這個方法爲何還有存在的必要呢？看下面的例子就明白了：

  console.log(Array()); //[]
  console.log(Array(1)); //[undefined]
  console.log(Array(1,2)); //[1,2]

在這個例子中參數數量的不一樣其表明的意義不同，只有一個參數時，參數表示的是長度，大於1一個參數時表示的元素，會引發混淆，可是Array.of方法就不會存在此問題嗎，由於其參數始終表示的元素:

  console.log(Array.of()); //[]
  console.log(Array.of(1)); //[1]
  console.log(Array.of(1,2)); //[1,2]

 

 copyWithin 數組內部數據複製替換

 

copyWithin方法主要做用是數組內部值的替換，該方法接受三個參數，分別表示開始複製位置、結束複製位置和插入位置，示例以下：

[1, 2, 3, 4, 5].copyWithin(0, 3)
// [4, 5, 3, 4, 5]// 將3號位複製到0號位
[1, 2, 3, 4, 5].copyWithin(0, 3, 4)
// [4, 2, 3, 4, 5]

// -2至關於3號位，-1至關於4號位
[1, 2, 3, 4, 5].copyWithin(0, -2, -1)
// [4, 2, 3, 4, 5]

// 將3號位複製到0號位
[].copyWithin.call({length: 5, 3: 1}, 0, 3)
// {0: 1, 3: 1, length: 5}

// 將2號位到數組結束，複製到0號位
var i32a = new Int32Array([1, 2, 3, 4, 5]);
i32a.copyWithin(0, 2);
// Int32Array [3, 4, 5, 4, 5]

// 對於沒有部署TypedArray的copyWithin方法的平臺
// 須要採用下面的寫法
[].copyWithin.call(new Int32Array([1, 2, 3, 4, 5]), 0, 3, 4);
// Int32Array [4, 2, 3, 4, 5]

 

例子參考：http://es6.ruanyifeng.com/#docs/array