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__: HTMLCollectionconsole.info([].slice.call(inputObjs)); //[]length: 0__proto__: Array[0]這樣轉化為真正的數組之后就可以隨便調用數組的方法啦；這種方法固然可行，但是不太容易理解而且太過于“曲折”，es6給我們提供了一個更為簡單直接的方法，form，使用起來很簡單：
var inputObjs=document.getElementsByTagName('input');console.info(inputObjs); //[]length: 0__proto__: HTMLCollectionconsole.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]以上所述是小編給大家介紹的ES6中的數組擴展方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
新聞熱點
疑難解答
