الطريقة الأكثر فعالية لتحويل HTMLCollection إلى صفيف

Question

هل هناك طريقة أكثر فعالية لتحويل HTMLCollection إلى مصفوفة، بخلاف التكرار عبر محتويات المجموعة المذكورة ودفع كل عنصر يدويًا إلى مصفوفة؟

Answer 1

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

سيكون له نفس التأثير باستخدام الكود "الأصلي".

يحرر

نظرًا لأن هذا يحصل على الكثير من المشاهدات، لاحظ (حسب تعليق @oriol) أن التعبير التالي الأكثر إيجازًا هو على نحو فعال مقابل:

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

لكن لاحظ وفقًا لتعليق @JussiR، أنه على عكس النموذج "المطول"، فإنه يقوم بإنشاء مثيل مصفوفة فارغ وغير مستخدم وغير قابل للاستخدام بالفعل في العملية.ما يفعله المترجمون حيال ذلك هو خارج نطاق قدرة المبرمج.

يحرر

منذ ECMAScript 2015 (الطبعة 6) هناك أيضًا Array.from:

var arr = Array.from(htmlCollection);

يحرر

يوفر ECMAScript 2015 أيضًا عامل الانتشار, ، وهو ما يعادل وظيفيا Array.from (على الرغم من ملاحظة ذلك Array.from يدعم وظيفة التعيين كوسيطة ثانية).

var arr = [...htmlCollection];

لقد أكدت أن كلا الأمرين أعلاه يعملان NodeList.

Answer 2

ولست متأكدا إذا كان هذا هو الأكثر كفاءة، ولكن بناء الجملة ES6 موجزة قد يكون:

let arry = [...htmlCollection] 

---

وتحرير: آخر واحد، من Chris_F تعليق:

let arry = Array.from(htmlCollection)

Answer 3

رأيت طريقة أكثر إيجازا للحصول على 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.

Answer 4

لتطبيق عبر متصفح كنت sugguest نظرتم prototype.js $A الدالة

copyed من 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.

Answer 5

وهذا هو الحل نظري الشخصية، استنادا إلى المعلومات هنا (هذا الموضوع):

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

وأين وصفت $ A غاريث ديفيس في منصبه:

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;
}

وإذا كان المستعرض يدعم أفضل وسيلة، طيب، وإلا سوف تستخدم عبر متصفح.

Answer 6

وهذا يعمل في جميع المتصفحات بما في ذلك الإصدارات السابقة IE.

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

ومنذ jsperf لا يزال أسفل في الوقت الحالي، وهنا هو jsfiddle أن يقارن أداء أساليب مختلفة. https://jsfiddle.net/qw9qf48j/

Answer 7

لتحويل مصفوفة تشبه إلى مجموعة بطريقة فعالة يمكننا الاستفادة من مسج makeArray:

<اقتباس فقرة>   

وmakeArray: تحويل كائن مثل مجموعة إلى مجموعة جافا سكريبت الحقيقية

والاستعمال:

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"، في التحف مثل مجموعة متشابهة من وجوه مجموعة ولكن في عداد المفقودين الكثير من تعريفه ظيفته:

<اقتباس فقرة>   

ومثل صفيف الأشياء تبدو مثل المصفوفات. لديهم مختلف مرقمة   العناصر وخاصية الطول. ولكن هذا حيث يتوقف التشابه.   كائنات مثل مجموعة لا يملك أي من وظائف مجموعة من ولفي   الحلقات حتى لا تعمل!