لكل واحد على مجموعة في جافا سكريبت؟

تحرير : هذه الإجابة قديمة بشكل ميؤوس منه. للحصول على منهج أكثر حداثة ، انظر الأساليب المتاحة في مجموعة . قد تكون طرق الاهتمام:

• forEach
• خريطة
• منقي
• الرمز البريدي
• خفض
• كل
• بعض

الطريقة القياسية لتكرار صفيف في JavaScript هي Vanilla for- loop:

var length = arr.length,
    element = null;
for (var i = 0; i < length; i++) {
  element = arr[i];
  // Do something with element
}

لاحظ ، مع ذلك ، أن هذا النهج جيد فقط إذا كان لديك صفيف كثيف ، ويشغل كل فهرس عنصرًا. إذا كانت المصفوفة متناثرة ، فيمكنك مواجهة مشاكل في الأداء مع هذه الطريقة ، حيث أنك ستكررها عبر الكثير من المؤشرات التي لا توجد {حقا في المصفوفة. في هذه الحالة ، قد تكون حلقة for .. in- فكرة أفضل. ومع ذلك ، يجب عليك استخدام الإجراءات الوقائية المناسبة للتأكد من أن الخصائص المطلوبة للصفيف فقط (أي عناصر الصفيف) يتم التعامل معها ، نظرًا لأن حلقة for..in- سيتم تعدادها أيضًا في المتصفحات القديمة ، أو إذا تم تعريف الخصائص الإضافية على أنها enumerable.

في ECMAScript 5 سيكون هناك طريقة لكل منها على النموذج الأولي للصفيف ، لكنها غير مدعومة في المتصفحات القديمة. حتى تتمكن من استخدامها باستمرار ، يجب أن يكون لديك إما بيئة تدعمها (على سبيل المثال ، Node.js لجافا سكريبت من جانب الخادم) ، أو استخدام "Polyfill". ومع ذلك ، فإن Polyfill لهذه الوظيفة تافهة ولأنه يسهل قراءة الكود ، فإنه يعد polyfill جيدًا لتضمينه.

إذا كنت تستخدم jQuery المكتبة ، يمكنك استخدام jQuery.each :

$.each(yourArray, function(index, value) {
  // do your stuff here
});

تحرير:

حسب السؤال ، يريد المستخدم شفرة javascript بدلاً من jquery بحيث يكون التعديل

var length = yourArray.length;   
for (var i = 0; i < length; i++) {
  // Do something with yourArray[i].
}

تستخدم بعض C - النمط foreach للتكرار خلال التعدادات. في JavaScript ، يتم ذلك باستخدام بنية حلقة for..in :

var index,
    value;
for (index in obj) {
    value = obj[index];
}

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

for (i in obj) {
    if (obj.hasOwnProperty(i)) {
        //do stuff
    }
}

بالإضافة إلى ذلك ، ECMAScript 5 أضاف forEach طريقة إلى Array.prototype والتي يمكن استخدامها للتعداد على صفيف باستخدام calback (يكون polyfill في المستندات بحيث لا يزال بإمكانك استخدامه للمتصفحات القديمة):

arr.forEach(function (val, index, theArray) {
    //do stuff
});

من المهم ملاحظة أن Array.prototype.forEach لا ينقطع عند إرجاع رد الاتصال false. jQuery و Underscore.js توفير الاختلافات الخاصة بهم على each لتوفير حلقات يمكن أن تكون قصيرة الدائرة.

إذا كنت ترغب في تنفيذ حلقة فوق صفيف ، فاستخدم حلقة for ثلاثية الأجزاء.

for (var i = 0; i < myArray.length; i++) {
    var arrayItem = myArray[i];
}

يمكنك الحصول على بعض تحسينات الأداء عن طريق التخزين المؤقت myArray.length أو التكرار فوقه.

إذا كنت لا تمانع في إفراغ الصفيف:

var x;

while(x = y.pop()){ 

    alert(x); //do something 

}

سيحتوي x على القيمة الأخيرة لـ y وسيتم إزالته من الصفيف. يمكنك أيضًا استخدام shift() والتي ستوفر وتزيل العنصر الأول من y.

A forEach implementation ( انظر في jsFiddle ):

function forEach(list,callback) {
  var length = list.length;
  for (var n = 0; n < length; n++) {
    callback.call(list[n]);
  }
}

var myArray = ['hello','world'];

forEach(
  myArray,
  function(){
    alert(this); // do something
  }
);

الحل السهل الآن هو استخدام underscore.js library . إنه يوفر العديد من الأدوات المفيدة ، مثل each وسيقوم بتفويض المهمة تلقائيًا إلى forEach الأصلي إذا كان ذلك متاحًا.

مثال CodePen كيف يعمل:

var arr = ["elemA", "elemB", "elemC"];
_.each(arr, function(elem, index, ar)
{
...
});

أنظر أيضا

• وثائق Array.prototype.forEach() .
• فيfor_each ... in(MDN) ، يتم توضيح أنه تم إهمال for each (variable in object) كجزء من معيار ECMA-357 ( EAX ).
• for ... of (MDN) يصف الطريقة التالية للتكرار باستخدام for (variable of object) كجزء من اقتراح Harmony (ECMAScript 6).

هناك ثلاثة تطبيقات لـ foreach في jQuery على النحو التالي.

var a = [3,2];

$(a).each(function(){console.log(this.valueOf())}); //Method 1
$.each(a, function(){console.log(this.valueOf())}); //Method 2
$.each($(a), function(){console.log(this.valueOf())}); //Method 3

اعتبارًا من ES6:

list = [0, 1, 2, 3]
for (let obj of list) {
    console.log(obj)
}

حيث يتجنب of الشذوذات المرتبطة بـ in ويجعله يعمل مثل حلقة for لأي لغة أخرى ، ويرتبط leti داخل الحلقة بخلاف داخل الوظيفة.

يمكن حذف الأقواس ({}) عندما يكون هناك أمر واحد فقط (على سبيل المثال في المثال أعلاه).

ربما حلقة for(i = 0; i < array.length; i++) ليست هي الخيار الأفضل. لماذا ا؟ إذا كان لديك هذا:

var array = new Array();
array[1] = "Hello";
array[7] = "World";
array[11] = "!";

سيتم استدعاء الأسلوب من array[0] إلى array[2]. أولاً ، سيشير هذا أولاً إلى المتغيرات التي لا تملكها ، وثانياً لن يكون لديك المتغيرات في الصفيف ، والثالث سيجعل الكود أكثر جرأة. انظر هنا ، هذا ما أستخدمه:

for(var i in array){
    var el = array[i];
    //If you want 'i' to be INT just put parseInt(i)
    //Do something with el
}

وإذا كنت تريد أن تكون وظيفة ، فيمكنك القيام بذلك:

function foreach(array, call){
    for(var i in array){
        call(array[i]);
    }
}

إذا كنت ترغب في الخروج ، فقل منطقًا:

function foreach(array, call){
    for(var i in array){
        if(call(array[i]) == false){
            break;
        }
    }
}

مثال:

foreach(array, function(el){
    if(el != "!"){
        console.log(el);
    } else {
        console.log(el+"!!");
    }
});

يعود:

//Hello
//World
//!!!

هذا مكرر لقائمة متفرق NON حيث يبدأ الفهرس في 0 ، وهو السيناريو المعتاد عند التعامل مع document.getElementsByTagName أو document.querySelectorAll)

