طرق تكرار الصفيف (خريطة ، عامل تصفية ، تقليل)

لغة JavaScript لها تفضيل واضح للمصفوفات على هياكل البيانات الأخرى. لديهم الكثير من الحيل المحددة والمريحة ، على سبيل المثال ، مجموعة كاملة من طرق التكرار: map, filter, reduce.

خريطة

ال map () طريقة تخلق مصفوفة с جديدة نتيجة استدعاء الوظيفة المحددة ⚙️ لكل عنصر من عناصر المصفوفة.

بناء الجملة

let new_array = arr.map(function callback( currentValue[, index[, array]]) {
    // Returns the item for new_array
}[, thisArg])

ال map طريقة استدعاء تمرير callback تعمل مرة واحدة لكل عنصر ، بترتيب حدوثها ، وتقوم ببناء مصفوفة جديدة من نتائج استدعائها. يتم استدعاء وظيفة "callback" فقط لفهارس المصفوفة التي تم تعيين قيم لها ، بما في ذلك "undefined". لا يتم استدعاؤه لعناصر الصفيف المفقودة (أي للفهارس التي لم يتم تحديدها أو حذفها أو تعيين قيمة لها مطلقًا).

يتم استدعاء الدالة ⚙️ رد الاتصال بثلاث وسيطات:

• قيمة العنصر ،
• فهرس العنصر
• والمصفوفة التي يتم من خلالها المرور.

إذا كان thisArg تم تمرير المعلمة إلى map الطريقة ، سيتم استخدامها على أنهاthis قيمة متىcallback يسمى. وإلا فإن this ستكون القيمةundefined. في النهاية ، قيمةthis كما رأينا من callback يتم تحديد الوظيفة وفقًا للقواعد المعتادة للتعريف this كما رأينا من وظيفة.

لا يعدل التابع "map" المصفوفة التي تم استدعاؤها (على الرغم من أن الوظيفة ⚙️ يمكنها القيام بذلك!).

نطاق العناصر التي تتم معالجتها بواسطة ملفmap تم تعيين الطريقة قبل المكالمة الأولى إلىcallback وظيفة. تمت إضافة العناصر إلى المصفوفة بعد بداية ملفmap الطريقة لن يتم زيارتها من قبل callback وظيفة. إذا تم تعديل العناصر الموجودة في المصفوفة بواسطةcallback function, their values ​​passed to the function will be the values ​​at the time when the map طريقة زياراتهم. العناصر المحذوفة لن تتم زيارتها.

أمثلة:

مثال بسيط

لديك مصفوفة تحتوي على العديد من العناصر ، كل منها يمثل شخصًا مختلفًا. يمكن أن يكون هناك الكثير من البيانات هنا: الاسم والعمر ولون الشعر والشخصية المفضلة من السينما ، ولكن في الوقت الحالي كل هذا غير مطلوب - ما عليك سوى الحصول على مجموعة من أرقام جوازات السفر لهؤلاء الأشخاص لمنحهم جميع تصاريح المؤتمر.

محرر مباشر

function learnJavaScript() { const friends = [ { passport: '03005988', name: 'Joseph Francis Tribbiani Jr', age: 32, sex: 'm' }, { passport: '03005989', name: 'Chandler Muriel Bing', age: 33, sex: 'm' }, { passport: '03005990', name: 'Ross Eustace Geller', age: 33, sex: 'm' }, { passport: '03005991', name: 'Rachel Karen Green', age: 31, sex: 'f' }, { passport: '03005992', name: 'Monica Geller', age: 31, sex: 'f' }, { passport: '03005993', name: 'Phoebe Buffay', age: 34, sex: 'f' } ] let passports = friends.map(friend => friend.passport + ' ') return passports }

function learnJavaScript() {
  const friends = [
    { passport: '03005988', name: 'Joseph Francis Tribbiani Jr', age: 32, sex: 'm' },
    { passport: '03005989', name: 'Chandler Muriel Bing', age: 33, sex: 'm' },
    { passport: '03005990', name: 'Ross Eustace Geller', age: 33, sex: 'm' },
    { passport: '03005991', name: 'Rachel Karen Green', age: 31, sex: 'f' },
    { passport: '03005992', name: 'Monica Geller', age: 31, sex: 'f' },
    { passport: '03005993', name: 'Phoebe Buffay', age: 34, sex: 'f' }
  ]
  let passports = friends.map(friend => friend.passport + ' ')
  return passports
}

