كيف يمكنني تنفيذ جميع الإدخالات في صفيف باستخدام JavaScript؟
اعتقدت انه كان شيئا مثل هذا:
forEach(instance in theArray)
حيث theArray
صفيفتي ، لكن يبدو أن هذا غير صحيح.
تحرير : هذه الإجابة قديمة بشكل ميؤوس منه. للحصول على منهج أكثر حداثة ، انظر الأساليب المتاحة في مجموعة . قد تكون طرق الاهتمام:
الطريقة القياسية لتكرار صفيف في 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 (variable in object)
كجزء من معيار ECMA-357 ( EAX ).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
لأي لغة أخرى ، ويرتبط let
i
داخل الحلقة بخلاف داخل الوظيفة.
يمكن حذف الأقواس ({}
) عندما يكون هناك أمر واحد فقط (على سبيل المثال في المثال أعلاه).
ربما حلقة 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');
})
عند التكرار على صفيف ، يمكننا غالبًا تحقيق أحد الأهداف التالية:
نريد التكرار على المصفوفة وإنشاء صفيف جديد:
Array.prototype.map
نريد التكرار على المصفوفة وعدم إنشاء مجموعة جديدة:
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
هنا .
// Looping through arrays using foreach ES6 way
var data = new Array(1,2,3,4,5);
data.forEach((val,index) => {
console.log("index :",index); // index
console.log("value :", val); // value
});
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);
}