القراء مثلك يساعدون في دعم MUO. عند إجراء عملية شراء باستخدام الروابط الموجودة على موقعنا ، فقد نربح عمولة تابعة. اقرأ أكثر.

يمكن أن يصبح التكرار على مجموعات البيانات باستخدام الحلقات التقليدية مرهقًا وبطيئًا بسرعة ، خاصة عند التعامل مع كميات هائلة من البيانات.

توفر مولدات JavaScript والمكررات حلاً للتكرار الفعال لمجموعات البيانات الكبيرة. باستخدامهم ، يمكنك التحكم في تدفق التكرار ، وإعطاء القيم واحدة تلو الأخرى ، وإيقاف عملية التكرار مؤقتًا واستئنافها.

هنا سوف تغطي الأساسيات والداخلية لمكرر JavaScript وكيف يمكنك إنشاء مكرر يدويًا واستخدام المولد.

مكررات جافا سكريبت

المكرر هو كائن JavaScript يقوم بتنفيذ بروتوكول المكرر. هذه الأشياء تفعل ذلك من خلال وجود ملف التالي طريقة. تقوم هذه الطريقة بإرجاع كائن يقوم بتنفيذ ملف نتيجة التكرار واجهه المستخدم.

ال نتيجة التكرار تتكون الواجهة من خاصيتين: منتهي و قيمة. ال منتهي الخاصية هي قيمة منطقية يتم إرجاعها خطأ شنيع إذا كان المكرر يمكنه إنتاج القيمة التالية في تسلسله أو حقيقي إذا أكمل المكرر تسلسله.

ال قيمة الخاصية هي قيمة JavaScript يتم إرجاعها بواسطة المكرر أثناء تسلسلها. عندما يكمل مكرر تسلسله (عندما منتهيحقيقي) ، تعود هذه الخاصية غير معرف.

instagram viewer

كما يوحي الاسم ، تتيح لك التكرارات "التكرار" على كائنات جافا سكريبت مثل المصفوفات أو الخرائط. هذا السلوك ممكن بسبب البروتوكول القابل للتكرار.

في JavaScript ، يعد البروتوكول القابل للتكرار طريقة قياسية لتحديد الكائنات التي يمكنك تكرارها ، كما هو الحال في لـ... من حلقة.

على سبيل المثال:

مقدار ثابت فواكه = ["موز", "مانجو", "تفاحة", "العنب"];

ل (مقدار ثابت مكرر ل الفاكهة) {
وحدة التحكم.log (مكرر) ؛
}

/*
موز
مانجو
تفاحة
العنب
*/

هذا المثال يتكرر على امتداد الفاكهة مجموعة باستخدام ملف لـ... من حلقة. في كل تكرار يقوم بتسجيل القيمة الحالية لوحدة التحكم. هذا ممكن لأن المصفوفات قابلة للتكرار.

بعض أنواع جافا سكريبت ، مثل المصفوفات والسلاسل مجموعات وخرائط، هي عناصر مكررة مضمنة لأنها (أو أحد الكائنات الموجودة في سلسلة النموذج الأولي الخاصة بها) تنفذ ملف مكرر طريقة.

الأنواع الأخرى ، مثل الكائنات ، غير قابلة للتكرار افتراضيًا.

على سبيل المثال:

مقدار ثابت iterObject = {
سيارات: ["تسلا", "بي ام دبليو", "تويوتا"],
الحيوانات: ["قطة", "كلب", "الهامستر"],
طعام: ["برجر", "بيتزا", "معكرونة"],
};

ل (مقدار ثابت مكرر ل iterObject) {
وحدة التحكم.log (مكرر) ؛
}

// TypeError: iterObject غير قابل للتكرار

يوضح هذا المثال ما يحدث عندما تحاول التكرار على كائن غير متكرر.

جعل كائن قابل للتكرار

لجعل كائنًا قابلاً للتكرار ، يجب عليك تنفيذ ملف الرمز طريقة على الكائن. لتصبح قابلة للتكرار ، يجب أن تعيد هذه الطريقة كائنًا يقوم بتنفيذ الامتداد نتيجة التكرار واجهه المستخدم.

ال الرمز يخدم الرمز نفس الغرض مثل مكرر ويمكن استخدامها بالتبادل في "المواصفات" ولكن ليس في الكود مكرر ليس بناء جملة JavaScript صالحًا.

تقدم كتل التعليمات البرمجية أدناه مثالاً على كيفية جعل كائن قابل للتكرار باستخدام امتداد iterObject.

أولاً ، أضف ملف الرمز طريقة ل iterObject استخدام وظيفة تصريح.

مثل ذلك:

