javascript এইচপ প্রতিটি জন্য জাভাস্ক্রিপ্ট একটি অ্যারের উপর?




পিএইচপি (23)

আপনার ধারণাটির সবচেয়ে কাছের একটি উপায় Array.forEach()যা কোনও ক্লোজার ফাংশন গ্রহণ করবে যা অ্যারের প্রতিটি উপাদানটির জন্য কার্যকর হবে।

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]

কিভাবে আমি জাভাস্ক্রিপ্ট ব্যবহার করে একটি অ্যারে সব এন্ট্রি মাধ্যমে লুপ করতে পারেন?

আমি এটা ভালো কিছু মনে ছিল:

forEach(instance in theArray)

যেখানে theArray আমার অ্যারে, কিন্তু এই ভুল বলে মনে হচ্ছে।


সম্পাদনা করুন : এই উত্তর অপ্রত্যাশিতভাবে পুরানো। একটি আরো আধুনিক পদ্ধতির জন্য, একটি অ্যারের উপর উপলব্ধ পদ্ধতি তাকান। আগ্রহের পদ্ধতি হতে পারে:

  • প্রতিটির জন্য
  • মানচিত্র
  • ছাঁকনি
  • ফ্যাস্ শব্দ
  • হ্রাস করা
  • প্রতি
  • কিছু

JavaScript একটি অ্যারে পুনরাবৃত্তি করার আদর্শ উপায় -loop for একটি ভ্যানিলা:

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

উল্লেখ্য, তবে, যদি আপনার ঘন অ্যারে থাকে তবে এই পদ্ধতিটি কেবলমাত্র ভাল এবং প্রতিটি সূচক একটি উপাদান দ্বারা দখল করা হয়। যদি অ্যারে স্পার হয় তবে আপনি এই পদ্ধতির সাথে কর্মক্ষমতা সমস্যার মধ্যে যেতে পারেন, যেহেতু আপনি অনেকগুলি সূচকের উপর পুনরাবৃত্তি করবেন যা অ্যারেতে বিদ্যমান নেই। এই ক্ষেত্রে, একটি for .. in -লপ একটি ভাল ধারণা হতে পারে। যাইহোক , for..in -loop লেগ্যাসি ব্রাউজারগুলিতেও সংজ্ঞায়িত করা হবে বা অতিরিক্ত থাকলে অ্যারের কেবলমাত্র পছন্দসই বৈশিষ্ট্যগুলি (যেটি অ্যারের উপাদানগুলি) শুধুমাত্র পছন্দসই বৈশিষ্ট্যগুলি কার্যকর করা হয় তা নিশ্চিত করার জন্য আপনাকে যথাযথ সুরক্ষাগুলি ব্যবহার করতে হবে। বৈশিষ্ট্য enumerable হিসাবে সংজ্ঞায়িত করা হয়।

ECMAScript 5 এ অ্যারের প্রোটোটাইপের জন্য প্রতিটি পদ্ধতিতে একটি পদ্ধতি থাকবে তবে এটি লিগ্যাসি ব্রাউজারগুলিতে সমর্থিত নয়। সুতরাং এটি ক্রমাগতভাবে ব্যবহার করতে সক্ষম হওয়ায় আপনার অবশ্যই এমন একটি পরিবেশ থাকতে হবে যা এটি সমর্থন করে (উদাহরণস্বরূপ, সার্ভার পার্শ্ব জাভাস্ক্রিপ্টের জন্য Node.js ), অথবা একটি "পলিফিল" ব্যবহার করুন। এই কার্যকারিতাটির জন্য পলিফিল, তবে, তুচ্ছ এবং এটি কোডটি সহজে পড়ার কারণে এটি অন্তর্ভুক্ত করার জন্য একটি ভাল পলিফিল।


ECMAScript5 (জাভাস্ক্রিপ্টের সংস্করণ) অ্যারে দিয়ে কাজ করতে।

জন্য প্রতিটি - অ্যারের মধ্যে প্রতিটি আইটেম মাধ্যমে intersates এবং আপনি প্রতিটি আইটেমের সাথে যা প্রয়োজন তা করতে।

