javascript - পিএইচপি




প্রতিটি জন্য জাভাস্ক্রিপ্ট একটি অ্যারের উপর? (19)

পিছন দিকে লুপ

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

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 এ যান।

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

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

forEach(instance in theArray)

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


সারাংশ:

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

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


কিছু 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 তাদের নিজস্ব বৈচিত্র সরবরাহ করে।


যদি আপনি একটি অ্যারের উপর লুপ করতে চান, লুপ জন্য আদর্শ তিনটি অংশ for

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

আপনি myArray.length ক্যাশে বা পিছনে এটি overerating দ্বারা কিছু কর্মক্ষমতা অপটিমেশন পেতে পারেন।


ES6 হিসাবে:

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

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

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


টি এল; ডিআর

  • নিরাপদ সতর্কতার সাথে এটি ব্যবহার for-in পর্যন্ত বা অন্তরঙ্গভাবে কেন এটি ব্যবহার করতে পারে তা অবগত থাকার for-in ব্যবহার করবেন না।
  • আপনার সেরা bets সাধারণত হয়

    • একটি for-of লুপ (ES2015 + শুধুমাত্র),
    • Array#forEach ( spec | MDN ) (অথবা এর Array#forEach some এবং এমন) (শুধুমাত্র ES5 +),
    • লুপ for একটি সহজ পুরাতন-ফ্যাশন,
    • বা নিরাপত্তার সঙ্গে জন্য ইন।

কিন্তু এক্সপ্লোর করতে আরো অনেক কিছু আছে, পড়তে ...

জাভাস্ক্রিপ্ট অ্যারে এবং অ্যারের মত বস্তুর মাধ্যমে looping জন্য শক্তিশালী শব্দার্থবিদ্যা আছে। আমি উত্তরটি দুটি অংশে বিভক্ত করেছি: জেনুইন অ্যারের জন্য বিকল্পগুলি এবং কেবলমাত্র অ্যারের-এর মতো বিকল্পগুলির জন্য বিকল্পগুলি, যেমন arguments বস্তু, অন্যান্য পুনরাবৃত্তিযোগ্য বস্তু (ES2015 +), DOM সংগ্রহ, ইত্যাদি।

আমি দ্রুত মনে রাখবেন যে আপনি ES55 বিকল্পগুলি এখন ES5 ইঞ্জিনে ব্যবহার করতে পারেন, ES2015 থেকে ES5 তে স্থানান্তর করে। আরও জানতে "ES2015 ট্রান্সফিলিং" / "ES6 ট্রান্সফিলিং" এর জন্য অনুসন্ধান করুন ...

ঠিক আছে, আমাদের বিকল্প তাকান:

প্রকৃত অ্যারে জন্য

ECMAScript 5 ("ES5") এ আপনার তিনটি বিকল্প রয়েছে, এই মুহুর্তে সর্বাধিক সমর্থিত সংস্করণটি এবং ECMAScript 2015 ("ES2015", "ES6") এ আরো দুটি যোগ করা হয়েছে:

  1. forEach এবং সম্পর্কিত (ES5 +) জন্য ব্যবহার করুন
  2. লুপ for একটি সহজ ব্যবহার করুন
  3. সঠিকভাবে for-in ব্যবহার করুন
  4. এর for-of ব্যবহার করুন (নিখরচায় একটি ইটারেটার ব্যবহার করুন) (ES2015 +)
  5. স্পষ্টভাবে একটি থালা ব্যবহার করুন (ES2015 +)

বিবরণ:

1. forEach এবং সম্পর্কিত জন্য ব্যবহার করুন

কোন অস্বাভাবিক-আধুনিক পরিবেশে (তাই, IE8 নয়) যেখানে আপনার ES5 (সরাসরি বা পলিফিলগুলি ব্যবহার করে) এর Array বৈশিষ্ট্যগুলিতে অ্যাক্সেস রয়েছে, আপনি forEach ( spec | MDN ) ব্যবহার করতে পারেন:

var a = ["a", "b", "c"];
a.forEach(function(entry) {
    console.log(entry);
});