iterObject [رمز.iterator] = وظيفة () {
// تذهب كتل التعليمات البرمجية اللاحقة هنا ...
}

بعد ذلك ، ستحتاج إلى الوصول إلى جميع المفاتيح الموجودة في الكائن الذي تريد جعله قابلاً للتكرار. يمكنك الوصول إلى المفاتيح باستخدام ملف Object.keys طريقة ، والتي تُرجع مصفوفة من الخصائص القابلة للعد لكائن ما. لإرجاع مصفوفة من iterObjectمفاتيح تمرير هذا الكلمات الرئيسية كوسيطة ل Object.keys.

على سبيل المثال:

يترك الكائنات = هدف.keys (هذا)

سيسمح لك الوصول إلى هذه المصفوفة بتعريف سلوك التكرار للكائن.

بعد ذلك ، تحتاج إلى تتبع تكرارات الكائن. يمكنك تحقيق ذلك باستخدام متغيرات العداد.

على سبيل المثال:

يترك propertyIndex = 0;
يترك مؤشر الطفل = 0;

ستستخدم متغير العداد الأول لتتبع خصائص الكائن والثاني لتتبع توابع الخاصية.

بعد ذلك ، ستحتاج إلى تنفيذ وإرجاع ملف التالي طريقة.

مثل ذلك:

يعود {
التالي() {
// تذهب كتل التعليمات البرمجية اللاحقة هنا ...
}
}

داخل التالي الطريقة ، ستحتاج إلى التعامل مع حالة الحافة التي تحدث عندما يتم تكرار الكائن بأكمله. للتعامل مع حالة الحافة ، يجب عليك إرجاع كائن بامتداد قيمة ضبط ل غير معرف و منتهي ضبط ل حقيقي.

إذا لم يتم التعامل مع هذه الحالة ، فإن محاولة التكرار فوق الكائن ستؤدي إلى حلقة لا نهائية.

إليك كيفية التعامل مع حالة الحافة:

لو (فهرس > الكائنات.طول- 1) {
يعود {
قيمة: غير معرف,
منتهي: حقيقي,
};
}

بعد ذلك ، ستحتاج إلى الوصول إلى خصائص الكائن وعناصرها الفرعية باستخدام متغيرات العداد التي أعلنتها سابقًا.

مثل ذلك:

// الوصول إلى ممتلكات الوالدين والطفل
مقدار ثابت خصائص = هذا[objProperties [propertyIndex]] ؛

مقدار ثابت الخاصية = خصائص [childIndex] ؛

بعد ذلك ، تحتاج إلى تنفيذ بعض المنطق لزيادة متغيرات العداد. يجب على المنطق إعادة تعيين ملف فهرس الطفل عند عدم وجود المزيد من العناصر في مصفوفة الخاصية والانتقال إلى الخاصية التالية في الكائن. بالإضافة إلى ذلك ، يجب أن تزيد فهرس الطفل، إذا كانت لا تزال هناك عناصر في مصفوفة الخاصية الحالية.

على سبيل المثال:

// فهرس تزايد المنطق
إذا (childIndex> = properties.length - 1) {
// إذا لم يكن هناك المزيد من العناصر في المصفوفة التابعة
// إعادة ضبططفلفِهرِس
childIndex = 0 ؛

// الانتقال إلى العقار التالي
propertyIndex ++ ؛
} آخر {
// الانتقال إلى العنصر التالي في المصفوفة التابعة
childIndex ++
}

أخيرًا ، قم بإرجاع كائن بامتداد منتهي تعيين الخاصية على خطأ شنيع و ال قيمة تم تعيين الخاصية على العنصر الفرعي الحالي في التكرار.

على سبيل المثال:

يعود {
منتهي: خطأ شنيع,
القيمة: الملكية ،
};

الانتهاء الخاص بك الرمز يجب أن تكون الوظيفة شبيهة بمجموعة التعليمات البرمجية أدناه:

iterObject [رمز.iterator] = وظيفة () {
مقدار ثابت الكائنات = هدف.keys (هذا);
يترك propertyIndex = 0;
يترك مؤشر الطفل = 0;

يعود {
التالي: () => {
// معالجة حالة الحافة
لو (فهرس > الكائنات.طول- 1) {
يعود {
قيمة: غير معرف,
منتهي: حقيقي,
};
}

// الوصول إلى ممتلكات الوالدين والطفل
مقدار ثابت خصائص = هذا[objProperties [propertyIndex]] ؛

مقدار ثابت الخاصية = خصائص [childIndex] ؛

// فهرس تزايد المنطق
إذا (childIndex> = properties.length - 1) {
// إذا لم يكن هناك المزيد من العناصر في المصفوفة التابعة
// إعادة ضبططفلفِهرِس
childIndex = 0 ؛

// الانتقال إلى العقار التالي
propertyIndex ++ ؛
} آخر {
// الانتقال إلى العنصر التالي في المصفوفة التابعة
childIndex ++
}

يعود {
منتهي: خطأ شنيع,
القيمة: الملكية ،
};
},
};
};

