يعرف الأصدقاء الذين استخدموا Underscore أن لديها واجهة برمجة تطبيقات كاملة للغاية لاستدعاء اجتياز المصفوفات (مجموعات) ، و _.each () هي واحدة منها. هنا مثال بسيط:
var arr = [1 ، 2 ، 3 ، 4 ، 5] ؛ _. كل (arr ، function (el) {console.log (el) ؛}) ؛سيتم إخراج الرمز أعلاه 1 ، 2 ، 3 ، 4 ، 5 بدوره. أليس من المثير للاهتمام جدا؟ ليس عليك حتى كتابة حلقة بنفسك. طريقة _.each () مفيدة للغاية لاجتياز المصفوفات ، ولكن تنفيذها الداخلي ليس صعبًا على الإطلاق. دعنا نلقي نظرة على كيفية تنفيذ _.each (). قبل ذلك ، دعونا نلقي نظرة على واجهة برمجة تطبيقات _.each (). _.EACH () يسمى بشكل عام على النحو التالي:
_.each (arr ، fn ، context) ؛
يتلقى 3 معلمات ،
الأول هو صفيف يجب اجتيازه (في الواقع ، من الممكن أيضًا أن يكون كائنًا ، لذلك دعونا نناقش هذا لاحقًا) ؛
والثاني هو وظيفة رد الاتصال (يمكن أن تمر وظيفة رد الاتصال هذه في 3 معلمات ، مثل: الدالة (EL ، I ، ARR) ، والتي هي العنصر الحالي ، الفهرس الحالي والمصفوفة الأصلية ، على التوالي) ؛
والثالث هو السياق الذي تحتاج إليه وظيفة رد الاتصال ، أي تحديد هذه القيمة لوظيفة رد الاتصال FN.
حسنًا ، الاحتياجات واضحة جدًا ، لنبدأ العمل!
دعنا أولاً ننفذ أبسط _.each () ، والذي لا يمكنه تعديل هذا السياق ، ويتلقى معلمتين. الرمز كما يلي:
var _ = {} ؛ // افترض أن هذا هو السفلية // أبسط تطبيق لـ _.each method_.each = function (arr ، fn) {for (var i = 0 ؛ i <arr.length ؛ i ++) {fn (arr [i] ، i ، arr) ؛ } إرجاع arr ؛ // إرجاع المصفوفة الأصلية}ماذا عن ذلك؟ أليس هذا بسيط جدا؟ ما عليك سوى استخدام حلقة واستمر في استدعاء وظيفة رد الاتصال. يمكن القيام به في بضعة أسطر من التعليمات البرمجية. أعتقد أنه لا يمكن لأي أصدقاء فهم ذلك! دعنا نختبرها لمعرفة ما إذا كان يعمل بشكل طبيعي:
var arr = [1 ، 2 ، 3 ، 4 ، 5] ؛ _. كل (arr ، function (el ، i ، arr) {console.log (el) ؛}) ؛افتح في المتصفح وسترى وحدة التحكم المخرج الصحيح.
مثل هذا الرمز البسيط ليس له معنى على الإطلاق. دعونا نلقي نظرة على مثال أكثر تحديا. على سبيل المثال ، لدى Array ARR خاصية SUM. نحتاج إلى جمع جميع عناصر الصفيف وتخزينها في المبلغ ، على النحو التالي:
var arr = [1 ، 2 ، 3 ، 4 ، 5] ؛ arr.sum = 0 ؛ // يتم استخدام سمة المجموع لتخزين مجموع elements_.each (arr ، function (el ، i ، arr) {this.sum += el ؛}) ؛في هذا الوقت ، يتم استخدام هذا في وظيفة رد الاتصال. إذا لم يكن ملزماً ، فهذه نافذة افتراضيًا. هذا ليس ما نريد. نأمل أن تكون ملزمة لـ Array Arr. يمكن للاتصال أو التطبيق تطبيق هذه الوظيفة ، والرمز كما يلي:
var _ = {} ؛ // افترض أن هذا هو السفار السفلي // bind ، واتخاذ معلمتين fn و context // ربط fn إلى السياق var bind = function (fn ، context) {context = context || باطل؛ وظيفة الإرجاع (el ، i ، arr) {fn.call (context ، el ، i ، arr) ؛ }} // _. لـ (var i = 0 ؛ i <arr.length ؛ i ++) {fn (arr [i] ، i ، arr) ؛ } الإرجاع arr ؛} // حالة الاختبار: var arr = [1 ، 2 ، 3 ، 4 ، 5] ؛ arr.sum = 0 ؛ // يتم استخدام سمة SUM لتخزين مجموع elements_.each (arr ، function (el ، i ، arr) {this.sum += el ؛} ، arr) ؛ console.log (arr.sum) ؛ // 15حسنًا ، هذا _.EACH () قوي بالفعل بما يكفي للتكرار من خلال الصفيف بشكل طبيعي ، ويمكنك أيضًا تحديد هذه القيمة حسب الإرادة لتغيير سياق وظيفة رد الاتصال. ومع ذلك ، كما ذكرنا سابقًا ، يمكن لـ UndersCore's _.each () أيضًا اجتياز الكائنات ، وهذا التنفيذ ليس صعبًا. فقط تحكم على ما إذا كانت المعلمة الأولى التي تم تمريرها هي كائن أو صفيف. إذا كانت صفيف ، تكرار مثلنا. خلاف ذلك ، إذا كان كائنًا ، فاستخدم الكائن لـ ... في اجتياز الحلقة. إذا كنت مهتمًا ، فيمكنك تجربتها بنفسك أو التحقق من رمز المصدر الخاص بالسطح.
ملاحظة: نظرًا لأن معيار ES5 ، فإن المصفوفات الأصلية لها بالفعل طرق اجتياز مثل Array.prototype.foreach و Array.Prototype.map ، وما إلى ذلك ، ويمكن استخدام الطرق الأصلية في المشروع.
ما سبق هو الوصف الكامل للتحليل المتعمق لطريقة عبور صفيف JS (الموصى به) الذي أدخله المحرر. آمل أن يكون ذلك مفيدًا للجميع. إذا كان لديك أي أسئلة ، فيرجى ترك رسالة لي وسوف يرد المحرر على الجميع في الوقت المناسب. شكرا جزيلا لدعمكم لموقع wulin.com!