النتيجة

Loading...

في بعض الحالات ، قد تحتاج إلى عرض مصفوفة من الكائنات ذات المفاتيح المحددة كسلسلة:

محرر مباشر

function learnJavaScript() { const users = [ { id: 11, name: 'Adam', age: 23, group: 'editor' }, { id: 47, name: 'John', age: 28, group: 'admin' }, { id: 85, name: 'William', age: 34, group: 'editor' }, { id: 97, name: 'Oliver', age: 28, group: 'admin' } ] let result = users.map(({ id, age, group }) => `\n${id} ${age} ${group}`).join('') return result }

function learnJavaScript() {
  const users = [
    { id: 11, name: 'Adam', age: 23, group: 'editor' },
    { id: 47, name: 'John', age: 28, group: 'admin' },
    { id: 85, name: 'William', age: 34, group: 'editor' },
    { id: 97, name: 'Oliver', age: 28, group: 'admin' }
  ]

  let result = users.map(({ id, age, group }) => `\n${id} ${age} ${group}`).join('')

  return result
}

النتيجة

Loading...

إنشاء مصفوفة قيم فهرنهايت من مصفوفة قيم مئوية:

مثال لمعالجة كل عنصر من عناصر المصفوفة باستخدام صيغة معينة:

محرر مباشر

function learnJavaScript() { let celsius = [-15, -5, 0, 10, 16, 20, 24, 32] let fahrenheit = celsius.map(t => t * 1.8 + 32 + ' ') return fahrenheit }

function learnJavaScript() {
  let celsius = [-15, -5, 0, 10, 16, 20, 24, 32]

  let fahrenheit = celsius.map(t => t * 1.8 + 32 + ' ')

  return fahrenheit
}

النتيجة

Loading...

عرض مصفوفة من الأرقام باستخدام دالة تأخذ وسيطة:

محرر مباشر

function learnJavaScript() { const numbers = [1, 4, 9] const doubles = numbers.map(num => num * 2 + ' ') return doubles }

function learnJavaScript() {
  const numbers = [1, 4, 9]

  const doubles = numbers.map(num => num * 2 + ' ')

  return doubles
}

النتيجة

Loading...

منقي

الfilter () طريقة تخلق مصفوفة جديدة تحتوي على جميع العناصر التي اجتازت الاختبار المحدد في الوظيفة التي تم تمريرها.

دائمًا ما تكون نتيجة المرشح مصفوفة. إذا تم إرجاع دالة لعنصر ما true (أو أي قيمة "حقيقية") ، يتم تضمين هذا العنصر في النتيجة ، وإلا فلن يتم تضمينه.

بناء الجملة

let newArray = arr.filter(function callback(element[, index, [array]])[, thisArg])

وصف

الfilter() طريقة استدعاء تمرير callback تعمل مرة واحدة لكل عنصر موجود في المصفوفة وتقوم ببناء مصفوفة جديدة مع جميع القيم التي من أجلها callback عادت الوظيفةtrueأو القيمة التي تصبحtrue عند الإرسال إلىboolean. الcallback يتم استدعاء الوظيفة فقط لمؤشرات المصفوفة التي تم تعيين قيم لها ؛ لا يتم استدعاؤه للفهارس التي تم إسقاطها أو التي لم يتم تعيين قيم لها مطلقًا. يتم ببساطة تخطي عناصر المصفوفة التي لم يتم التحقق منها بواسطة دالة "رد الاتصال" ولا يتم تضمينها في ملف مجموعة جديدة.

الوظيفة⚙️ callback يسمى بثلاث حجج:

• قيمة العنصر ؛
• مؤشر العنصر ؛
• المصفوفة التي يتم المرور من خلالها.