forEach একটি কলব্যাক ফাংশন গ্রহণ করে এবং, বিকল্পভাবে, যে কলব্যাক কল করার সময় এটি ব্যবহার করার জন্য একটি মান (উপরে ব্যবহৃত হয় না)। অ্যারে প্রতিটি এন্ট্রি জন্য callback বলা হয়, যাতে, স্পারস অ্যারে অস্তিত্বহীন এন্ট্রি skipping। যদিও আমি শুধুমাত্র উপরের একটি যুক্তি ব্যবহার করেছি, কলব্যাকটি তিনটি দিয়ে বলা হয়েছে: প্রতিটি এন্ট্রির মান, সেই এন্ট্রির সূচী এবং আপনি যে অ্যারেটি পুনরাবৃত্তি করছেন তার একটি রেফারেন্স (যদি আপনার ফাংশনটি ইতিমধ্যে এটি কার্যকর না থাকে )।

আপনি IE8 এর মতো অপ্রচলিত ব্রাউজারগুলি সমর্থন করছেন না (সেপ্টেম্বর ২016 এ এই লেখার সাথে নেটপৃসগুলি 4% এরও বেশি বাজার ভাগে দেখায়), আপনি আনন্দের সাথে একটি সাধারণ উদ্দেশ্য ওয়েব পৃষ্ঠাতে কোনও শিম ছাড়া ব্যবহার করতে পারেন। যদি আপনি অপ্রচলিত ব্রাউজারগুলিকে সমর্থন করতে চান তবে forEach / forEach জন্য সহজেই সম্পন্ন করা হয় (বিভিন্ন বিকল্পগুলির জন্য "es5 shim" অনুসন্ধান করুন)।

forEach এমন সুবিধা রয়েছে যা আপনাকে forEach সূচী এবং মূল্যের পরিবর্তনগুলি ঘোষণা করতে হবে না, কারণ এটি পুনরাবৃত্তি ফাংশনে আর্গুমেন্ট হিসাবে সরবরাহ করা হয় এবং তাই ঠিক সেই পুনরাবৃত্তিটির জন্য চমত্কারভাবে বদ্ধ।

আপনি প্রতিটি অ্যারে এন্ট্রি জন্য একটি ফাংশন কল করার রানটাইম খরচ সম্পর্কে চিন্তিত হন, না হন; blog.niftysnippets.org/2012/02/foreach-and-runtime-cost.html

উপরন্তু, forEach জন্য "সব তাদের মাধ্যমে লুপ" ফাংশন, কিন্তু ES5 অনেক অন্যান্য দরকারী "অ্যারে মাধ্যমে আপনার উপায় কাজ এবং কাজ করে" ফাংশন সংজ্ঞায়িত, সহ:

  • every (প্রথমবার looping বন্ধ কলব্যাক false বা কিছু false )
  • some (কলব্যাকটি true বা কিছু সত্যতা ফেরত দেওয়ার সময় প্রথমবার লুপ করে)
  • filter (ফিল্টার ফাংশনটি true ফিরিয়ে দেয় এমন উপাদানগুলি সহ একটি নতুন অ্যারে তৈরি করে এবং মিথ্যাগুলি ফেরত দেয় এমনগুলি বাদ দেয়)
  • map (কলব্যাক দ্বারা ফেরত মান থেকে একটি নতুন অ্যারে তৈরি করে)
  • reduce (বার বার কলব্যাক কল করে, পূর্বের মানগুলি পাশ করে একটি মান তৈরি করে; বিস্তারিত জানার জন্য স্পেকটি দেখুন; অ্যারের সামগ্রীগুলি এবং অন্যান্য অনেকগুলি সামগ্রী সমষ্টিবদ্ধ করার জন্য দরকারী)
  • reduce reduceRight (যেমন reduce , কিন্তু ঊর্ধ্বমুখী ক্রম চেয়ে নেমে কাজ করে)

2. লুপ for একটি সহজ ব্যবহার করুন

কখনও কখনও পুরানো উপায় সেরা হয়:

var index;
var a = ["a", "b", "c"];
for (index = 0; index < a.length; ++index) {
    console.log(a[index]);
}

অ্যারের দৈর্ঘ্য লুপের সময় পরিবর্তন হবে না এবং এটি পারফরম্যান্স-সংবেদনশীল কোড (অসম্ভাব্য) এর মধ্যে, দৈর্ঘ্যটিকে সামনের দিকে ধরে রাখার সামান্য জটিল সংস্করণটি একটি ক্ষুদ্র বিট দ্রুত হতে পারে:

