انتقل إلى محتوى الدرس
ابدأ رحلتك
الدرس 34
دورة جافا سكريبت

JS for OF

سنتعلم في هذا الدرس ال  for of Loop Syntax  وكيفية استخدامها ولماذا تستخدم

ابدأ التعلّم استكشف الأمثلة
أقسام الدرس
6
الأمثلة
5
اللغة
العربية
تاريخ النشر
غير محدد
المشاهدات
3,386
محتوى الدرس
في هذا الدرس 6تصفّح المواضيع

JS for OF

 for ... of هي عبارة عن حلقة متكررة تستخدم في المرور علي الكائنات القابلة للتكرار ، بما في ذلك: string، و Array ،

تمكنك من عمل loop علي البيانات المتكررة iterable data structures مثل ال arrays وال strings وال Maps وال NodeLists

يتم تمرير قيميتين داخل ال for of :

  • ال variable هو الذي تخزن بداخلة كل عنصر Element من عناصر المصفوفة Array في كل عملية تكرار ويمكن استخدام var او let او const
  •  ال iterable وهو ال Array الزي يحتوي علي مجموعة عناصر

Syntax

HTML 
for (variable of iterable) {
  /* code block to be executed */
}

Array Loop

استخدام ال for of loop مع ال array

HTML 
<!DOCTYPE html>
<html>
<body>

<h2>JavaScript For/Of Loop</h2>

<p>The for/of statement loops through the values of an iterable object.</p>

<p id="test"></p>

<script>
let cars = ["BMW", "Volvo", "Mini"];
let text = "";

for (let x of cars) {
  text += x + "<br>";
}

document.getElementById("test").innerHTML = text;
</script>

</body>
</html>
جرّب بنفسك

string loop

يمكن استخدام ال for of loop مع ال string نصوص لتقوم بالمرور علي احرف نص معين كما في المثال التالي 

HTML 
let language = "JavaScript";
let text = "";

for (let x of language) {
  text += x + "<br>";
جرّب بنفسك

Iterating over a Map

يمكننا ايضا استخدام ال for of loop مع ال Map لتقوم بالمرور علي جميع عناصرها وأجراء شئ معين عليها ويمكنها

  • طباعتها
  • او طباعة القيم "values" الخاصة بالعناصر  فقط
  • أو طباعة ال keys الخاصة بالعناصر فقط 
HTML 
const iterable = new Map([['a', 1], ['b', 2], ['c', 3]]);

for (const entry of iterable) {
  console.log(entry);
}
/* out put */
/* ['a', 1] */
/* ['b', 2] */
/*  ['c', 3] */

for (const [key, value] of iterable) {
  console.log(value);
}
/* out put */
/* 1 */
/*  2 */
/* 3  */

Iterating over a Set

يمكننا استخدام ال for of في المرور علي العناصر الخاصة بال set 

Example

HTML 
const iterable = new Set([1, 1, 2, 2, 3, 3]);

for (const value of iterable) {
  console.log(value);
}
/* out put */
/* 1 */
/* 2 */
/* 3 */

Difference between for...of and for...in

كل من for in و for of هما عبارة عن حلقات تكرارية تستخدم في المرور علي مجموعة من العناصر والفرق الفاصل بينهم هو نوع العنصر الذي يقومون بالمرور عليه 

  • تستخدم ال for  of في المرور علي العناصر الرقمية enumerable 
  • تستخدم ال for in في المرور علي أي قيم تكون قابلة للمرور عليها مثل (array او Map )

مشاركة

هل كان هذا الدرس مفيدًا؟

جارٍ تحميل الآراء…