إذا كانthisArg تم تمرير المعلمة إلىfilter() الطريقة ، سيتم استخدامها على أنها this الطريقة ، سيتم استخدامها على أنهاthis ستكون القيمةundefined. في النهاية ، قيمةthis كما يُرى من دالة يتم تحديدها وفقًا للقواعد المعتادة للتعريفthis كما رأينا من وظيفة⚙️.

إن "filter()` الطريقة لا تعدل المصفوفة التي تم استدعاؤها.

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

مثال

تصفية جميع القيم الصغيرة

يستخدم المثال التالي filter() لإنشاء مصفوفة تمت تصفيتها تحتوي على جميع العناصر أكبر من أو تساويvalue، وجميع العناصر الأقل منvalue إزالة.

محرر مباشر

function learnJavaScript() { const isBigEnough = value => value >= 10 let filtered = [12, 5, 8, 130, 44].filter(isBigEnough) + ' ' return filtered }

function learnJavaScript() {
  const isBigEnough = value => value >= 10

  let filtered = [12, 5, 8, 130, 44].filter(isBigEnough) + ' '

  return filtered
}

النتيجة

Loading...

يقلل

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

لا يُقصد بتقليل تعديل عناصر مجموعة مثل الخريطة. مهمتها هي حساب "مجموع" جميع العناصر بطريقة أو بأخرى ، وإعادتها.

يمكن أن تكون القيمة الناتجة أي شيء: رقم ، سلسلة ، كائن ، مصفوفة - كل هذا يتوقف على المشكلة التي يحلها مطور JavaScript.

تأخذ طريقة التخفيض معلمتين:

-وظيفة ، مثلmap, والتي سيتم استدعاؤها بالتسلسل لكل عنصر من عناصر المجموعة ؛ هي القيمة الأولية للمجمع.

تحتوي الوظيفة أيضًا على وسيطتين:

• الأول هو القيمة المتراكمة (المجمع) ؛
• عنصر المصفوفة مباشرة.

بناء الجملة

array.reduce(function callback[, initialValue])

وصف

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

في المرة الأولى التي يتم فيها استدعاء الوظيفة ، يمكن أن تأخذ معلمات المُراكم والقيمة الحالية إحدى القيمتين. إذا كانinitialValue يتم تمرير الوسيطة في الاستدعاء لتقليل () ، ثم قيمة accumulator ستكون مساوية لقيمة "initialValue" وقيمة currentValue ستكون مساوية للقيمة الأولى في المصفوفة. إذا لم يتم تحديد قيمة initialValue ، فسيكون المجمع مساويًا للقيمة الأولى في المصفوفة ، وستكون القيمة الحالية مساوية للقيمة الثانية في المصفوفة.

إذا كانت المصفوفة فارغة ولا initialValue حجة محددة ، أTypeError سيتم طرح استثناء. إذا كانت المصفوفة تتكون من عنصر واحد فقط (بغض النظر عن موقعه في المصفوفة) و initialValue لم يتم تحديد الحجة ، أو إذا كانinitialValue تم تحديد الوسيطة ، لكن المصفوفة فارغة ، سيتم إرجاع هذه القيمة دون استدعاء الوظيفة⚙️ callback ...

القيمة الأولية للبطارية

دعنا نحسب القيمة الأولية. في المثال يساوي0, لأننا نحسب القيمة العددية - مجموع الأعمار. بدلاً من الصفر ، يمكن أن يكون هناك أي رقم / سلسلة أخرى (فارغة أو لا) / كائن / مصفوفة - مهما كانت القيمة التي تبدأ في التراكم منها. على سبيل المثال ، دعنا نجمع أسماء جميع الأصدقاء في سطر واحد :

محرر مباشر

function learnJavaScript() { const friends = [ { passport: '03005988', name: 'Joseph Francis Tribbiani Jr', age: 32, sex: 'm' }, { passport: '03005989', name: 'Chandler Muriel Bing', age: 33, sex: 'm' }, { passport: '03005990', name: 'Ross Eustace Geller', age: 33, sex: 'm' }, { passport: '03005991', name: 'Rachel Karen Green', age: 31, sex: 'f' }, { passport: '03005992', name: 'Monica Geller', age: 31, sex: 'f' }, { passport: '03005993', name: 'Phoebe Buffay', age: 34, sex: 'f' } ] const names = friends.reduce((accumulator, friend) => `${accumulator} ${friend.name}, `, 'Friends: ') return names }