['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

ক্ষেত্রে, কিছু inbuilt বৈশিষ্ট্য ব্যবহার করে অ্যারে অপারেশন আরও আগ্রহী।

মানচিত্র - এটি কলব্যাক ফাংশনের ফলাফল সহ একটি নতুন অ্যারে তৈরি করে। আপনি আপনার অ্যারের উপাদান বিন্যাস করতে হবে যখন এই পদ্ধতি ব্যবহার করা ভাল।

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

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

হ্রাস করুন - নামটি বলে যে এটি ক্রিয়া উপাদান এবং পূর্ববর্তী মৃত্যুদণ্ডের ফলাফল প্রদত্ত প্রদত্ত ফাংশনকে কল করে অ্যারেকে একক মানকে হ্রাস করে।

[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

প্রতিটি - অ্যারের সমস্ত উপাদান কলব্যাক ফাংশনে পরীক্ষা পাস করলে সত্য বা মিথ্যা প্রদান করে।

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

// Output: false

ফিল্টার - ফিল্টার ব্যতীত একেবারে অনুরূপ ফিল্টারগুলি কোনও অ্যারে ফেরত দেয় যা প্রদত্ত ফাংশনে সত্য ফিরে আসে।

// 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কলব্যাকগুলি যত তাড়াতাড়ি সম্ভব ফেরত পাঠায়, অ্যারে ক্রমের মধ্যে মৃত্যুদন্ড কার্যকর করা হয়, সত্যকে ফেরত দেয়, বাকিগুলি কার্যকর করার স্বল্প-সার্কিট করে। আসল উত্তর some জন্য অ্যারে প্রোটোটাইপ দেখুনsome


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);
});

আপনি যদি jQuery লাইব্রেরি ব্যবহার করেন তবে আপনি jQuery.each ব্যবহার করতে পারেন:

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

সম্পাদনা করুন:

প্রশ্ন অনুসারে, ব্যবহারকারী jquery পরিবর্তে জাভাস্ক্রিপ্টে কোড চান যাতে সম্পাদনা হয়

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

আপনি ব্যবহার করতে চান forEach(), এটা দেখতে হবে -

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

আপনি ব্যবহার করতে চান for(), এটা দেখতে হবে -

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


একটি জন্য প্রতিটি বাস্তবায়ন ( 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
  }
);

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

আমি জানি এটি একটি পুরানো পোস্ট, এবং ইতিমধ্যে অনেক মহান উত্তর আছে। একটু বেশি পরিপূর্ণতার জন্য আমি অনুমান করেছি যে আমি AngularJS ব্যবহার করে অন্য একটিতে নিক্ষেপ করব । অবশ্যই, এটি শুধুমাত্র তখনই প্রযোজ্য হবে যদি আপনি কৌণিক ব্যবহার করেন তবে স্পষ্টতই আমি তা সত্ত্বেও লিখতে চাই।

