JavaScript : ما الافضل للتكرار For أو Object.keys وما هي الأسرع في تحميل البيانات وأين يكمن الاختلاف؟

السلام عليكم،

المرجوا المساعدة بالجواب عن سؤالي حول الجافاسكريبت:

ماهي افضل دالة للتكرار هل عبر استعمال For او Object.keys وماهي الاسرع وأين يكمن الاختلاف، بحث ولم اجد ما يشفي غليلي :/

المثال الأول : For Loop

for (var i=0; i<data.entry.length; i++) {
    var thumbnail = data.entry[i].media.url,
        title = data.entry[i].title,
        summary = data.entry[i].summary,
        author = data.entry[i].author[0].name,
        comments = data.entry[i].thr;
};

المثال الثاني : Object.keys

Object.keys(data.entry).forEach(function(i){
    var thumbnail = data.entry[i].media.url,
        title = data.entry[i].title,
        summary = data.entry[i].summary,
        author = data.entry[i].author[0].name,
        comments = data.entry[i].thr;
});

غالبا ما كنت استعمال ال For Loop ومؤخرا وضعت شرحا حوال ال JSON FEED API لكن هنالك شخص رأى الشرح ونصحني باستعمال Object.keys لانها اسرع بدل ال For، وفعلا جربتها لكن لم الاحظ اي اختلاف في السرعة وبحث حول الامر ولم اجد ما الفرق بينهما بالضبط فهل هنالك من يمكنه المساعدة؟


التعليق السابق

شيفرتك جيّدة جدًا وسريعة، فقط ملاحظات على الكتابة، يمكنك كتابة شيء مثل:

for (let i in data.entry) {
    let entry = data.entry[i];

    if (typeof entry.title == 'undefined') {
        // عنصر غير صالح
                     // لا تستخدم الطريقة المختصر ; بعد العبارة ذاك سلوك سيء.
        continue;
    }

    ((entry) => {
        var title = entry.title,
            thumbnail = entry.media.url,
            summary = entry.summary,
            author = entry.author[0].name,
            comments = entry.thr;
        // your code here

    })(entry);
}

الملاحظات:

  1. لا تعرف المتغير بشكل عمومي يكفي تعريفها في نطاق العبارة for، باستخدام let، لا فائدة من تعريفها في النطاق الأب إذا لن تستخدمها خارجًا.

var thumbnail, title, summary, author, comments, i;

  1. حتى ولو تعرف متغير العبارة عموميًا، يفضل أن تعرفه بداخل العبارة؛ كي يسهل الوصول إليه ومعرفة أين عُرِفَ.

