عرض مصدر JavaScript/for...of

<noinclude>{{DISPLAYTITLE:<code>for...of</code> في JavaScript}}</noinclude>
التعبير البرمجي <code>for...of</code> يمر على الكائنات التي يمكن الدوران على عناصرها ([[JavaScript/Iteration Protocols|iterable objects]]) بما في ذلك الكائن <code>[[JavaScript/Array|Array]]</code> و <code>[[JavaScript/Map|Map]]</code> و <code>[[JavaScript/Set|Set]]</code> و <code>[[JavaScript/String|String]]</code> و <code>[[JavaScript/TypedArray|TypedArray]]</code> و <code>[[JavaScript/Arguments|Arguments]]</code>، وتنفيذ تعابير برمجية معيّنة على قيمة كل خاصية من خاصيات تلك الكائنات.
==البنية العامة==
<syntaxhighlight lang="javascript">
for (variable of iterable) {
  statement
}
</syntaxhighlight>

=== <code>variable</code> ===
ستُنسَد قيمة الخاصية مختلفة لهذا المتغير في كل دورة.

=== <code>iterable</code> ===
خاصيات الكائن القابلة للدوران (iterable properties).

== الوصف ==

=== الفرق بين حلقتَي التكرار <code>for...of</code> و <code>[[JavaScript/for...in|for...in]]</code> ===
التعبيران البرمجيان <code>[[JavaScript/for...in|for...in]]</code> و <code>for...of</code> يُستخدَمان للدوران على شيءٍ ما، لكن الاختلاف الرئيسي بينهما هو ما هي الأشياء التي تدور حلقة التكرار عليها.

فالتعبير <code>[[JavaScript/for...in|for...in]]</code> يدور على الخاصيات الكائن القابلة للإحصاء ([[JavaScript/Enumerability|enumerable properties]]) بترتيب إدخالها الأصلي.

أما التعبير <code>for...of</code> فسيدور على البيانات التي يُعرِّفها كائن <code>iterable</code> على أنها قابلة للدوران.

هذا المثال يوضِّح الفرق بين استخدام حلقة <code>for...of</code> و <code>[[JavaScript/for...in|for...in]]</code> عند استخدامهما على كائن <code>[[JavaScript/Array|Array]]</code>:<syntaxhighlight lang="javascript">
Object.prototype.objCustom = function() {}; 
Array.prototype.arrCustom = function() {};

let iterable = [3, 5, 7];
iterable.foo = 'hello';

for (let i in iterable) {
  console.log(i); // 0, 1, 2, "foo", "arrCustom", "objCustom"
}

for (let i in iterable) {
  if (iterable.hasOwnProperty(i)) {
    console.log(i); // 0, 1, 2, "foo"
  }
}

for (let i of iterable) {
  console.log(i); // 3, 5, 7
}

</syntaxhighlight>سنُجزِّئ المثال السابق إلى أقسام ليسهل فهمها:<syntaxhighlight lang="javascript">
Object.prototype.objCustom = function() {};
Array.prototype.arrCustom = function() {}; 

let iterable = [3, 5, 7]; 
iterable.foo = 'hello';
</syntaxhighlight>سيرث كل كائن الخاصية <code>objCustom</code> وكل كائن <code>[[JavaScript/Array|Array]]</code> سيرث الخاصية <code>arrCustom</code> وذلك بسبب إضافة تلك الخاصيات إلى <code>[[JavaScript/Object/prototype|Object.prototype]]</code> و <code>[[JavaScript/Array/prototype|Array.prototype]]</code>؛ وبالتالي سيرثها الكائن <code>iterable</code>.<syntaxhighlight lang="javascript">
for (let i in iterable) {
  console.log(i); // 0, 1, 2, "foo", "arrCustom", "objCustom" 
}
</syntaxhighlight>حلقة التكرار السابقة ستعرض الخاصيات القابلة للإحصاء ([[JavaScript/Enumerability|enumerable properties]]) بترتيب إضافتها الأصلي، ولن تؤدي إلى إظهار عناصر المصفوفة <code>3</code> أو <code>5</code> أو <code>7</code> أو <code>hello</code> لأنها لا تُعدّ خاصياتٍ قابلةً للإحصاء؛ لكنها ستعرض فهارس المصفوفة والخاصية <code>arrCustom</code> و <code>objCustom</code>، لمزيدٍ من المعلومات راجع صفحة <code>[[JavaScript/for...in|for...in]]</code>.<syntaxhighlight lang="javascript">
for (let i in iterable) {
  if (iterable.hasOwnProperty(i)) {
    console.log(i); // 0, 1, 2, "foo"
  }
}
</syntaxhighlight>حلقة التكرار السابقة تشبه أوّل حلقة تكرار، لكنها تستخدم الدالة <code>[[JavaScript/Object/hasOwnProperty|hasOwnProperty()‎]]</code> للتأكد إذا كانت الخاصية تابعةً للكائن مباشرةً وليست خاصيةً موروثةً؛ لذا ستُعرَض الخاصيات <code>0</code> و <code>1</code> و <code>2</code> و <code>foo</code> لأنها تابعة مباشرةً للكائن، ولن تُعرَض الخاصيات <code>arrCustom</code> و <code>objCustom</code> لأنها موروثة.<syntaxhighlight lang="javascript">
for (let i of iterable) {
  console.log(i); // 3, 5, 7 
}
</syntaxhighlight>حلقة التكرار السابقة تمر وتعرض القيم التي يُعرِّف كائن <code>iterable</code> أنه يمكن المرور عليها، وهي عناصر المصفوفة <code>3</code> و <code>5</code> و <code>7</code> ولن تُعرَض خاصيات الكائن قط.