angular.forEach2 আর্গুমেন্ট এবং একটি ঐচ্ছিক তৃতীয় যুক্তি নেয়। প্রথম যুক্তি বস্তুটি (অ্যারে) উপর পুনরাবৃত্তি করার জন্য, দ্বিতীয় যুক্তিটি ইটারারেটর ফাংশন এবং ঐচ্ছিক তৃতীয় যুক্তি বস্তু প্রসঙ্গ (মূলত লুপের ভিতরে 'এই' হিসাবে উল্লেখ করা হয়।

কোণার প্রতিটি লুপ জন্য ব্যবহার করার বিভিন্ন উপায় আছে। সবচেয়ে সহজ এবং সম্ভবত সবচেয়ে ব্যবহৃত হয়

var temp = [1, 2, 3];
angular.forEach(temp, function(item) {
    //item will be each element in the array
    //do something
});

অন্য একটি উপায় থেকে অন্য অ্যারে আইটেম অনুলিপি করার জন্য দরকারী অন্য উপায়

var temp = [1, 2, 3];
var temp2 = [];
angular.forEach(temp, function(item) {
    this.push(item); //"this" refers to the array passed into the optional third parameter so, in this case, temp2.
}, temp2);

যদিও, আপনাকে এটি করতে হবে না, আপনি কেবল নিম্নলিখিতটি করতে পারেন এবং এটি পূর্ববর্তী উদাহরণের সমতুল্য:

angular.forEach(temp, function(item) {
    temp2.push(item);
});

angular.forEachভ্যানিলা-স্বাদযুক্ত forলুপে নির্মিত ফাংশনটি ব্যবহার করার জন্য এখন পেশাদার এবং বিপরীত রয়েছে ।

পেশাদাররা

  • সহজ পাঠযোগ্যতা
  • সহজ লেখার
  • উপলব্ধ হলে, angular.forEachপ্রতিটি লুপ জন্য ES5 ব্যবহার করা হবে। এখন, আমি cons বিভাগে দক্ষতা পেতে হবে, কারণ প্রতিটি loops জন্য loops চেয়ে অনেক ধীর। আমি একটি প্রো হিসাবে এই উল্লেখ কারণ এটি সামঞ্জস্যপূর্ণ এবং মানসম্মত হতে ভাল।

নীচের 2 নেস্টেড loops বিবেচনা করুন, যা ঠিক একই জিনিস। আসুন আমরা বলি যে আমাদের দুটি অ্যারে অবজেক্ট রয়েছে এবং প্রতিটি বস্তুর ফলাফলের একটি অ্যারে রয়েছে, যার প্রতিটি একটি মান সম্পত্তির রয়েছে যা একটি স্ট্রিং (বা যাই হোক না কেন)। এবং বলুন আমরা ফলাফল প্রতিটি উপর পুনরাবৃত্তি প্রয়োজন এবং যদি তারা সমান হয় তারপর কিছু কর্ম সঞ্চালন:

angular.forEach(obj1.results, function(result1) {
    angular.forEach(obj2.results, function(result2) {
        if (result1.Value === result2.Value) {
            //do something
        }
    });
});

//exact same with a for loop
for (var i = 0; i < obj1.results.length; i++) {
    for (var j = 0; j < obj2.results.length; j++) {
        if (obj1.results[i].Value === obj2.results[j].Value) {
            //do something
        }
    }
}

অনুগ্রহ করে এটি একটি খুব সহজ কল্পনাপ্রসূত উদাহরণ, তবে আমি দ্বিতীয় পদ্ধতির সাহায্যে loops এর জন্য তিনটি এমবেডেড লিখেছি এবং এটি পড়তে খুব কঠিন ছিল এবং সেই বিষয়ে লিখতে হবে।

কনস

  • দক্ষতা. angular.forEach, এবং স্থানীয় forEach, যে ক্ষেত্রে, উভয় স্বাভাবিক লুপ চেয়ে অনেক ধীর for.... প্রায় 90% ধীর । তাই বড় তথ্য সেট জন্য, ন্যাচারাল forলুপ থেকে লাঠি সেরা ।
  • কোন বিরতি, অবিরত, বা ফিরে সমর্থন। continueপ্রকৃতপক্ষে " accident " দ্বারা সমর্থিত , angular.forEachআপনাকে সহজে return;ফাংশনে একটি বিবৃতি angular.forEach(array, function(item) { if (someConditionIsTrue) return; });প্রদান করা চালিয়ে যাওয়ার জন্য এটি যে পুনরাবৃত্তির জন্য ফাংশন থেকে অব্যাহত থাকবে। এই কারণে যে forEachনেটিভরা বিরতি সমর্থন করে না বা তাও চালিয়ে যায়।

আমি নিশ্চিত যে অন্যান্য অন্যান্য পেশাদার এবং বিপর্যয় আছে, এবং আপনি ফিট দেখতে যে যোগ করতে বিনা দ্বিধায় দয়া করে। আমি মনে করি যে, নিচের লাইনটি যদি আপনার দক্ষতা দরকার তবে forআপনার লুপিংয়ের জন্য কেবলমাত্র নেটিভ লুপের সাথে আটকে থাকুন । কিন্তু, যদি আপনার ডেটাসেটগুলি ছোট এবং কিছু দক্ষতা পঠনযোগ্যতা এবং লেখার বিনিময়ে ছেড়ে দেওয়া ঠিক থাকে তবে তারপরেই angular.forEachসেই খারাপ ছেলেটিকে নিক্ষেপ করুন ।


যদি আপনি অ্যারে খালি মনে করেন না:

var x;

while(x = y.pop()){ 

    alert(x); //do something 

}

xএর শেষ মান ধারণ করে yএবং এটি অ্যারে থেকে সরানো হবে। আপনি ব্যবহার করতে পারেন shift()যা থেকে প্রথম আইটেম দিতে এবং অপসারণ করতে পারেন y


আমি এটি একটি বিপরীত লুপের মিশ্রণ হিসাবে এবং এটির সিনট্যাক্সটি পছন্দ করতে চাই এমন ব্যক্তির জন্য একটি উত্তর হিসাবে যোগ করতে চাই।

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

পেশাদাররা:

এর জন্য বেনিফিট: আপনার কাছে ইতিমধ্যে এমন প্রথম রেফারেন্স রয়েছে যা পরবর্তীতে অন্য লাইনের সাথে ঘোষণা করার প্রয়োজন হবে না। বস্তু অ্যারে looping যখন এটি সহজ।

কনস:

রেফারেন্স মিথ্যা যখনই এই বিরতি হবে - মিথ্যা (অনির্দিষ্ট, ইত্যাদি)। এটি যদিও একটি সুবিধা হিসেবে ব্যবহার করা যেতে পারে। যাইহোক, এটি পড়তে একটু কঠিন করা হবে। এবং ব্রাউজারের উপর নির্ভর করে এটি "না" মূলটি থেকে দ্রুততর কাজ করার জন্য অপ্টিমাইজ করা যেতে পারে।


ES6 হিসাবে:

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

যেখানে ofঅদ্ভুততাগুলি এড়ানো যায় inএবং এটি forঅন্য কোন ভাষার লুপের মত কাজ করে এবং ফাংশনের মধ্যে বিরোধ হিসাবে লুপের মধ্যে letআবদ্ধ iহয়।

{}যখন শুধুমাত্র একটি কমান্ড থাকে (যেমন উপরের উদাহরণে) তখন ব্রেসেস ( ) বাদ দেওয়া যেতে পারে।


আপনি একটি বৃহদায়তন অ্যারে আছে যদি আপনি iteratorsকিছু দক্ষতা লাভ করতে ব্যবহার করা উচিত । Iterators নির্দিষ্ট জাভাস্ক্রিপ্ট সংগ্রহের একটি সম্পত্তি (মত Map, Set, String, Array)। এমনকি, for...ofব্যবহার iteratorঅধীনে-ফণা।

Iterators একটি স্ট্রিম হিসাবে একটি সময়ে এক তালিকা আইটেম একযোগে ব্যবহার করে দক্ষতা উন্নত। এটি একটি সংগ্রহকারীকে বিশেষ করে কীভাবে এটি একটি সংগ্রহকে অতিক্রম করে। অন্যান্য লুপগুলি এটির উপর পুনরাবৃত্তি করার জন্য সমগ্র সংগ্রহকে সামনে রেখে লোড করতে হবে, তবে একটি ইটারারেটরের কেবল সংগ্রহের বর্তমান অবস্থানটি জানা দরকার।

আপনি 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একটি থেকে iteratorsভালো:

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}