for (i in data.entry) {

  1. أحسنت بالتأكد من أن المفتاح من داخل المصفوفة، المشكلة أن هذه العبارة ستكون دائمًا صحيحة حتى ولو كان المفتاح اسمًا -أصلًا في for in تكون كل المفاتيح نصوصًا typeof key === 'string' دائمًا- الحل الوحيد للتأكد هو التأكد من أنّ العنصر صحيح حقًا لديه مثلًا Title غير هذا قد تحدث مشكلة في بعض الحالات:
if (+i >= 0) {.

ملاحظة: let، والدوال السهمية تتطلب محرك جافا سكريبت حديث بالتالي متصفح حديث.

for (var i in data.entry[i]) {
    if ((/\d+/).test(i)) {
        (function (entry) {
            var title = entry.title,
                thumbnail = entry.media.url,
                summary = entry.summary,
                author = entry.author[0].name,
                comments = entry.thr;
            // your code here

        })(data.entry[i]);
    }
}

عندما أستخدم let في محرر brackets يعطي الخطأ

Expected an identifier and instead saw 'let'.    let x = 7;

وعند استخدام var داخل for يعطي الخطأ

Move 'var' declarations to the top of the function.    for (var i = 0; i < 10; i += 1) {

الأخطاء التي تظهر لك بسبب أنّك تحتاج إلى ضبط إعدادت JSLint إلى ES6 ما لديك قديم والخطأ الثاني بسبب أنّه ربما لم يفهم الـSyntax الحديث، واستخدم الدوال السهمية للدوال مجهولة الأسم.

 if ((/\d+/).test(i)) {

لا يكفي للتأكد من أن العنصر صحيح، تحتاج إلى التأكد من العناصر.

هل تقصد أنه لا يكفي للتأكد من أن i عدد صحيح ؟

أم تقصد أنه لا يكفي للتأكد من أن التدوينة لها عنوان ؟

وايضًا /\d+/ ستعتبر key123 صحيحًا يبدو أنك نسيت ^$ للبداية والنهاية.

قد يكون i عددًا صحيحًا موجبًا بداخل المصفوفة، لكن العنصر ليس مقالة مثلًا، وإذا كنت ستتأكد لما لا تتأكد من عناصر التدوينة بالمرة؟؛ كي لا تحدث مشاكل أثناء التشغيل، أو try .. catch بداخل محتوى العبارة ستكفي وتكون أكثر عمومًا.

الخطأ الثاني سببه أنّك تعرّف متغيّرًا بالكلمة var داخل حلقة for، بينما يفضل نقله لأعلى الدالة الّتي تحوي الحلقة، لأنّ المتغيّرات من نوع var نطاقها هو نطاق الدالة function-scoped وليس القطعة block-scoped، عمليًّا لن تجد فرقًا، ولكن فهمك لمجال المتغير سيساعدك في تجنب مشكلات غريبة قد لا تفهم سببها دون فهم طبيعة المجالات في JavaScript.

بارك الله فيكما لقد استفدت كثيرا من هذا النقاش البرمجي، بخصوص هذا الكود ماذا لو احد المتغيرات نتيجتها Undefined او Null هل سيعمل الكود بدون اي مشاكل؟

for (var i in data.entry[i]) {
    if ((/^\d+$/).test(i)) {
        (function (entry) {
            var title = entry.title,
                thumbnail = entry.media.url,
                summary = entry.summary,
                author = entry.author[0].name,
                comments = entry.thr;
            // التحقق من وجود عنوان ومحتوى للتدوينة
            if (!title || !summary) {return; }
            // your code here


        })(data.entry[i]);
    }
}

بارك الله فيك صديقي هل هذا يمكنني اضافة !thumbnail بخصوص لو المقالة ليست بها صورة يعني مجرد نصوصا ضمن المقالة هل سيشتغل الكود دون مشكلة؟

بعد أن اطلعت على ال Json المرسل من blooger رأيت أنه يجب إضافة المزيد من الشروط

أنظر هنا

نعم لكن الطريقة التي استعملها شخصيا اعتمد فيها على $.ajax وليس مثل هذه الطريقة التي في الرابط الذي أرسلته هل انت صاحب مدونة كن مدون؟

هل انت صاحب مدونة كن مدون؟

لا

الطريقة التي استعملها شخصيا اعتمد فيها على $.ajax

لا تهتم بالطريقة بل أنظر إلى ما بداخل الدالة entryFunc

لا داعي لـ

typeof x === "undefined"

يمكنك كتابة:

x === undefined

وستحصل على نفس النتيجة

أحب استخدام typeof دائمًا حتى أعتاد عليها؛ الطريقة الثانية سترجع خطأ في الوضع الصارم إذا كان متغير غير معرف -في الحالة السابقة لا فرق- لكن في شيفرتك لن تعمل، أبدًا؛ ستحصل على شيء مثل "Uncaught ReferenceError: x is not defined" إذا لم يكن x معرفًا.

يسرني التعرف عليك اخ يوسف من خلال اجوبتك تبدو متكمنا جدا وخير دليل اخر عمل لك الا وهو ملهم بالتوفيق لكم في هذا المشروع الجميل :)