var index, len;
var a = ["a", "b", "c"];
for (index = 0, len = a.length; index < len; ++index) {
    console.log(a[index]);
}

এবং / অথবা পিছনে গণনা:

var index;
var a = ["a", "b", "c"];
for (index = a.length - 1; index >= 0; --index) {
    console.log(a[index]);
}

কিন্তু আধুনিক জাভাস্ক্রিপ্ট ইঞ্জিনের সাথে, এটি আপনাকে বিরল রসের শেষ বিটটি বের করতে হবে।

ES2015 এবং তারপরে, আপনি আপনার সূচী এবং মান ভেরিয়েবলকে লুপের for স্থানীয় করতে পারেন:

let a = ["a", "b", "c"];
for (let index = 0; index < a.length; ++index) {
    let value = a[index];
}
//console.log(index); // Would cause "ReferenceError: index is not defined"
//console.log(value); // Would cause "ReferenceError: value is not defined"

এবং যখন আপনি এটি করেন, কেবল value নয় তবে প্রতিটি লুপ পুনরাবৃত্তির জন্য index পুনঃনির্মিত করা হয়, অর্থাত লুপ শরীরের মধ্যে বন্ধ হওয়াগুলি যে নির্দিষ্ট পুনরাবৃত্তির জন্য তৈরি index (এবং value ) -এর একটি রেফারেন্স রাখে:

let divs = document.querySelectorAll("div");
for (let index = 0; index < divs.length; ++index) {
    divs[index].addEventListener('click', e => {
        alert("Index is: " + index);
    });
}

যদি আপনার পাঁচটি ডিভিস থাকে, তবে আপনি যদি "প্রথমটি ক্লিক করেন তবে" সূচী: 0 "পেতে পারেন এবং যদি আপনি শেষ ক্লিক করেন তবে" সূচী: 4 "হয়। আপনি পরিবর্তে var পরিবর্তে ব্যবহার যদি এই কাজ করে না

3. সঠিকভাবে for-in ব্যবহার করুন

আপনি মানুষকে for-in ব্যবহার করার for-in আপনাকে বলবেন, কিন্তু এর for-in কি দরকার তা নয়for-in একটি বস্তুর সংখ্যাবৃদ্ধি বৈশিষ্ট্য মাধ্যমে loops, একটি অ্যারের সূচী নয়। আদেশ নিশ্চিত করা হয় না এমনকি ES2015 (ES6) তেও না। ES2015 বৈশিষ্ট্যগুলিকে অবজেক্ট করার জন্য একটি ক্রম সংজ্ঞায়িত করে ( [[OwnPropertyKeys]] , [[OwnPropertyKeys]] , এবং বস্তুগুলি যা তাদের Object.getOwnPropertyKeys ব্যবহার করে) সংজ্ঞায়িত করে তবে এটি সেই ক্রম অনুসরণ করবে তা নির্ধারণ করে না । ( এই অন্যান্য উত্তর বিস্তারিত।)

এখনও, এটি বিশেষভাবে স্পারস অ্যারেগুলির জন্য উপযোগী হতে পারে, যদি আপনি উপযুক্ত সুরক্ষাগুলি ব্যবহার করেন:

// `a` is a sparse array
var key;
var a = [];
a[0] = "a";
a[10] = "b";
a[10000] = "c";
for (key in a) {
    if (a.hasOwnProperty(key)  &&        // These are explained
        /^0$|^[1-9]\d*$/.test(key) &&    // and then hidden
        key <= 4294967294                // away below
        ) {
        console.log(a[key]);
    }
}

