วิธีที่มีประสิทธิภาพมากที่สุดในการแปลง HTMLCollection เป็น Array

มีวิธีที่มีประสิทธิภาพมากขึ้นในการแปลง HTMLCollection ไปเป็น Array นอกเหนือจากการวนซ้ำผ่านเนื้อหาของคอลเล็กชั่นที่กล่าวไว้และผลักดันแต่ละรายการเป็นอาร์เรย์ด้วยตนเองหรือไม่?

var arr = Array.prototype.slice.call( htmlCollection )

จะมีผลเช่นเดียวกันโดยใช้รหัส "ดั้งเดิม"

แก้ไข

เนื่องจากสิ่งนี้ได้รับมุมมองจำนวนมากโปรดทราบ (ต่อความคิดเห็นของ @ oriol) ว่าการแสดงออกที่กระชับยิ่งขึ้นต่อไปนี้เทียบเท่าได้อย่างมีประสิทธิภาพ :

var arr = [].slice.call(htmlCollection);

แต่ทราบตามความคิดเห็นของ @ JussiR ซึ่งแตกต่างจากรูปแบบ "verbose" มันสร้างอินสแตนซ์อาร์เรย์ที่ว่างเปล่าไม่ได้ใช้และไม่สามารถใช้งานได้จริงในกระบวนการ คอมไพเลอร์ทำอะไรเกี่ยวกับเรื่องนี้อยู่นอก ken ของโปรแกรมเมอร์

แก้ไข

ตั้งแต่ ECMAScript 2015 (ES 6) ก็มีArray ด้วยเช่นกัน:

var arr = Array.from(htmlCollection);

แก้ไข

ECMAScript 2015 ยังให้บริการตัวดำเนินการสเปรดซึ่งเทียบเท่ากับหน้าที่Array.from(แม้ว่าโปรดทราบว่าArray.fromรองรับฟังก์ชั่นการทำแผนที่เป็นอาร์กิวเมนต์ที่สอง)

var arr = [...htmlCollection];

ฉันยืนยันว่าทั้งสองข้อทำงานNodeListได้ดี

การเปรียบเทียบประสิทธิภาพสำหรับวิธีการที่กล่าวถึง: http://jsben.ch/h2IFA

ไม่แน่ใจว่าสิ่งนี้มีประสิทธิภาพมากที่สุดหรือไม่ แต่ไวยากรณ์ ES6 ที่กระชับอาจเป็นดังนี้:

let arry = [...htmlCollection] 

แก้ไข: อีกความคิดเห็นหนึ่งจาก Chris_F:

let arry = Array.from(htmlCollection)

ฉันเห็นวิธีรัดกุมมากขึ้นในการรับArray.prototypeวิธีโดยทั่วไปที่ใช้งานได้เช่นกัน การแปลงHTMLCollectionวัตถุเป็นArrayวัตถุแสดงให้เห็นด้านล่าง:

[] .slice.call (yourHTMLCollectionObject);

และตามที่ระบุไว้ในความคิดเห็นสำหรับเบราว์เซอร์เก่าเช่น IE7 และก่อนหน้านี้คุณเพียงแค่ต้องใช้ฟังก์ชั่นความเข้ากันได้เช่น:

function toArray(x) {
    for(var i = 0, a = []; i < x.length; i++)
        a.push(x[i]);

    return a
}

ฉันรู้ว่านี่เป็นคำถามเก่า แต่ฉันรู้สึกว่าคำตอบที่ยอมรับนั้นไม่สมบูรณ์เล็กน้อย ดังนั้นฉันคิดว่าฉันจะโยนมันออกไปที่นั่น FWIW

สำหรับการใช้ข้ามเบราว์เซอร์ฉันขอแนะนำให้คุณดูฟังก์ชั่นprototype.js $A

คัดลอกจาก 1.6.1 :

function $A(iterable) {
  if (!iterable) return [];
  if ('toArray' in Object(iterable)) return iterable.toArray();
  var length = iterable.length || 0, results = new Array(length);
  while (length--) results[length] = iterable[length];
  return results;
}

อาจไม่ได้ใช้Array.prototype.sliceเพราะอาจไม่สามารถใช้ได้กับทุกเบราว์เซอร์ iterableฉันกลัวประสิทธิภาพไม่ดีงามที่มีกลับฤดูใบไม้ร่วงเป็นห่วงจาวาสคริปต์มากกว่า

นี่คือโซลูชันส่วนบุคคลของฉันตามข้อมูลที่นี่ (หัวข้อนี้):

var Divs = new Array();    
var Elemns = document.getElementsByClassName("divisao");
    try {
        Divs = Elemns.prototype.slice.call(Elemns);
    } catch(e) {
        Divs = $A(Elemns);
    }

Gareth Davis ได้อธิบาย $ ไว้ที่ไหนในโพสต์ของเขา

function $A(iterable) {
  if (!iterable) return [];
  if ('toArray' in Object(iterable)) return iterable.toArray();
  var length = iterable.length || 0, results = new Array(length);
  while (length--) results[length] = iterable[length];
  return results;
}

หากเบราว์เซอร์รองรับวิธีที่ดีที่สุดไม่เช่นนั้นจะใช้ข้ามเบราว์เซอร์

ใช้ได้กับเบราว์เซอร์ทุกรุ่นรวมถึง IE เวอร์ชันก่อนหน้า

var arr = [];
[].push.apply(arr, htmlCollection);

เนื่องจาก jsperf ยังคงไม่ทำงานในขณะนี้นี่คือ jsfiddle ที่เปรียบเทียบประสิทธิภาพของวิธีการที่แตกต่างกัน https://jsfiddle.net/qw9qf48j/

ในการแปลงอาเรย์ให้เป็นอาเรย์อย่างมีประสิทธิภาพเราสามารถใช้ประโยชน์จากjQuery makeArray :

makeArray: แปลงวัตถุคล้ายอาร์เรย์เป็นอาร์เรย์ JavaScript จริง

การใช้งาน:

var domArray = jQuery.makeArray(htmlCollection);

พิเศษเล็กน้อย:

หากคุณไม่ต้องการที่จะอ้างอิงถึงวัตถุอาร์เรย์ (ส่วนใหญ่เวลา HTMLCollections มีการเปลี่ยนแปลงแบบไดนามิกดังนั้นจึงดีกว่าที่จะคัดลอกลงในอาร์เรย์อื่นตัวอย่างนี้ใส่ใจกับประสิทธิภาพ:

var domDataLength = domData.length //Better performance, no need to calculate every iteration the domArray length
var resultArray = new Array(domDataLength) // Since we know the length its improves the performance to declare the result array from the beginning.

for (var i = 0 ; i < domDataLength ; i++) {
    resultArray[i] = domArray[i]; //Since we already declared the resultArray we can not make use of the more expensive push method.
}

อาเรย์เป็นอย่างไร

HTMLCollectionเป็น"array-like"วัตถุที่อาร์เรย์เหมือนวัตถุที่มีความคล้ายคลึงกับวัตถุอาร์เรย์ แต่หายไปจำนวนมากของการกำหนดหน้าที่ของมัน:

วัตถุที่มีลักษณะคล้ายอาร์เรย์ดูเหมือนอาร์เรย์ พวกเขามีองค์ประกอบหมายเลขต่างๆและคุณสมบัติความยาว แต่นั่นคือสิ่งที่ความคล้ายคลึงกันหยุด วัตถุที่เหมือนอาร์เรย์ไม่มีฟังก์ชั่นใด ๆ ของอาเรย์และลูปในตัวไม่ทำงานแม้แต่อย่างเดียว!