উল্লেখ্য :

  • Iterators প্রকৃতির exhaustible হয়।
  • বস্তু iterableডিফল্ট দ্বারা হয় না । for..inযে ক্ষেত্রে ব্যবহার করুন কারণ মান পরিবর্তে এটি কী দিয়ে কাজ করে।

আপনি সম্বন্ধে আরও পড়তে পারেন iteration protocol here


কিছু C স্টাইল ভাষা সংখ্যার মাধ্যমে লুপ foreach ব্যবহার। জাভাস্ক্রিপ্টে 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 জন্য একটি forEach পদ্ধতি যোগ করেছে যা একটি ক্যাল্যাকব্যাক ব্যবহার করে একটি অ্যারের উপর Array.prototype জন্য ব্যবহার করা যেতে পারে (পলিফিল ডক্সগুলিতে রয়েছে যাতে আপনি এখনও পুরানো ব্রাউজারগুলির জন্য এটি ব্যবহার করতে পারেন):

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

কলব্যাক false যখন Array.prototype.forEach এটি নোট গুরুত্বপূর্ণ নয়। jQuery এবং Underscore.js স্বল্প-সার্কিট করা যেতে পারে এমন loops সরবরাহ করতে each তাদের নিজস্ব বৈচিত্র সরবরাহ করে।


আপনি এই মত প্রতিটি জন্য কল করতে পারেন:

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

উপাদানটি 0 থেকে প্রতিটি সূচীর মান অ্যারের দৈর্ঘ্য থাকবে।

আউটপুট:

let Array = [1,3,2];

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

Explaination:

প্রতিটি জন্য প্রোটোটাইপ ক্লাস হয়। আপনি এটিকে অ্যার্রে.প্রোটোটাইপ.ফোরাক হিসাবে কল করতে পারেন (...);

প্রোটোটাইপ: https://hackernoon.com/prototypes-in-javascript-5bba2990e04b

আপনি এটির মতো একটি অ্যারেতেও পরিবর্তন করতে পারেন:

1    
3    
2

সারাংশ:

একটি অ্যারের উপর পুনরাবৃত্তি করার সময় আমরা প্রায়ই নিম্নলিখিত লক্ষ্যগুলির একটি করতে চান:

  1. আমরা অ্যারের উপর পুনরাবৃত্তি করতে এবং নতুন অ্যারে তৈরি করতে চান:

    Array.prototype.map

  2. আমরা অ্যারের উপর পুনরাবৃত্তি করতে চান এবং একটি নতুন অ্যারে তৈরি করবেন না:

    Array.prototype.forEach

    for..of লুপ