function each( fn, data ) {

    if(typeof fn == 'string')
        eval('fn = function(data, i){' + fn + '}');

    for(var i=0, L=this.length; i < L; i++) 
        fn.call( this[i], data, i );   

    return this;
}

Array.prototype.each = each;  

أمثلة على الاستخدام:

مثال 1

var arr = [];
[1, 2, 3].each( function(a){ a.Push( this * this}, arr);
arr = [1, 4, 9]

مثال # 2

each.call(document.getElementsByTagName('p'), "this.className = data;",'blue');

تحصل كل علامة p على class="blue"

مثال # 3

each.call(document.getElementsByTagName('p'), 
    "if( i % 2 == 0) this.className = data;",
    'red'
);

تحصل كل علامة p أخرى على class="red">

مثال # 4

each.call(document.querySelectorAll('p.blue'), 
    function(newClass, i) {
        if( i < 20 )
            this.className = newClass;
    }, 'green'
);

وأخيرًا ، يتم تغيير أول 20 علامة p باللون الأخضر

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

لا توجد أي حلقة for each في اللغة الأصلية { JavaScript . يمكنك إما استخدام المكتبات للحصول على هذه الوظيفة (أوصي Underscore.js ) ، استخدم for في حلقة بسيطة.

for (var instance in objects) {
   ...
}

ومع ذلك ، لاحظ أنه قد يكون هناك أسباب لاستخدام حلقة for أبسط (انظر Stack Overflow questionلماذا تستخدم "FOR ... IN" مع تكرار الصفيف مثل هذه الفكرة السيئة؟)

var instance;
for (var i=0; i < objects.length; i++) {
    var instance = objects[i];
    ...
}

هناك عدة طرق للتنقل بين صفيف في JavaScript ، على النحو التالي:

for - إنها الأكثر شيوعًا. كتلة كاملة من رمز ل حلقات

var languages = ["Java", "JavaScript", "C#", "Python"];
var i, len, text;
for (i = 0, len = languages.length, text = ""; i < len; i++) {
    text += languages[i] + "<br>";
}
document.getElementById("example").innerHTML = text;

<p id="example"></p>

في حين - حلقة في حين أن الشرط هو من خلال. يبدو أن أسرع حلقة

var text = "";
var i = 0;
while (i < 10) {
    text +=  i + ") something<br>";
    i++;
}
document.getElementById("example").innerHTML = text;

<p id="example"></p>

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

var text = ""
var i = 0;
do {
    text += i + ") something <br>";
    i++;
}
while (i < 10);
document.getElementById("example").innerHTML = text;

<p id="example"></p>

حلقات وظيفية - forEach ، map ، filter ، أيضًا reduce (يتم تشغيلها من خلال الوظيفة ، لكن يتم استخدامها إذا كنت بحاجة إلى القيام بشيء باستخدام الصفيف الخاص بك ، إلخ.

// For example, in this case we loop through the number and double them up using the map function
var numbers = [65, 44, 12, 4];
document.getElementById("example").innerHTML = numbers.map(function(num){return num * 2});

<p id="example"></p>

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

ECMAScript5 (الإصدار على Javascript) للعمل مع المصفوفات.

forEach - يتكرر من خلال كل عنصر في الصفيف ويفعل كل ما تحتاجه مع كل عنصر.

['C', 'D', 'E'].forEach(function(element, index) {
  console.log(element + " is the #" + (index+1) + " in musical scale");
});

// Output
// C is the #1 in musical scale
// D is the #2 in musical scale
// E is the #3 in musical scale

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

map - يقوم بإنشاء صفيف جديد مع نتيجة وظيفة رد الاتصال. هذه الطريقة جيدة لاستخدامها عندما تحتاج إلى تنسيق عناصر الصفيف الخاص بك.

// Let's upper case the items in the array
['bob', 'joe', 'jen'].map(function(elem) {
  return elem.toUpperCase();
});

// Output: ['BOB', 'JOE', 'JEN']

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

[1,2,3,4].reduce(function(previous, current) {
  return previous + current;
});
// Output: 10
// 1st iteration: previous=1, current=2 => result=3
// 2nd iteration: previous=3, current=3 => result=6
// 3rd iteration: previous=6, current=4 => result=10

every - إرجاع صواب أو خطأ في حالة اجتياز كافة العناصر الموجودة في الصفيف للاختبار في وظيفة رد الاتصال.

// Check if everybody has 18 years old of more.
var ages = [30, 43, 18, 5];  
ages.every(function(elem) {  
  return elem >= 18;
});

// Output: false

filter - تشبه إلى حد كبير كل ما عدا هذا المرشح بإرجاع صفيف مع العناصر التي ترجع إلى الدالة المحددة.

// Finding the even numbers
[1,2,3,4,5,6].filter(function(elem){
  return (elem % 2 == 0)
});

// Output: [2,4,6]

اتمني ان يكون ذلك مفيدا.

ليس هناك قدرة يحمل في ثناياه عوامل لاختراق forEach. لمقاطعة التنفيذ ، استخدم Array#some كما يلي:

[1,2,3].some(function(number) {
    return number === 1;
});

يعمل هذا لأن some تُرجع true بمجرد أن يتم تنفيذ عمليات الاستعادة في ترتيب الصفيف ، ويعيد true ، ويقصر تنفيذ الباقي. إجابة أصلية راجع النموذج الأولي للصفيف لـ بعض

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

var foo = [object,object,object];
for (var i = foo.length, item; item = foo[--i];) {
    console.log(item);
}

الايجابيات:

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

سلبيات:

هذا سوف ينقطع كلما كانت الإشارة خاطئة - خطأ (غير محدد ، إلخ). يمكن استخدامه كميزة. ومع ذلك ، فإنه سيجعل من الصعب قليلا القراءة. واعتمادًا على المتصفح ، يمكن تحسين "عدم" العمل بشكل أسرع من المتصفح الأصلي.

طريقة مسج باستخدام $.map:

var data = [1, 2, 3, 4, 5, 6, 7];

var newData = $.map(data, function(element) {
    if (element % 2 == 0) {
        return element;
    }
});

// newData = [2, 4, 6];

استخدام الحلقات مع ES6 التدمير و معامل الانتشار

لقد أثبتت عملية تدمير واستخدام عامل الانتشار انتشارًا مفيدًا للوافدين الجدد إلى ES6 على أنهم أكثر قابلية للقراءة من الناحية الإنسانية/الجمالية ، على الرغم من أن بعض قدامى المحاربين في javascript قد يعتبرونها فوضويًا أو صغارًا أو قد يجدها الآخرون مفيدة.

سوف تستخدم الأمثلة التالية for...of statement و .forEach method.

أمثلة 6 و 7 و 8 يمكن استخدامها مع أي حلقات وظيفية مثل .map و .filter و .reduce و .sort و .every و .some ، لمزيد من المعلومات حول هذه الطرق ، راجع Array Object .

مثال 1: عادي for...of حلقة - لا الحيل هنا.

let arrSimple = ['a', 'b', 'c'];

for (let letter of arrSimple) {
  console.log(letter);
}

مثال 2: تقسيم الكلمات إلى أحرف

let arrFruits = ['Apple', 'orange', 'banana'];

for (let [firstLetter, ...restOfTheWord] of arrFruits) {
  // Create a shallow copy using the spread operator
  let [lastLetter] = [...restOfTheWord].reverse();
  console.log(firstLetter, lastLetter, restOfTheWord);

}

مثال 3: حلقات مع key و value

// let arrSimple = ['a', 'b', 'c'];

// Instead of keeping an index in `i` as per example `for(let i = 0 ; i<arrSimple.length;i++)`
// this example will use a multi-dimensional array of the following format type: 
// `arrWithIndex: [number, string][]`

let arrWithIndex = [
  [0, 'a'],
  [1, 'b'],
  [2, 'c'],
];

// Same thing can be achieved using `.map` method
// let arrWithIndex = arrSimple.map((i, idx) => [idx, i]);

// Same thing can be achieved using `Object.entries`
// NOTE: `Object.entries` method doesn't work on internet Explorer unless it's polyfilled
// let arrWithIndex = Object.entries(arrSimple);

for (let [key, value] of arrWithIndex) {
  console.log(key, value);
}

مثال 4: الحصول على خصائص الكائن مضمنة

let arrWithObjects = [{
    name: 'Jon',
    age: 32
  },
  {
    name: 'Elise',
    age: 33
  }
];

for (let { name, age: aliasForAge } of arrWithObjects) {
  console.log(name, aliasForAge);
}

مثال 5: احصل على خصائص كائن عميقة لما تحتاجه

let arrWithObjectsWithArr = [{
    name: 'Jon',
    age: 32,
    tags: ['driver', 'chef', 'jogger']
  },
  {
    name: 'Elise',
    age: 33,
    tags: ['best chef', 'singer', 'dancer']
  }
];

for (let { name, tags: [firstItemFromTags, ...restOfTags] } of arrWithObjectsWithArr) {
  console.log(name, firstItemFromTags, restOfTags);
}

مثال 6: هل مثال 3 يستخدم مع .forEach

let arrWithIndex = [
  [0, 'a'],
  [1, 'b'],
  [2, 'c'],
];

// Not to be confused here, `forEachIndex` is the real index
// `mappedIndex` was created by "another user", so you can't really trust it

arrWithIndex.forEach(([mappedIndex, item], forEachIndex) => {
  console.log(forEachIndex, mappedIndex, item);
});

مثال 7: هل مثال 4 يستخدم مع .forEach

let arrWithObjects = [{
    name: 'Jon',
    age: 32
  },
  {
    name: 'Elise',
    age: 33
  }
];
// NOTE: Destructuring objects while using shorthand functions 
// are required to be surrounded by parenthesis
arrWithObjects.forEach( ({ name, age: aliasForAge }) => {
  console.log(name, aliasForAge)
});

مثال 8: هل مثال 5 يستخدم مع .forEach

let arrWithObjectsWithArr = [{
    name: 'Jon',
    age: 32,
    tags: ['driver', 'chef', 'jogger']
  },
  {
    name: 'Elise',
    age: 33,
    tags: ['best chef', 'singer', 'dancer']
  }
];

arrWithObjectsWithArr.forEach(({
  name,
  tags: [firstItemFromTags, ...restOfTags]
}) => {
  console.log(name, firstItemFromTags, restOfTags);
});

الطريقة الأقرب لفكرتك هي استخدام Array.forEach() التي تقبل دالة clojure والتي سيتم تنفيذها لكل عنصر من عناصر المصفوفة.

myArray.forEach(
  (item) => {
    // do something 
    console.log(item);
  }
);

هناك طريقة أخرى قابلة للتطبيق وهي استخدام Array.map() الذي يعمل بنفس الطريقة ولكن أيضًا mutates كل عنصر وإعادته مثل:

var myArray = [1, 2, 3];
myArray = myArray.map(
  (item) => {
    return item + 1;
  }
);

console.log(myArray); // [2, 3, 4]

بناء الجملة lambda لا يعمل عادة في IE 10 أو أقل.

أنا عادة استخدام

[].forEach.call(arrayName,function(value,index){
    console.log("value of the looped element" + value);
    console.log("index of the looped element" + index);
});


If you are a jQuery Fan and already have a jQuery file running, you should reverse the positions of the index and value parameters

$("#ul>li").each(function(**index,value**){
    console.log("value of the looped element" + value);
    console.log("index of the looped element" + index);
});

يمكنك الاتصال على كل مثل:

let Array = [1,3,2];

theArray.forEach((element)=>{ 
  // use the element of the array
  console.log(element) 
}

سيكون للعنصر قيمة كل فهرس من 0 إلى طول الصفيف.

انتاج:

1    
3    
2

كسبلايناتيون:

forEach في فئة النموذج الأولي. يمكنك أيضًا استدعاء هذا باسم theArray.prototype.forEach (...)؛

النموذج الأولي: https://hackernoon.com/prototypes-in-javascript-5bba2990e04b

يمكنك أيضًا تغيير مجموعة مثل هذا:

for(let i=0;i<theArray.length;i++){
  console.log(i); //i will have the value of each index
}

إذا كنت ترغب في تنفيذ حلقة من مجموعة من الكائنات مع وظيفة السهم:

let arr=[{name:'john',age:50},{name:'clark',age:19},{name:'mohan',age:26}];

arr.forEach((person)=>{
  console.log('i am '+person.name+' and i am '+person.age+ ' old');
})

ملخص:

عند التكرار على صفيف ، يمكننا غالبًا تحقيق أحد الأهداف التالية:

1. نريد التكرار على المصفوفة وإنشاء صفيف جديد:

   Array.prototype.map
   
   

2. نريد التكرار على المصفوفة وعدم إنشاء مجموعة جديدة:

   Array.prototype.forEach

for..of حلقة

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

إنشاء مجموعة جديدة: Map

map() هي وظيفة موجودة في Array.prototype والتي يمكن أن تحول كل عنصر من الصفيف ثم تعيد new / array. map() تأخذ كوسيطة وظيفة رد الاتصال وتعمل بالطريقة التالية:

let arr = [1, 2, 3, 4, 5];

let newArr = arr.map((element, index, array) => {
  return element * 2;
})

console.log(arr);
console.log(newArr);

رد الاتصال الذي مررنا به إلى map() كما يتم تنفيذ وسيطة لكل عنصر. ثم يتم إرجاع مجموعة لها نفس طول الصفيف الأصلي. في عنصر الصفيف الجديد هذا يتم تحويله بواسطة وظيفة رد الاتصال التي تم تمريرها كوسيطة إلى map().

الفرق المميز بين map وآلية حلقة أخرى مثل forEach وحلقة for..of هي أنmap تُرجع كصفيف جديد وتترك الصفيف القديم كما هي (إلا إذا كنت تتعامل معه مع التفسير مثل splice).

لاحظ أيضًا أن رد الاتصال للدالة map يوفر كوسيطة ثانية رقم فهرس التكرار الحالي. علاوة على ذلك ، توفر الوسيطة الثالثة الصفيف الذي تم استدعاء map عليه. في بعض الأحيان يمكن أن تكون هذه الخصائص مفيدة للغاية.

حلقة باستخدام forEach

forEach هي وظيفة موجودة في Array.prototype والتي تأخذ وظيفة رد الاتصال كوسيطة. ثم ينفذ وظيفة رد الاتصال هذه لكل عنصر في الصفيف. على عكس الدالة map() ، لا ترجع الدالة forEach أي شيء (undefined). فمثلا:

let arr = [1, 2, 3, 4, 5];

arr.forEach((element, index, array) => {

  console.log(element * 2);

  if (index === 4) {
    console.log(array)
  }
  // index, and oldArray are provided as 2nd and 3th argument by the callback

})

console.log(arr);

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

مرر خلال العناصر باستخدام for..of

يتم تنفيذ حلقة for..of خلال كل عنصر من عناصر الصفيف (أو أي كائن آخر قابل للتكرار). يعمل بالطريقة التالية:

let arr = [1, 2, 3, 4, 5];

for(let element of arr) {
  console.log(element * 2);
}

في المثال أعلاه ، يشير element إلى عنصر صفيف و arr هو الصفيف الذي نريد تكراره. لا يعني أن الاسم element تعسفي ويمكننا اختيار أي اسم آخر مثل "el" أو أي شيء أكثر تصريحا عندما يكون ذلك قابلاً للتطبيق.

لا تخلط بين حلقة for..in مع حلقة for..of. سيتم تنفيذ for..in عبر جميع الخصائص القابلة للصفيف للصفيف في حين أن الحلقة for..of سوف تتم فقط عبر عناصر الصفيف. فمثلا:

let arr = [1, 2, 3, 4, 5];

arr.foo = 'foo';

for(let element of arr) {
  console.log(element);
}

for(let element in arr) {
  console.log(element);
}

إذا كان لديك مجموعة كبيرة يجب عليك استخدام iterators للحصول على بعض الكفاءة. تعد Iterators خاصية لبعض مجموعات JavaScript (مثل Map ، Set ، String ، Array ). حتى ، for..of يستخدمiteratorتحت غطاء محرك السيارة.

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

يمكنك الوصول إلى العنصر الحالي عن طريق استدعاء أسلوب المتغير next. تقوم الطريقة التالية بإرجاعvalueللعنصر الحالي وbooleanللإشارة إلى متى وصلت إلى نهاية المجموعة. التالي مثال على إنشاء مكرر من صفيف.

حول الصفيف العادي إلى مكرر باستخدام values() طريقة مثل هذا:

    const myArr = [2,3,4]

let it = myArr.values();

console.log(it.next());
console.log(it.next());
console.log(it.next());
console.log(it.next());

يمكنك أيضًا تحويل الصفيف المعتاد إلى مكرر باستخدام Symbol.iterator مثل هذا:

const myArr = [2,3,4]

let it = myArr[Symbol.iterator]();

console.log(it.next());
console.log(it.next());
console.log(it.next());
console.log(it.next());

يمكنك أيضًا تحويل array العادي الخاص بك إلى iterator مثل هذا:

let myArr = [8, 10, 12];

function makeIterator(array) {
    var nextIndex = 0;
    
    return {
       next: function() {
           return nextIndex < array.length ?
               {value: array[nextIndex++], done: false} :
               {done: true};
       }
    };
};

var it = makeIterator(myArr);

console.log(it.next().value);   // {value: 8, done: false}
console.log(it.next().value);   // {value: 10, done: false}
console.log(it.next().value);   // {value: 12, done: false}
console.log(it.next().value);   // {value: undefined, done: true}

NOTE:

• التكراريون مستنفدين في الطبيعة.
• الكائنات ليست iterable بشكل افتراضي. استخدم for..in في هذه الحالة لأنه بدلاً من القيم يعمل مع المفاتيح.

يمكنك قراءة المزيد حول iteration protocolهنا .

var a = ["car", "bus", "truck"]
a.forEach(function(item, index) {
    console.log("Index" + index);
    console.log("Element" + item);
})

إذا كنت تريد الاحتفاظ بالرمز الخاص بك بالطريقة الوظيفية ، فاستخدم الخريطة:

theArray.map(instance => do_something);

وبهذه الطريقة ، ستقوم بإنشاء مجموعة جديدة للتشغيل في المستقبل وتخطي أي آثار جانبية غير مرغوب فيها.

يمكنك استخدام forEach () API (التي توفرها Javascript) والتي تقبل وظيفة كرد اتصال ويتم تشغيلها مرة واحدة لكل عنصر موجود داخل الصفيف.

https://fullstackgeek.blogspot.com/2019/01/arrays-in-javascript-part-2.html

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

for(let instance of theArray)
{
    console.log("The instance",instance);
}

أو

for( instance in theArray)
{
  console.log("The instance",instance);
}

قارن ب:

theArray.forEach(function(instance) {
    console.log(instance);
});

ولكن في نهاية اليوم كلاهما يفعلان نفس الشيء

إذا كنت تريد استخدام forEach() ، فسيبدو -

theArray.forEach ( element => {
    console.log(element);
});

إذا كنت تريد استخدام for() ، فسيبدو -

for(let idx = 0; idx < theArray.length; idx++){
    let element = theArray[idx];
    console.log(element);
}