如何用slice將類別數組轉換成數組

這篇文章分成兩部分，第一部分是slice()的使用，第二部分是用slice將類別陣列轉換成陣列，有需要的朋友可以參考一下，希望對你有幫助。

第一部分：

官方文件說：slice是用來截取選取數組的，可傳入一個或兩個參數，回傳值是新數組，不會影響原始數組。
先new了Array一個陣列 str

  var str = new Array();
        str[0] = 1;
        str[1] = 2;
        str[2] = 3;
        str[3] = 4;
        str[4] = 5;

傳回值是選取的新數組，原始數組是不會被修改的。

如果是參數就是從何處開始(下標)選取到陣列的結尾。

var strs = str.slice(2);
console.log(strs);      // [3, 4, 5]
console.log(str);       // [1, 2, 3, 4, 5]

如果傳入二個參數就是從第一個參數(下標)開始選取到第二個參數(下標)結束,但是不包含第二個參數

var strs = str.slice(2,4);
console.log(strs);      // [3, 4]

如果傳入的是負數，規定從數組的尾部開始算起，-1指最後一個元素，-2指倒數第二個元素，以此類推

var strs = str.slice(-2);
console.log(strs);      // [4, 5]

 如果傳入兩個負數，和上面一樣不過都是都從數組的尾端開始。

var strs = str.slice(-4,-1);
console.log(strs);      // [2, 3, 4]

如果傳入兩個參數，第二個參數小於第一個參數，那麼結果為空數組(負數也同理)。

var strs = str.slice(-1,1);      
console.log(strs);      // [ ]

好了  上面就是slice函數的使用方式

不過在實務上一般是用來將類別陣列轉換成陣列。

這是我之前寫的一串HTML程式碼用來取得類別數組

    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>

結果如下：

var NodeList = document.querySelectorAll("div");
console.log(NodeList);      //NodeList(10) [div, div, div, div, div, div, div, div, div, div]
NodeList = [].slice.call(NodeList);
console.log(NodeList)       //(10) [div, div, div, div, div, div, div, div, div, div]

第一行是先取得一串類別數組
第二行是在控制台輸出類別數組
第三行是轉換類別數組(需要用變數來接受)或者Array.prototype.slice.call(NodeList)也是可以的，兩個是同理
第四行是在控制台輸出轉換過的陣列。
不知道你學會了沒？我也不知道學會沒，反正我自己敲了好幾遍，哈哈。

以上是如何用slice將類別數組轉換成數組的詳細內容。更多資訊請關注PHP中文網其他相關文章！