function learnJavaScript() {
  const friends = [
    { passport: '03005988', name: 'Joseph Francis Tribbiani Jr', age: 32, sex: 'm' },
    { passport: '03005989', name: 'Chandler Muriel Bing', age: 33, sex: 'm' },
    { passport: '03005990', name: 'Ross Eustace Geller', age: 33, sex: 'm' },
    { passport: '03005991', name: 'Rachel Karen Green', age: 31, sex: 'f' },
    { passport: '03005992', name: 'Monica Geller', age: 31, sex: 'f' },
    { passport: '03005993', name: 'Phoebe Buffay', age: 34, sex: 'f' }
  ]

  const names = friends.reduce((accumulator, friend) => `${accumulator} ${friend.name}, `, 'Friends: ')

  return names
}

النتيجة

Loading...

هنا ، كانت القيمة الأولية هي السلسلة " Friends: ", التي أضيفت إليها أسماء جميع الأصدقاء تدريجياً.

إذا لم تحدد القيمة الأصلية بشكل صريح ، فإن الأول 1️⃣ يصبح عنصر المصفوفة ضمنيًا. في هذه الحالة ، لم يعد يتم استدعاء الوظيفة الخاصة بها.

مثال

جمع كل القيم في المصفوفة:

محرر مباشر

function learnJavaScript() { const initialValue = 0 const sum = [1, 2, 3].reduce((accumulator, currentValue) => { return accumulator + currentValue }, initialValue) return sum }

function learnJavaScript() {
  const initialValue = 0

  const sum = [1, 2, 3].reduce((accumulator, currentValue) => {
    return accumulator + currentValue
  }, initialValue)

  return sum
}

النتيجة

Loading...

ونفس الشيء في سطر واحد من التعليمات البرمجية:

محرر مباشر

function learnJavaScript() { const sum = [1, 2, 3].reduce((x, y) => x + y) return sum }

function learnJavaScript() {
  const sum = [1, 2, 3].reduce((x, y) => x + y)

  return sum
}

النتيجة

Loading...

تسلسل

تدعم برمجة JavaScript ملفات chaining نمط - الجمع بين وظائف متعددة في سلسلة واحدة مع الإرسال المتسلسل للنتيجة.

يتم استدعاء جميع التوابع الثلاثة التي تم تحليلها في سياق مصفوفة ، ويعيد اثنان منها 2️⃣ أيضًا مصفوفة. وبالتالي ، من السهل جدًا الجمع بينهما.

على سبيل المثال ، لنحسب العمر الإجمالي لجميع الأولاد :

محرر مباشر

function learnJavaScript() { const friends = [ { passport: '03005988', name: 'Joseph Francis Tribbiani Jr', age: 32, sex: 'm' }, { passport: '03005989', name: 'Chandler Muriel Bing', age: 33, sex: 'm' }, { passport: '03005990', name: 'Ross Eustace Geller', age: 33, sex: 'm' }, { passport: '03005991', name: 'Rachel Karen Green', age: 31, sex: 'f' }, { passport: '03005992', name: 'Monica Geller', age: 31, sex: 'f' }, { passport: '03005993', name: 'Phoebe Buffay', age: 34, sex: 'f' } ] let totalBoysYears = friends .filter(friend => friend.sex === 'm') .reduce((accumulator, friend) => accumulator + friend.age, 0) return totalBoysYears }

function learnJavaScript() {
  const friends = [
    { passport: '03005988', name: 'Joseph Francis Tribbiani Jr', age: 32, sex: 'm' },
    { passport: '03005989', name: 'Chandler Muriel Bing', age: 33, sex: 'm' },
    { passport: '03005990', name: 'Ross Eustace Geller', age: 33, sex: 'm' },
    { passport: '03005991', name: 'Rachel Karen Green', age: 31, sex: 'f' },
    { passport: '03005992', name: 'Monica Geller', age: 31, sex: 'f' },
    { passport: '03005993', name: 'Phoebe Buffay', age: 34, sex: 'f' }
  ]
  let totalBoysYears = friends
    .filter(friend => friend.sex === 'm')
    .reduce((accumulator, friend) => accumulator + friend.age, 0)
  return totalBoysYears
}