تشغيل لـ... من حلقة على iterObject بعد هذا التنفيذ لن يؤدي إلى حدوث خطأ لأنه يقوم بتنفيذ ملف الرمز طريقة.

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

مولدات جافا سكريبت

مُنشئ JavaScript هو وظيفة يمكنك إيقاف تنفيذها مؤقتًا واستئنافها في أي وقت. هذا السلوك يسمح لها بإنتاج سلسلة من القيم بمرور الوقت.

توفر وظيفة المولد ، وهي دالة تقوم بإرجاع المولد ، بديلاً لإنشاء التكرارات.

يمكنك إنشاء وظيفة مولد بنفس الطريقة التي تنشئ بها إعلان وظيفة في JavaScript. الاختلاف الوحيد هو أنه يجب عليك إلحاق علامة النجمة (*) إلى الكلمة الأساسية للوظيفة.

على سبيل المثال:

وظيفة* مثال () {
يعود"مولد كهرباء"
}

عندما تستدعي دالة عادية في JavaScript ، فإنها ترجع القيمة المحددة من قبلها يعود كلمة رئيسية أو غير معرف خلاف ذلك. لكن وظيفة المولد لا ترجع أي قيمة على الفور. تقوم بإرجاع كائن Generator ، والذي يمكنك تعيينه إلى متغير.

للوصول إلى القيمة الحالية للمكرر ، اتصل بـ التالي الطريقة على كائن المولد.

على سبيل المثال:

مقدار ثابت الجنرال = مثال () ؛

console.log (gen.next ()) ؛ // { قيمة: 'مولد كهرباء', منتهي: حقيقي }

في المثال أعلاه ، فإن ملف قيمة جاء الملكية من يعود الكلمات الرئيسية ، إنهاء المولد بشكل فعال. هذا السلوك غير مرغوب فيه بشكل عام مع وظائف المولد ، لأن ما يميزها عن الوظائف العادية هو القدرة على إيقاف التنفيذ مؤقتًا وإعادة تشغيله.

الكلمة الرئيسية العائد

ال أَثْمَر توفر الكلمة الأساسية طريقة للتكرار من خلال القيم في المولدات عن طريق إيقاف تنفيذ وظيفة المولد مؤقتًا وإرجاع القيمة التي تليها.

على سبيل المثال:

وظيفة* مثال() {
أَثْمَر"عارضات ازياء"
أَثْمَر"الطراز X"
أَثْمَر"Cyber ​​Truck"

يعود"تسلا"
}

مقدار ثابت الجنرال = مثال () ؛

console.log (gen.next ()) ؛ // { قيمة: 'عارضات ازياء', منتهي: خطأ شنيع }

في المثال أعلاه ، عندما يكون ملف التالي يتم استدعاء الطريقة على مثال المولد ، سيتوقف مؤقتًا في كل مرة يواجه فيها ملف أَثْمَر كلمة رئيسية. ال منتهي سيتم أيضًا تعيين الخاصية على خطأ شنيع حتى يواجه أ يعود كلمة رئيسية.

استدعاء التالي طريقة عدة مرات على مثال لتوضيح ذلك ، سيكون لديك ما يلي كإخراج.

console.log (gen.next ()) ؛ // { قيمة: "الطراز X", منتهي: خطأ شنيع }
console.log (gen.next ()) ؛ // { قيمة: "Cyber ​​Truck", منتهي: خطأ شنيع }
console.log (gen.next ()) ؛ // { قيمة: "تسلا", منتهي: حقيقي }

وحدة التحكم.log (gen.next ()) ؛ // {value: undefined، done: true}

يمكنك أيضًا التكرار على كائن مُنشئ باستخدام امتداد لـ... من حلقة.

على سبيل المثال:

ل (مقدار ثابت مكرر ل الجنرال) {
وحدة التحكم.log (مكرر) ؛
}

/*
عارضات ازياء
الموديل X
شاحنة سايبر
*/

استخدام التكرارات والمولدات

على الرغم من أن التكرارات والمولدات قد تبدو كمفاهيم مجردة ، إلا أنها ليست كذلك. يمكن أن تكون مفيدة عند العمل مع تدفقات البيانات غير المحدودة ومجموعات البيانات. يمكنك أيضًا استخدامها لإنشاء معرّفات فريدة. مكتبات إدارة الدولة مثل MobX-State-Tree (MST) تستخدمها أيضًا تحت الغطاء.