=== إنهاء التكرارات ===
يمكن إنهاء عملية الدوران في حلقات <code>for...of</code> باستخدام التعابير البرمجية <code>[[JavaScript/break|break]]</code> أو <code>[[JavaScript/continue|continue]]</code> أو <code>[[JavaScript/throw|throw]]</code> أو <code>[[JavaScript/return|return]]</code>:<syntaxhighlight lang="javascript">
function* foo(){ 
  yield 1; 
  yield 2; 
  yield 3; 
}; 

for (let o of foo()) { 
  console.log(o); 
  break; // إغلاق التكرار
}
</syntaxhighlight>

== أمثلة ==

=== المرور على <code>[[JavaScript/Array|Array]]</code> ===
<syntaxhighlight lang="javascript">
let iterable = [10, 20, 30];

for (let value of iterable) {
  value += 1;
  console.log(value);
}
// 11
// 21
// 31
</syntaxhighlight>يمكنك أيضًا استخدام <code>[[JavaScript/const|const]]</code> بدلًا من <code>[[JavaScript/let|let]]</code>، لكن حينئذٍ لن تتمكن من إعادة إسناد قيمة للمتغير داخل الكتلة:<syntaxhighlight lang="javascript">
let iterable = [10, 20, 30];

for (const value of iterable) {
  console.log(value);
}
// 10
// 20
// 30
</syntaxhighlight>

=== المرور على <code>[[JavaScript/String|String]]</code> ===
<syntaxhighlight lang="javascript">
let iterable = 'boo';

for (let value of iterable) {
  console.log(value);
}
// "b"
// "o"
// "o"
</syntaxhighlight>

=== المرور على <code>[[JavaScript/TypedArray|TypedArray]]</code> ===
<syntaxhighlight lang="javascript">
let iterable = new Uint8Array([0x00, 0xff]);

for (let value of iterable) {
  console.log(value);
}
// 0
// 255

</syntaxhighlight>

=== المرور على <code>[[JavaScript/Map|Map]]</code> ===
<syntaxhighlight lang="javascript">
let iterable = new Map([['a', 1], ['b', 2], ['c', 3]]);

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

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

</syntaxhighlight>

=== المرور على <code>[[JavaScript/Set|Set]]</code> ===
<syntaxhighlight lang="javascript">
let iterable = new Set([1, 1, 2, 2, 3, 3]);

for (let value of iterable) {
  console.log(value);
}
// 1
// 2
// 3

</syntaxhighlight>

=== المرور على كائن <code>[[JavaScript/Arguments|Arguments]]</code> ===
<syntaxhighlight lang="javascript">
(function() {
  for (let argument of arguments) {
    console.log(argument);
  }
})(1, 2, 3);

// 1
// 2
// 3
</syntaxhighlight>

=== المرور على قائمة عقد في DOM ===
يمكن المرور على قائمة عقد في DOM مثل <code>NodeList</code>، فالمثال الآتي يُضيف الصنف <code>read</code> إلى الفقرات <code>[[HTML/p|<nowiki><p></nowiki>]]</code> التي تكون أبناءً مباشرين للعنصر <code>[[HTML/article|<article>]]</code>:<syntaxhighlight lang="javascript">
let articleParagraphs = document.querySelectorAll('article > p');

for (let paragraph of articleParagraphs) {
  paragraph.classList.add('read');
}

</syntaxhighlight>

=== المرور على المولِّدات ===
<syntaxhighlight lang="javascript">
function* fibonacci() { // دالة مولِّدة
  let [prev, curr] = [0, 1];
  while (true) {
    [prev, curr] = [curr, prev + curr];
    yield curr;
  }
}

for (let n of fibonacci()) {
  console.log(n);
  // إيقاف السلسلة عند العدد 1000
  if (n >= 1000) {
    break;
  }
}

</syntaxhighlight>

=== المرور على الكائنات التي تُطبِّق بروتوكول [[JavaScript/Iteration Protocols|iterable]] ===
يمكن أيضًا استخدام حلقة التكرار <code>for...of</code> للمرور على الكائنات التي تُطبِّق بروتوكول [[JavaScript/Iteration Protocols|iterable]] صراحةً:<syntaxhighlight lang="javascript">
var iterable = {
  [Symbol.iterator]() {
    return {
      i: 0,
      next() {
        if (this.i < 3) {
          return { value: this.i++, done: false };
        }
        return { value: undefined, done: true };
      }
    };
  }
};

for (var value of iterable) {
  console.log(value);
}
// 0
// 1
// 2
</syntaxhighlight>

== دعم المتصفحات ==
{| class="wikitable"
!الميزة
!|Chrome
!Firefox
!Internet Explorer
!Opera
!Safari
|-
! الدعم الأساسي
|38
|13
|غير مدعومة
|25
|8
|-
!إغلاق التكرارات
|51
|53
|غير مدعومة
|مدعومة
|مدعومة
|}

== مصادر ومواصفات ==
* مسودة المعيار [https://tc39.github.io/ecma262/#sec-for-in-and-for-of-statements ECMAScript Latest Draft].
* معيار [http://www.ecma-international.org/ecma-262/6.0/#sec-for-in-and-for-of-statements ECMAScript 2015 (6th Edition)]‎. 
[[تصنيف:JavaScript|{{SUBPAGENAME}}]]
[[تصنيف:JavaScript Statement|{{SUBPAGENAME}}]]