দুটি চেক নোট করুন:

  1. বস্তুটির নামের দ্বারা নিজস্ব সম্পত্তি থাকে (এটি তার প্রোটোটাইপ থেকে উত্তরাধিকারী নয়) এবং

  2. কীটি তার স্বাভাবিক স্ট্রিং ফর্মের বেস -10 সংখ্যাসূচক স্ট্রিং এবং এর মান <= 2 ^ 32 - 2 (যা 4,294,967,294)। কোথায় যে নম্বর থেকে আসে? এটি স্পেসিফিকেশন একটি অ্যারে সূচক সংজ্ঞা অংশ। অন্যান্য সংখ্যা (অ-পূর্ণসংখ্যা, নেতিবাচক সংখ্যা, 2 ^ 32 - 2 এর চেয়ে বড় সংখ্যা) অ্যারে সূচী নয়। এটি 2 ^ 32 - 2 এর কারণ যা সর্বাধিক সূচক মানকে 2 ^ 32 - 1 এর চেয়ে কম করে তোলে, যা একটি অ্যারের length সর্বাধিক মান হতে পারে। (উদাহরণস্বরূপ, একটি অ্যারের দৈর্ঘ্য একটি 32-বিট স্বাক্ষরিত পূর্ণসংখ্যার মধ্যে ফিট করে।) ( আমার ব্লগ পোস্টে মন্তব্য করার জন্য RobG এ প্রোপস করে যে আমার পূর্ববর্তী পরীক্ষাটি বেশ সঠিক ছিল না।)

এটি বেশিরভাগ অ্যারেগুলিতে প্রতি লুপ পুনরাবৃত্তি সম্পর্কিত একটি ছোট্ট বিট, তবে যদি আপনার একটি স্পারস অ্যারে থাকে তবে এটি লুপের জন্য আরও কার্যকরী উপায় হতে পারে কারণ এটি আসলে বিদ্যমান এমন এন্ট্রিগুলির জন্য লুকিয়ে থাকে। উদাহরণস্বরূপ, উপরে অ্যারের জন্য, আমরা মোট তিনবার লুপ করি (কীসের জন্য "0" , "10" এবং "10000" - মনে রাখবেন, তারা স্ট্রিং), 10,001 বার নয়।

এখন, আপনি যে প্রত্যেক সময় লিখতে চাইবেন না, তাই আপনি এটি আপনার টুলকিটের মধ্যে রাখতে পারেন:

function arrayHasOwnIndex(array, prop) {
    return array.hasOwnProperty(prop) && /^0$|^[1-9]\d*$/.test(prop) && prop <= 4294967294; // 2^32 - 2
}

এবং তারপর আমরা এটি ব্যবহার করবো:

for (key in a) {
    if (arrayHasOwnIndex(a, key)) {
        console.log(a[key]);
    }
}

অথবা যদি আপনি শুধুমাত্র "বেশিরভাগ ক্ষেত্রেই যথেষ্ট" পরীক্ষার জন্য আগ্রহী হন তবে আপনি এটি ব্যবহার করতে পারেন, তবে এটি বন্ধ থাকার সময়, এটি পুরোপুরি সঠিক নয়:

for (key in a) {
    // "Good enough" for most cases
    if (String(parseInt(key, 10)) === key && a.hasOwnProperty(key)) {
        console.log(a[key]);
    }
}

4. for-of ব্যবহার করুন (নিখরচায় একটি থালা ব্যবহার করুন) (ES2015 +)

ES2015 জাভাস্ক্রিপ্ট এ iterators যোগ করে। এটিরেটর ব্যবহার করার সবচেয়ে সহজ উপায় হল নতুন বিবৃতি। এটা দেখে মনে হচ্ছে:

var val;
var a = ["a", "b", "c"];
for (val of a) {
    console.log(val);
}

আউটপুট:

a
b
c

কভারের অধীনে, এটি অ্যারে থেকে একটি ইনিশিয়েটর পায় এবং এর মধ্য দিয়ে loops, এটি থেকে মান পেয়ে। এতে ইস্যুটি ব্যবহার করার সমস্যা নেই কারণ এটি বস্তু (অ্যারে) দ্বারা সংজ্ঞায়িত একটি ইটারারেটর ব্যবহার করে এবং অ্যারেগুলি সংজ্ঞায়িত করে যে তাদের ইথারেটর তাদের এন্ট্রি (তাদের বৈশিষ্ট্যগুলি) দ্বারা পুনরাবৃত্তি করে না। ইএস 5 for-in ইন for-in মত, এন্ট্রি পরিদর্শন করার ক্রমটি তাদের সূচকের সাংখ্যিক ক্রম।

5. স্পষ্টভাবে একটি ইনিশিয়েটার ব্যবহার করুন (ES2015 +)