النتيجة

Loading...

أو يمكننا جمع أرقام جوازات سفر الفتيات لشراء تذاكر طيران إلى لاس فيغاس :

محرر مباشر

function learnJavaScript() { const friends = [ { passport: '03005988', name: 'Joseph Francis Tribbiani Jr', age: 32, sex: 'm' }, { passport: '03005989', name: 'Chandler Muriel Bing', age: 33, sex: 'm' }, { passport: '03005990', name: 'Ross Eustace Geller', age: 33, sex: 'm' }, { passport: '03005991', name: 'Rachel Karen Green', age: 31, sex: 'f' }, { passport: '03005992', name: 'Monica Geller', age: 31, sex: 'f' }, { passport: '03005993', name: 'Phoebe Buffay', age: 34, sex: 'f' } ] let girlsPassports = friends.filter(friend => friend.sex === 'f').map(friend => friend.passport) + ' ' return girlsPassports }

function learnJavaScript() {
  const friends = [
    { passport: '03005988', name: 'Joseph Francis Tribbiani Jr', age: 32, sex: 'm' },
    { passport: '03005989', name: 'Chandler Muriel Bing', age: 33, sex: 'm' },
    { passport: '03005990', name: 'Ross Eustace Geller', age: 33, sex: 'm' },
    { passport: '03005991', name: 'Rachel Karen Green', age: 31, sex: 'f' },
    { passport: '03005992', name: 'Monica Geller', age: 31, sex: 'f' },
    { passport: '03005993', name: 'Phoebe Buffay', age: 34, sex: 'f' }
  ]
  let girlsPassports = friends.filter(friend => friend.sex === 'f').map(friend => friend.passport) + ' '
  return girlsPassports
}

النتيجة

Loading...

استنتاج

مع هذه الميزات الرائعة⚙️ الكود يصبح أسهل للقراءة. لذلك ، فيما يلي قائمة بالمقالات التي تتناول المزيد من التفاصيل حول هذا الموضوع.

مشاكل؟

Write to Discord chat.

مشاكل؟

دالة يجب استدعاؤها لكل عنصر من عناصر المصفوفة؟

1. currentValue
2. array
3. callback

طريقة تنشئ مصفوفة جديدة بنتيجة استدعاء الوظيفة المحددة لكل عنصر من عناصر المصفوفة:

1. map
2. filter
3. reduce

يمكن أن تكون القيمة الناتجة لطريقة التخفيض:

1. رقم
2. صفيف
3. أي شيء

يتم جمع كل القيم في المصفوفة بالطريقة التالية:

1. map
2. filter
3. reduce

يتم استخدام المعلمة الاختيارية أو القيمة كملف this عند استدعاء callback وظيفة:

1. array
2. index
3. thisArg

طريقة تنشئ مصفوفة جديدة بكل العناصر التي اجتازت التحقق المحدد في الدالة التي تم تمريرها:

1. map
2. filter
3. reduce

الجمع بين عدة وظائف في سلسلة واحدة مع النقل المتسلسل للنتيجة:

1. الوحدة
2. التسلسل
3. الاندماج

لفهم مقدار ما تعلمته في هذا الدرس ، قم بإجراء الاختبار فيmobile application من مدرستنا في هذا الموضوع.

الروابط

1. Simplify your JavaScript - use map, reduce and filter
2. 15 useful javascript examples of map, reduce and filter
3. Array.prototype.map()
4. Array.prototype.filter()
5. Array.prototype.reduce()

المساهمون✨

الشكر يعود إلى هؤلاء الأشخاص الرائعين (emoji key):

AlisaNasibullina

Dmitriy Vasilev 💵

Resoner2005 🐛 🎨 🖋

Navernoss 🖋 🐛 🎨