জেএস এ দুটি লক্ষ্য অর্জনের অনেক উপায় আছে। তবে, কিছু অন্যদের তুলনায় আরো সংকীর্ণ হয়। নীচে আপনি জাভাস্ক্রিপ্টে অ্যারে পুনরাবৃত্তি সম্পাদন করতে কিছু সাধারণভাবে ব্যবহৃত পদ্ধতি (সর্বাধিক কনভেনশেন্ট ইমো) খুঁজে পেতে পারেন।

নতুন অ্যারে তৈরি করা হচ্ছে: Map

map()একটি ফাংশন Array.prototypeযা কোন অ্যারের প্রতিটি উপাদান রূপান্তর করতে পারে এবং তারপরে একটি নতুন অ্যারে প্রদান করে। 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()একটি যুক্তি হিসাবে পাস করেছেন যা callback প্রতিটি উপাদান জন্য মৃত্যুদন্ড কার্যকর করা হয়। তারপর একটি অ্যারে ফিরে আসেন যা আসল অ্যারে হিসাবে একই দৈর্ঘ্য আছে। এই নতুন অ্যারে উপাদান একটি যুক্তি হিসাবে পাস কলব্যাক ফাংশন দ্বারা রূপান্তরিত করা হয় map()

mapএবং লুপের মতো অন্যান্য লুপ প্রক্রিয়া forEachএবং একটি for..ofলুপের মধ্যে স্বতন্ত্র পার্থক্য হল mapনতুন অ্যারের হিসাবে ফেরত দেয় এবং পুরাতন অ্যারেটি অক্ষত রাখে (যদি আপনি ব্যাখ্যাটি এটির মতো মনে করেন তবে তা ব্যতীত splice)।

এছাড়াও নোট করুন যে mapফাংশন এর কলব্যাক বর্তমান পুনরাবৃত্তির সূচক সংখ্যাটি দ্বিতীয় যুক্তি হিসাবে সরবরাহ করে। উপরন্তু তৃতীয় যুক্তি mapবলা হয় যা অ্যারে প্রদান করে । কখনও কখনও এই বৈশিষ্ট্য খুব দরকারী হতে পারে।

লুপ ব্যবহার করে forEach

forEachএকটি ফাংশন যা অবস্থিত Array.prototypeএকটি যুক্তি হিসাবে একটি কলব্যাক ফাংশন লাগে যা। তারপর অ্যারের প্রতিটি উপাদান জন্য এই কলব্যাক ফাংশন সঞ্চালিত হয়। map()ফাংশন বিপরীতে জন্য প্রতিটি ফাংশন কিছুই ফেরত ( 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লুপ একটি অ্যারের (অথবা অন্য কোন iterable বস্তুর) এর প্রতিটি উপাদান মাধ্যমে loops। এটি নিম্নলিখিত পদ্ধতিতে কাজ করে:

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

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

উপরের উদাহরণে elementএকটি অ্যারে উপাদান জন্য দাঁড়িয়েছে এবং arrঅ্যারে যা আমরা লুপ করতে চান। নামটি elementইচ্ছাকৃতভাবে নয় এবং এটি যখন প্রযোজ্য হবে তখন আমরা 'এল' এর মতো অন্য কোন নাম বা আরো ঘোষণামূলক কিছু বাছাই করতে পারতাম।

for..inলুপ সঙ্গে লুপ বিভ্রান্ত না for..offor..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);
}


ES6 destructuring এবং বিস্তার অপারেটর সঙ্গে loops ব্যবহার

ডিস্ট্রাকচারিং এবং স্প্রেড অপারেটর ব্যবহার করে ES6 এ আরও বেশি মানুষের পঠনযোগ্য / নান্দনিক হিসাবে এটি বেশ উপকারী প্রমাণিত হয়েছে, যদিও কিছু জাভাস্ক্রিপ্ট ভেটেরান্স এটি নোংরা বিবেচনা করতে পারে, জুনিয়র বা অন্য কিছু লোক এটি উপকারী হতে পারে।

নিম্নলিখিত উদাহরণ for...ofবিবৃতি এবং .forEachপদ্ধতি ব্যবহার করবে ।

উদাহরণ 6, 7 ও 8 মত কোন কার্মিক লুপ ব্যবহার করা যেতে পারে .map, .filter, .reduce, .sort, .every, .some, জন্য এই পদ্ধতি সম্পর্কে আরো তথ্য পরীক্ষা করুন এরে অবজেক্ট

উদাহরণ 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এবং সঙ্গে loopingvalue

// 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: Is উদাহরণ 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: Is উদাহরণ 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: Is উদাহরণ 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);
});


পিছন দিকে লুপ

আমি লুপ জন্য বিপরীত একটি উল্লেখ প্রাপ্য এখানে মনে হয়:

for (var i = array.length; i--; ) {
     // process array[i]
}

সুবিধাদি:

  • আপনি একটি অস্থায়ী len পরিবর্তনশীল ঘোষণা করতে বা প্রতি পুনরাবৃত্তি নেভিগেশন array.length বিরুদ্ধে তুলনা করতে হবে না, যা একটি মিনিট অপ্টিমাইজেশান হতে পারে।
  • বিপরীত ক্রম থেকে DOM থেকে ভাইবোন অপসারণ সাধারণত আরো দক্ষ । (ব্রাউজারটির অভ্যন্তরীণ অ্যারেগুলিতে উপাদানগুলির কম স্থানান্তর করতে হবে।)
  • যদি আপনি ইন্ডেক্সে বা পরে লুপ করার সময় অ্যারে সংশোধন করেন (উদাহরণস্বরূপ আপনি array[i] এ কোনও আইটেম সরাতে বা সন্নিবেশ করান, তখন একটি ফরওয়ার্ড লুপ বামে স্থানান্তরিত আইটেমটিকে বাদ দেবে, অথবা আমি পুনরায় প্রক্রিয়া করব ডান আইটেম স্থানান্তরিত হয় যে আইটেমটি। লুপ জন্য একটি ঐতিহ্যগত, আপনি প্রক্রিয়াকরণের প্রয়োজন পরবর্তী আইটেম নির্দেশ করতে আমি আপডেট করতে পারে - 1, কিন্তু পুনরাবৃত্তি দিক সহজভাবে বিপরীত প্রায়ই একটি সহজ এবং আরো মার্জিত সমাধান
  • একইভাবে, যখন নেস্টেড DOM উপাদানের পরিবর্তন বা অপসারণ করা হয়, বিপরীত প্রক্রিয়াকরণ ত্রুটিগুলি রোধ করতে পারে । উদাহরণস্বরূপ, তার সন্তানদের পরিচালনা করার আগে একটি পিতা-মাতা নোডের অভ্যন্তরীণ HTML সংশোধন করার কথা বিবেচনা করুন। সন্তানের নোড পৌঁছানোর সময় এটি DOM থেকে বিচ্ছিন্ন করা হবে, যখন একটি নতুন তৈরি শিশু দ্বারা প্রতিস্থাপিত করা হবে যখন পিতামাতার অভ্যন্তরীণ HTML লেখা হয়েছিল।
  • এটি উপলব্ধ অন্যান্য বিকল্পের চেয়ে টাইপ, এবং পড়তে সংক্ষিপ্ত । যদিও এটির জন্য forEach() এবং ES6 এর for ... of

অসুবিধা:

  • এটা বিপরীত ক্রম আইটেম প্রক্রিয়া। যদি আপনি ফলাফল থেকে একটি নতুন অ্যারে তৈরি করেন, বা স্ক্রীনে জিনিসগুলি মুদ্রণ করেন তবে স্বাভাবিকভাবেই আউটপুটটি মূল ক্রমের সাথে বিপরীত হবে
  • ক্রমবর্ধমানভাবে তাদের আদেশ বজায় রাখার জন্য প্রথম সন্তানের হিসাবে DOM মধ্যে ভাইবোন ঢোকানো কম দক্ষ । (ব্রাউজারটি জিনিসগুলিকে সঠিকভাবে স্থানান্তরিত করতে থাকবে।) DOM নোডগুলি দক্ষতার সাথে এবং ক্রমশই তৈরি করতে, কেবল লুপ অগ্রসর এবং স্বাভাবিক হিসাবে যুক্ত করুন (এবং "নথি ফাঁক" ব্যবহার করুন)।
  • বিপরীত লুপ জুনিয়র ডেভেলপারদের বিভ্রান্তিকর হয়। (আপনি আপনার দৃষ্টিভঙ্গির উপর নির্ভর করে একটি সুবিধা বিবেচনা করতে পারেন।)

আমি সবসময় এটা ব্যবহার করা উচিত?

কিছু ডেভেলপার ডিফল্টরূপে লুপের বিপরীত বিপরীত ব্যবহার করে, যদি না লুপ ফরওয়ার্ডের একটি ভাল কারণ না থাকে।

কর্মক্ষমতা লাভ সাধারণত উল্লেখযোগ্য যদিও, এটা চিৎকার এর সাজানোর:

"শুধু তালিকায় প্রতিটি আইটেমের জন্য এই কাজ, আমি অর্ডার সম্পর্কে উদ্বিগ্ন না!"

যাইহোক, প্রকৃতপক্ষে এটি আসলে কোনও অভিপ্রায়ের নির্ভরযোগ্য ইঙ্গিত নয় , কারণ আপনি যখন সেই ক্রমটির যত্ন নেবেন তখন সেগুলি থেকে এটি আলাদা হয় এবং প্রকৃতপক্ষে বিপরীত দিকে লুপ করার প্রয়োজন হয়। তাই প্রকৃতপক্ষে অন্য কোনও কনস্ট্রাক্টটি "যত্ন না" অভিপ্রায়টি সঠিকভাবে প্রকাশ করার প্রয়োজন হবে, বর্তমানে ECMAScript সহ বেশিরভাগ ভাষায় অনুপলব্ধ কিছু যা উদাহরণস্বরূপ, forEachUnordered() জন্য বলা যেতে পারে।

যদি অর্ডারটি কোনও ব্যাপার না এবং দক্ষতা একটি উদ্বেগ (কোনও গেম বা অ্যানিমেশন ইঞ্জিনের অন্তর্বর্তী লুপে) তবে আপনার Go-To প্যাটার্ন হিসাবে লুপের বিপরীত ব্যবহারটি গ্রহণযোগ্য হতে পারে। শুধু মনে রাখবেন যে বিদ্যমান কোডের লুপের বিপরীতটি দেখার অর্থ অপরিহার্য নয় !

এটি প্রতিটি জন্য ব্যবহার করা ভাল ()

উচ্চ স্তরের কোডের জন্য যেখানে স্বচ্ছতা এবং সুরক্ষা বেশি Array::forEach , আমি আপনার ডিফল্ট প্যাটার্ন হিসাবে Array::forEach ব্যবহার করার সুপারিশ করব:

  • এটা পড়তে স্পষ্ট।
  • এটি নির্দেশ করে যে আমি ব্লকের মধ্যে স্থানান্তরিত হতে যাচ্ছি না (যা সর্বদা দীর্ঘক্ষণ এবং লুকিয়ে থাকা অবস্থায় লুকানো একটি সম্ভাব্য অবাক।)
  • এটা আপনি বন্ধ জন্য একটি বিনামূল্যে সুযোগ দেয়।
  • এটি বাইরের ভেরিয়েবলগুলির সাথে স্থানীয় ভেরিয়েবল এবং আকস্মিক সংঘর্ষের (এবং রূপান্তরের) ফুটো হ্রাস করে।

তারপরে যখন আপনি আপনার কোডের লুপের বিপরীতটি দেখেন, তখন এটি একটি ইঙ্গিত দেয় যে এটি একটি ভাল কারণে (সম্ভবত উপরে বর্ণিত কারণগুলির মধ্যে একটি) বিপরীত হয়। এবং লুপ জন্য একটি ঐতিহ্যগত এগিয়ে দেখছি যে স্থানান্তর ঘটতে পারে ইঙ্গিত করতে পারে।

(যদি অভিপ্রায়টির আলোকে আপনার কোন ধারণা না থাকে তবে আপনি এবং আপনার কোডটি প্রোগ্রামিং স্টাইল এবং আপনার ব্রেইন সম্পর্কিত ক্রোকফোর্ডের বক্তৃতা দেখার থেকে উপকৃত হতে পারে।)

এটা কিভাবে কাজ করে?

for (var i = 0; i < array.length; i++) { ... }   // Forwards

for (var i = array.length; i--; )    { ... }   // Reverse

আপনি লক্ষ্য করবেন যে আমি - মধ্যম ধারা (যেখানে আমরা সাধারণত তুলনা দেখি) এবং শেষ ধারাটি খালি (যেখানে আমরা সাধারণত দেখি i++ )। এর মানে হল যে আমি - ধারাবাহিকতার জন্য শর্ত হিসাবে ব্যবহার করা হয়। Crucially, এটি মৃত্যুদন্ড কার্যকর করা হয় এবং প্রতিটি পুনরাবৃত্তি আগে চেক করা হয়।

  • কিভাবে এটি বিস্ফোরিত ছাড়া অ্যারে। array.length শুরু করতে পারেন?

    কারণ আমি - প্রতিটি পুনরাবৃত্তি আগে রান, প্রথম পুনরাবৃত্তি আমরা আসলে array.length - 1 এ আইটেমটি অ্যাক্সেস করা হবে যা অ্যারে-আউট-অফ-সীমানা undefined আইটেম সঙ্গে কোনো সমস্যা এড়ানো।

  • কেন সূচক 0 এর আগে পুনরাবৃত্তি বন্ধ না?

    লুপটি যখন পুনরাবৃত্তি বন্ধ করবে তখন আমি শর্তটি নির্ণয় করব - একটি মিথ্যা মানের মূল্যায়ন করে (যখন তা 0 হয়)।

    কৌশলটি হল --i i , বিপরীত --i অপারেটরটি হ্রাস করে তবে হ্রাসের আগে মানটি উৎপন্ন করে। আপনার কনসোল এই প্রদর্শন করতে পারেন:

    > var i = 5; [i, i--, i];

    [5, 5, 4]

    তাই চূড়ান্ত পুনরাবৃত্তি উপর, আমি পূর্বে 1 এবং i-- অভিব্যক্তি এটি 0 পরিবর্তন কিন্তু প্রকৃতপক্ষে 1 (সত্য) উত্পাদ, এবং তাই শর্ত পাস। পরবর্তী পুনরাবৃত্তি উপর আমি -1 -1 পরিবর্তন করে কিন্তু 0 (মিথ্যা) উত্পাদ, ফলে লুপ নীচে অবিলম্বে ড্রপ আউট সঞ্চালন।

    লুপের জন্য প্রথাগত অগ্রগতিতে, i++ এবং ++i বিনিমেয় (ডগলাস ক্রকফোর্ড পয়েন্ট আউট হিসাবে)। যাইহোক লুপের বিপরীত দিকে, কারণ আমাদের হ্রাস আমাদের শর্ত অভিব্যক্তিও, আমাদের সাথে থাকা উচিত - যদি আমরা সূচী 0 এ আইটেমটি প্রক্রিয়া করতে চাই।

তুচ্ছ বস্তু

কিছু লোক লুপের বিপরীত দিকে একটু তীর আঁকতে পছন্দ করে এবং একটি বিস্ময় দিয়ে শেষ হয়:

for (var i = array.length; i --> 0 ;) {

আমাকে লুপের বিপরীত দিকগুলির বেনিফিট এবং ভয় দেখানোর জন্য ক্রেডিট WYL এ যান।


এটি অ-স্পার্স তালিকার জন্য একটি ইটারারেটর যেখানে সূচীটি 0 থেকে শুরু হয়, যা ডকুমেন্ট.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');

প্রতিটি পি ট্যাগ পায় class="blue"

উদাহরণ # 3

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

প্রতিটি অন্যান্য পি ট্যাগ পায় class="red">

উদাহরণ # 4

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

এবং অবশেষে প্রথম 20 নীল পি ট্যাগ সবুজ পরিবর্তন করা হয়

ফাংশন হিসাবে স্ট্রিং ব্যবহার করার সময় সাবধান: ফাংশন বাইরে-প্রক্সি তৈরি করা হয় এবং কেবলমাত্র ব্যবহারযোগ্য হওয়া উচিত যেখানে আপনি পরিবর্তনশীল স্কোপিংয়ের নির্দিষ্ট কিছু। অন্যথায়, স্কোপিং আরও স্বজ্ঞাত যেখানে ফাংশন পাস করতে ভাল।


for eachস্থানীয় JavaScript কোন লুপ নেই । আপনি এই কার্যকারিতাটি পেতে লাইব্রেরিগুলি ব্যবহার করতে পারেন (আমি Underscore.js সুপারিশ করি ), forলুপে একটি সহজ ব্যবহার করুন ।

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

যাইহোক, একটি সহজ সরল forলুপ ব্যবহার করার কারণ থাকতে পারে (স্ট্যাক ওভারফ্লো প্রশ্ন দেখুন অ্যারে পুনরাবৃত্তির সাথে " কেনার জন্য ..." ব্যবহার করা কেন এত খারাপ ধারণা? )

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

সেখানে তিন বাস্তবায়নের হয় 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

একটি সহজ সমাধান এখন underscore.js লাইব্রেরি ব্যবহার করা হবে । এটি অনেক দরকারী সরঞ্জাম সরবরাহ করছে, যেমন যদি পাওয়া যায় eachএবং স্বয়ংক্রিয়ভাবে কাজকে স্থানীয়ভাবে কাজটি প্রদান করবে forEach

এটি কিভাবে কাজ করে তার একটি কোডপেন উদাহরণ :

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

আরো দেখুন

  • Array::forEach
  • ইন for_each...in (MDN) এটি ব্যাখ্যা করা হয় যে for each (variable in object)ECMA-357 (অংশ হিসেবে অবচিত EAX ) মান।
  • for...of (এমডিএন) for (variable of object)হারমনি (ইসিএমএসস্ক্রিপ্ট 6) প্রস্তাবের অংশ হিসাবে ব্যবহার করে পরবর্তী পুনরাবৃত্তি সম্পর্কে বর্ণনা করে ।




iteration