কখনও কখনও, আপনি স্পষ্টভাবে একটি iterator ব্যবহার করতে চান। আপনি এটা করতে পারেন, অত্যধিক, যদিও এটি এর চেয়ে অনেক ক্লাঙ্কার। এটা দেখে মনে হচ্ছে:

var a = ["a", "b", "c"];
var it = a.values();
var entry;
while (!(entry = it.next()).done) {
    console.log(entry.value);
}

Iterator স্পেসিফিকেশনে ইটারটার সংজ্ঞা সাথে মেলে একটি বস্তু। এটির next পদ্ধতিটি যখন আপনি এটি কল করেন তখন একটি নতুন ফলাফল বস্তু প্রদান করে। ফলাফল বস্তুর একটি সম্পত্তি আছে, done কিনা তা আমাদের বলা হয়েছে, এবং যে পুনরাবৃত্তি জন্য value সঙ্গে একটি সম্পত্তি value । ( done হলে এটি ঐচ্ছিক হলে false , value ঐচ্ছিক হলে এটি undefined ।)

value মানে ইটারেটরের উপর নির্ভর করে পরিবর্তিত হয়; অ্যারে সমর্থন করে (অন্তত) তিনটি ফাংশন যা এটিরেটরগুলি ফেরত দেয়:

  • values() : আমি উপরে ব্যবহৃত এক। এটি একটি ইটারারেটর প্রদান করে যেখানে প্রতিটি value সেই পুনরাবৃত্তির জন্য অ্যারে এন্ট্রি (উদাহরণস্বরূপ "a" , "b" এবং "c" )।
  • keys() : একটি পুনরাবৃত্তিকে ফেরত দেয় যেখানে প্রতিটি value সেই পুনরাবৃত্তিটির জন্য কী (তাই আমাদের উপরে, "0" , "1" , তারপর "2" )।
  • entries() : একটি পুনরাবৃত্তিকে ফেরত দেয় যেখানে প্রতিটি value ফর্মের [key, value] array [key, value] ফর্মের একটি অ্যারে হয়।

অ্যারে-লাইক অবজেক্টস জন্য

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

অ্যারে জন্য উপরের বিকল্প ব্যবহার করুন

কমপক্ষে কিছু, এবং সম্ভবত সর্বাধিক বা এমনকি সব, অ্যারের পন্থাগুলির উপরে ঘন ঘন অ্যারে-এর মত সমানভাবে প্রয়োগ করে:

  1. forEach এবং সম্পর্কিত (ES5 +) জন্য ব্যবহার করুন

    Array.prototype এ বিভিন্ন ফাংশন "ইচ্ছাকৃতভাবে জেনেরিক" এবং Function#call বা Function#apply মাধ্যমে সাধারণত অ্যারের মতো বস্তুর উপর ব্যবহার করা যেতে Function#apply । (এই উত্তরটি শেষে হোস্ট-সরবরাহকৃত বস্তুর জন্য ক্যাভিটটি দেখুন, তবে এটি একটি বিরল সমস্যা।)

    ধরুন আপনি কোনও Node forEach Node সম্পত্তি ব্যবহার করতে চান। তুমি এটা করবে

    Array.prototype.forEach.call(node.childNodes, function(child) {
        // Do something with `child`
    });
    

    আপনি যদি অনেক কিছু করতে যাচ্ছেন তবে আপনি পুনঃব্যবহারের জন্য একটি পরিবর্তনশীল রূপে ফাংশন রেফারেন্সের অনুলিপি দখল করতে পারেন, উদাহরণস্বরূপ:

    // (This is all presumably in some scoping function)
    var forEach = Array.prototype.forEach;
    
    // Then later...
    forEach.call(node.childNodes, function(child) {
        // Do something with `child`
    });
    
  2. লুপ for একটি সহজ ব্যবহার করুন

    স্পষ্টতই, লুপের for একটি সহজ অ্যারের মতো বস্তুর ক্ষেত্রে প্রযোজ্য।

  3. সঠিকভাবে for-in ব্যবহার করুন

    অ্যারের সাথে একই সুরক্ষা রক্ষার জন্য অ্যারের মতো বস্তুর সাথেও কাজ করা উচিত; হোস্ট-সরবরাহকৃত বস্তুর জন্য # 1 উপরে ক্যাভিট প্রয়োগ করতে পারে।

  4. এর for-of ব্যবহার করুন (নিখরচায় একটি ইটারেটার ব্যবহার করুন) (ES2015 +)

    for-of বস্তুটি সরবরাহ করা ইটারারটার ব্যবহার করবে (যদি থাকে); আমরা বিভিন্ন অ্যারের মত বস্তু, বিশেষ করে হোস্ট-প্রদান বেশী সঙ্গে কিভাবে খেলা দেখতে হবে। উদাহরণস্বরূপ, NodeList থেকে querySelectorAll স্পেসিফিকেশনটি পুনরাবৃত্তি সমর্থন করার জন্য আপডেট করা হয়েছিল। HTMLCollection থেকে HTMLCollection জন্য স্পেক ছিল না।

  5. স্পষ্টভাবে একটি থালা ব্যবহার করুন (ES2015 +)

    দেখুন # 4, আমরা দেখতে হবে কিভাবে iterators খেলা আউট।

