從節點列表轉換時的for循環設置長度變量

Question

唷！ 這是一個很長的頭銜。

我正在為Web開發人員閱讀WROX的專業JavaScript書籍，我看到了這個示例代碼，我只是想知道這是否是最佳實踐：

function convertToArray(nodes) {
   array = new Array();
   for (var i=0, len=nodes.length; i < len; i++) {
      array.push(nodes[i]);
   }
   return array;
}

讓我摸不着頭腦的是“len = nodes.length”。 我認為for循環中的第一句只運行一次是錯誤的嗎？ 您是否有理由在運行之前將變量（len）設置為nodeList的長度？ 你會這樣做到普通陣列嗎？

謝謝

Answer 1

這是出於性能原因。 由於以下幾個原因，局部變量更快：

• 需要在循環中始終訪問長度，每次迭代一次;
• 局部變量查找比成員查找更快;
• 如果nodes是一個數組，則.length是一個魔術屬性，可能需要比成員變量更長的時間來檢索。
• 如果nodes是ActiveX對象，則.length可能會導致對對象的方法調用，因此這是所有nodes中最昂貴的操作。

Answer 2

在我們討論微優化時，以下內容應該更快：

function convertToArray(nodes) {
    var i = nodes.length,
        array = new Array(i); // potentially faster than `array = []`
                              //  --  see comments

    while(i--)
        array[i] = nodes[i];

    return array;
}

它需要少一個局部變量，使用while而不是for循環並使用數組賦值而不是函數調用push() 。

還有，因為 我們倒計時了 我們預先分配數組的槽，每次迭代步驟都不需要更改數組的長度， 但只在第一個 。