একটি সত্য অ্যারে তৈরি করুন

অন্য বার, আপনি একটি অ্যারের মত বস্তু একটি সত্য অ্যারে রূপান্তর করতে চান। যে করছেন আশ্চর্যজনক সহজ:

  1. অ্যারের slice পদ্ধতি ব্যবহার করুন

    আমরা অ্যারের slice পদ্ধতিটি ব্যবহার করতে পারি, যা উপরে বর্ণিত অন্যান্য পদ্ধতির মতো "ইচ্ছাকৃতভাবে জেনেরিক" এবং তাই অ্যারের মতো বস্তুর সাথে ব্যবহার করা যেতে পারে:

    var trueArray = Array.prototype.slice.call(arrayLikeObject);
    

    উদাহরণস্বরূপ, উদাহরণস্বরূপ, যদি আমরা একটি NodeList একটি সত্য অ্যারে রূপান্তর করতে চাই তবে আমরা এটি করতে পারি:

    var divs = Array.prototype.slice.call(document.querySelectorAll("div"));
    

    নিচে হোস্ট-সরবরাহকৃত বস্তুর জন্য ক্যাভিট দেখুন। বিশেষ করে, নোট করুন যে এটি IE8 এবং এর আগে ব্যর্থ হবে, যা আপনাকে হোস্ট-সরবরাহকৃত বস্তুগুলি এমনভাবে ব্যবহার করতে দেয় না।

  2. স্প্রেড সিনট্যাক্স ব্যবহার করুন ( ... )

    ES2015 এর স্প্রেড সিনট্যাক্স ব্যবহার করাও জাভাস্ক্রিপ্ট ইঞ্জিনগুলির সাথে এই বৈশিষ্ট্যটিকে সমর্থন করে:

    var trueArray = [...iterableObject];
    

    উদাহরণস্বরূপ, উদাহরণস্বরূপ, যদি আমরা একটি NodeList একটি সত্য অ্যারে রূপান্তর করতে চাই, স্প্রেড সিনট্যাক্সের সাথে এটি বেশ NodeList হয়:

    var divs = [...document.querySelectorAll("div")];
    
  3. Array.from (spec) ব্যবহার করুন (MDN)

    Array.from (ES2015 +, কিন্তু সহজেই পলিফিল্ড) অ্যারের মতো বস্তুর থেকে একটি অ্যারে তৈরি করে, প্রথমত একটি ম্যাপিং ফাংশনের মাধ্যমে এন্ট্রিগুলি পাস করে। তাই:

    var divs = Array.from(document.querySelectorAll("div"));
    

    অথবা যদি আপনি প্রদত্ত শ্রেণির উপাদানগুলির ট্যাগ নামগুলির একটি অ্যারে পেতে চান তবে আপনি ম্যাপিং ফাংশনটি ব্যবহার করবেন:

    // Arrow function (ES2015):
    var divs = Array.from(document.querySelectorAll(".some-class"), element => element.tagName);
    
    // Standard function (since `Array.from` can be shimmed):
    var divs = Array.from(document.querySelectorAll(".some-class"), function(element) {
        return element.tagName;
    });
    

হোস্ট-প্রদান বস্তুর জন্য ক্যাভিট

যদি আপনি হোস্ট-প্রদান করা অ্যারে-মতো বস্তুগুলির সাথে Array.prototype ফাংশন ব্যবহার করেন (DOM তালিকা এবং জাভাস্ক্রিপ্ট ইঞ্জিনের পরিবর্তে ব্রাউজার দ্বারা সরবরাহিত অন্যান্য জিনিসগুলি), হোস্ট-সরবরাহ করা নিশ্চিত করার জন্য আপনাকে আপনার লক্ষ্য পরিবেশগুলিতে পরীক্ষা করা নিশ্চিত করতে হবে বস্তু সঠিকভাবে আচরণ করে। বেশিরভাগই সঠিকভাবে আচরণ করে (এখন), তবে এটি পরীক্ষা করা গুরুত্বপূর্ণ। কারণটি হ'ল Array.prototype পদ্ধতিগুলির বেশিরভাগই হোস্ট-সরবরাহকৃত বস্তুর উপর নির্ভর করতে চান যা বিমূর্ত [[HasProperty]] ক্রিয়াকলাপটির একটি সৎ উত্তর দেয়। এই লেখার হিসাবে, ব্রাউজারগুলি এটির একটি খুব ভাল কাজ করে, কিন্তু 5.1 স্পেক্টটি হোস্ট-সরবরাহকৃত বস্তুটি সৎ হতে পারে এমন সম্ভাবনাটির জন্য অনুমতি দেয় না। এটা §8.6.2 এর মধ্যে, সেই বিভাগের শুরুতে বড় টেবিলের নিচে অনেক অনুচ্ছেদ রয়েছে), যেখানে এটি বলে:

অন্যথায় নির্দিষ্ট না হওয়া পর্যন্ত হোস্ট অবজেক্টগুলি এই অভ্যন্তরীণ পদ্ধতিগুলি কোনওভাবে কার্যকর করতে পারে; উদাহরণস্বরূপ, এক সম্ভাবনা হল যে [[Get]] এবং [[Put]] কোন নির্দিষ্ট হোস্ট অবজেক্টের জন্য প্রকৃতপক্ষে সম্পত্তি মান সংগ্রহ করে এবং সঞ্চয় করে তবে [[HasProperty]] সর্বদা মিথ্যা উত্পন্ন করে

(আমি ES2015 স্পেসে সমতুল্য শব্দবিন্যাস খুঁজে পাচ্ছি না, তবে এটি এখনও বজায় রাখা।) আবার, এই লেখাটি আধুনিক ব্রাউজারগুলিতে সাধারণ হোস্ট-প্রদান করা অ্যারের মতো বস্তুগুলি [উদাহরণস্বরূপ, NodeList উদাহরণগুলি] [[HasProperty]] সঠিকভাবে পরিচালনা করুন, কিন্তু পরীক্ষা করা গুরুত্বপূর্ণ।)


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]

এই দরকারী হবে আশা করি।


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

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

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

পেশাদাররা:

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

কনস:

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


এটি অ-স্পার্স তালিকার জন্য একটি ইটারারেটর যেখানে সূচীটি 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];
    ...
}

jQuery উপায় ব্যবহার করে $.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];

আপনার ধারণাটির সবচেয়ে কাছের একটি উপায় 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]

আপনি একটি বৃহদায়তন অ্যারে আছে যদি আপনি 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


আমি জানি এটি একটি পুরানো পোস্ট, এবং ইতিমধ্যে অনেক মহান উত্তর আছে। একটু বেশি পরিপূর্ণতার জন্য আমি অনুমান করেছি যে আমি 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সেই খারাপ ছেলেটিকে নিক্ষেপ করুন ।


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

বিরতি কোন অন্তর্নিহিত ক্ষমতা নেই forEach। মৃত্যুদণ্ড কার্যকর করার জন্য Array#someনিচের মত ব্যবহার করুন :

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

এটি কাজ করে কারণ someকলব্যাকগুলি যত তাড়াতাড়ি সম্ভব ফেরত পাঠায়, অ্যারে ক্রমের মধ্যে মৃত্যুদন্ড কার্যকর করা হয়, সত্যকে ফেরত দেয়, বাকিগুলি কার্যকর করার স্বল্প-সার্কিট করে। আসল উত্তর some জন্য অ্যারে প্রোটোটাইপ দেখুনsome


সম্ভবত 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
//!!!

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







iteration