কীভাবে jQuery এ অ্যারে মাধ্যমে লুপ করবেন?


234

আমি একটি অ্যারের মাধ্যমে লুপ করার চেষ্টা করছি। আমার কাছে নিম্নলিখিত কোড রয়েছে:

 var currnt_image_list= '21,32,234,223';
 var substr = currnt_image_list.split(','); // array here

আমি অ্যারের থেকে সমস্ত ডেটা বের করার চেষ্টা করছি। দয়া করে কেউ আমাকে সঠিক পথে নিয়ে যেতে পারে?

উত্তর:


516

(আপডেট: আমার অন্য উত্তরটি এখানে নন-জিকুয়েরি বিকল্পগুলি আরও পুঙ্খানুপুঙ্খভাবে পেশ করে below নীচের তৃতীয় বিকল্পটি jQuery.eachযদিও এতে নেই))


চারটি বিকল্প:

জেনেরিক লুপ:

var i;
for (i = 0; i < substr.length; ++i) {
    // do something with `substr[i]`
}

বা ES2015 + এ:

for (let i = 0; i < substr.length; ++i) {
    // do something with `substr[i]`
}

সুবিধাগুলি : সোজা-এগিয়ে, jQuery এর উপর নির্ভরতা নেই, বোঝা সহজ, thisলুপের দেহের অভ্যন্তরের অর্থ সংরক্ষণের সাথে কোনও সমস্যা নেই, ফাংশন কলগুলির কোনও অপ্রয়োজনীয় ওভারহেড নেই (উদাহরণস্বরূপ, তাত্ত্বিকভাবে দ্রুত, যদিও আপনাকে আসলে করতে হবে প্রতিক্রিয়াগুলি এমন যে আপনার অন্যান্য সমস্যাও থাকতে পারে তা রয়েছে; বিশদ )।

ES5 এর forEach:

ECMAScript5 হিসাবে, অ্যারেগুলির মধ্যে একটি forEachফাংশন রয়েছে যা অ্যারের মাধ্যমে লুপ করা সহজ করে:

substr.forEach(function(item) {
    // do something with `item`
});

দস্তাবেজের লিঙ্ক

(দ্রষ্টব্য: কেবলমাত্র নয়, প্রচুর অন্যান্য ক্রিয়াকলাপ রয়েছে forEach; বিশদের জন্য উপরে বর্ণিত উত্তরটি দেখুন ))

সুবিধাগুলি : ঘোষিত, পুনরুক্তকারীটির জন্য প্রাক-বিল্ট ফাংশনটি ব্যবহার করতে পারে যদি আপনার এক হাত থাকে, যদি আপনার লুপ বডি জটিল হয় তবে কোনও ফাংশন কলের স্কোপিং কখনও কখনও কার্যকর হয়, আপনার ধারণাগত স্কোপটিতে iভেরিয়েবলের প্রয়োজন হয় না।

অসুবিধেও : আপনি ব্যবহার করেন, তাহলে thisধারণকারী কোডে এবং আপনি ব্যবহার করতে চান thisআপনার মধ্যে forEachকলব্যাক, আপনি হয় একটি আছে) স্টিক এটি একটি পরিবর্তনশীল আপনি ফাংশন মধ্যে এটি ব্যবহার করতে পারেন তাই হয়, বি) একটি দ্বিতীয় আর্গুমেন্ট হিসাবে এটা পাস forEachতাই forEachএটি thisকলব্যাকের সময় হিসাবে সেট করে , বা সি) একটি ES2015 + তীর ফাংশন ব্যবহার করুন যা বন্ধ হয়ে যায় this। আপনি ঐ জিনিস এক না করলে, কলব্যাক মধ্যে thisহতে হবে undefinedবা বিশ্বব্যাপী বস্তু ((কঠোর মোডে) window) আলগা মোডে আছে। এখানে দ্বিতীয় অসুবিধা forEachছিল যা সর্বজনীনভাবে সমর্থিত ছিল না, তবে এখানে 2018 এ, আপনি যে একমাত্র ব্রাউজারটি চালাতে যাচ্ছেন তা নয় forEachIE8 (এবং এটি সঠিকভাবে হতে পারে না) সেখানে পলিফিল্ড হয়)।

ES2015 + এর for-of:

for (const s of substr) { // Or `let` if you want to modify it in the loop body
    // do something with `s`
}

কীভাবে এটি কাজ করে তার বিশদ জন্য এই উত্তরের উপরে লিঙ্কিত উত্তর দেখুন।

সুবিধা : সরল, সোজা, অ্যারে থেকে প্রবেশের জন্য একটি অন্তর্ভুক্ত-স্কোপ ভেরিয়েবল (বা উপরের ধ্রুবক) সরবরাহ করে।

অসুবিধাগুলি : আইই এর কোনও সংস্করণে সমর্থিত নয়।

jQuery.each:

jQuery.each(substr, function(index, item) {
    // do something with `item` (or `this` is also `item` if you like)
});

( দস্তাবেজের লিঙ্ক )

সুবিধাগুলি : এর মতো একই সুবিধাগুলির সমস্ত forEach, এছাড়াও আপনি জানেন যে আপনি jQuery ব্যবহার করছেন তাই এটি রয়েছে।

অসুবিধাগুলি : আপনি যদি thisসমন্বিত কোডটি ব্যবহার করছেন তবে আপনাকে এটি একটি পরিবর্তনশীলতে আটকে রাখতে হবে যাতে আপনি এটি ফাংশনটির মধ্যেই ব্যবহার করতে পারেন, কারণ thisফাংশনের অভ্যন্তরে অন্য কোনও মানে।

আপনি thisযদিও এটিকে ব্যবহার করে এড়াতে পারবেন $.proxy:

jQuery.each(substr, $.proxy(function(index, item) {
    // do something with `item` (`this` is the same as it was outside)
}, this));

... বা Function#bind:

jQuery.each(substr, function(index, item) {
    // do something with `item` (`this` is the same as it was outside)
}.bind(this));

... বা ES2015 ("ES6") এ, একটি তীর ফাংশন:

jQuery.each(substr, (index, item) => {
    // do something with `item` (`this` is the same as it was outside)
});

কি না কি করতে হবে:

এরfor..in জন্য ব্যবহার করবেন না (বা যদি করেন তবে এটি যথাযথ সুরক্ষার সাহায্যে করুন)। আপনি লোককে বলতে দেখবেন (বাস্তবে, সংক্ষিপ্তভাবে এখানে একটি উত্তর ছিল যা বলা হয়েছিল), তবে for..inবহু লোক যা মনে করে তা করে না (এটি আরও কার্যকর কিছু করে!)। বিশেষত, for..inকোনও বস্তুর অগণিত সম্পত্তির নাম (কোনও অ্যারের সূচকগুলি নয়) দ্বারা লুপ হয়। যেহেতু অ্যারেগুলি অবজেক্টস এবং ডিফল্টরূপে কেবলমাত্র তাদের অগণিত বৈশিষ্ট্যগুলি সূচকগুলি হয়, তাই এটি বেশিরভাগ ক্ষেত্রে একটি বেল্ট মোতায়নের ক্ষেত্রে সাজানোর কাজ বলে মনে হয়। তবে এটি নিরাপদ অনুমান নয় যে আপনি এটির জন্য এটি ব্যবহার করতে পারেন। এখানে একটি এক্সপ্লোরেশন: http://jsbin.com/exohi/3

আমার উপরের "না" নরম করা উচিত। যদি আপনি বিচ্ছিন্ন অ্যারেগুলি নিয়ে কাজ করে থাকেন (উদাহরণস্বরূপ, অ্যারেটিতে মোট 15 টি উপাদান রয়েছে তবে তাদের সূচকগুলি কোনও কারণে 0 থেকে 150,000 lengthঅবধি বিস্তৃত থাকে , এবং তাই এটি 150,001 হয়), এবং যদি আপনি যথাযথ সুরক্ষার মত ব্যবহার করেন hasOwnPropertyএবং পরীক্ষা করে থাকেন সম্পত্তির নামটি সত্যই সংখ্যাসূচক (উপরের লিঙ্কটি দেখুন), for..inপ্রচুর অপ্রয়োজনীয় লুপগুলি এড়ানোর জন্য একদম যুক্তিসঙ্গত উপায় হতে পারে, যেহেতু কেবল জনবহুল সূচকগুলি গণনা করা হবে।


অ্যারে ব্যবহার করে .each()বা for...inলুপ করা সাধারণভাবে একটি খারাপ ধারণা। এটি বয়স forবা ব্যবহারের চেয়ে ধীর গতির মতো while। একটি ব্যবহার for loopক্যাশে করার এটা এমনকি একটি মহান ধারণা lengthলুপিং সামনে সম্পত্তি। for (var i = 0, len = substr.length; i < len; ...
jAndy

@ জে অ্যান্ডি: আমি বিশ্বাস করি যে আমি গতি প্রথমটির একটি সুবিধা হিসাবে উল্লেখ করেছি। দৈর্ঘ্যটি ক্যাশে করা হচ্ছে, ওভারহেডের মূল্যবান হওয়ার জন্য এটি অবশ্যই সত্যই বড় অ্যারে হতে হবে, তবে ফর্সা 'নফ।
টিজে ক্রাউডার

1
@ মাইকপুরসেল: বা একটি তীর ফাংশন। বা Function#bind। :-) ভাল পয়েন্ট, যোগ করা হয়েছে।
টিজে ক্রাউডার

1
hmmmm

1
@ ডগস: না, কেবলমাত্র তার মধ্যে পার্থক্য i++এবং ++iসেই অভিব্যক্তিটির ফলাফল যা উপরের উদাহরণে কখনও ব্যবহৃত হয় না। একটি forলুপ এর মতো কাজ করে: ১. সূচনা, ২. পরীক্ষা (মিথ্যা হলে সমাপ্ত), ৩, দেহ, ৪. আপডেট, ৫. পদক্ষেপে ফিরে যান ২. আপডেট আপডেটের ফলাফলটি কোনও কিছুর জন্য ব্যবহৃত হয় না।
টিজে ক্রাউডার

75

jQuery.each ()

jQuery.each ()

jQuery.each(array, callback)

অ্যারে পুনরাবৃত্তি

jQuery.each(array, function(Integer index, Object value){});

বস্তু পুনরাবৃত্তি

jQuery.each(object, function(string propertyName, object propertyValue){});

উদাহরণ :

var substr = [1, 2, 3, 4];
$.each(substr , function(index, val) { 
  console.log(index, val)
});

var myObj = { firstName: "skyfoot"};
$.each(myObj, function(propName, propVal) {
  console.log(propName, propVal);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

জাভাস্ক্রিপ্ট অ্যারে জন্য লুপ

লুপ জন্য

for (initialExpression; condition; incrementExpression)
  statement

উদাহরণ

var substr = [1, 2, 3, 4];

//loop from 0 index to max index
for(var i = 0; i < substr.length; i++) {
  console.log("loop", substr[i])
}

//reverse loop
for(var i = substr.length-1; i >= 0; i--) {
  console.log("reverse", substr[i])
}

//step loop
for(var i = 0; i < substr.length; i+=2) {
  console.log("step", substr[i])
}

এ জন্য

//dont really wnt to use this on arrays, use it on objects
for(var i in substr) {
    console.log(substr[i]) //note i returns index
}

এর জন্য

for(var i of subs) {
    //can use break;
    console.log(i); //note i returns value
}

প্রতিটির জন্য

substr.forEach(function(v, i, a){
    //cannot use break;
    console.log(v, i, a);
})

সম্পদ

MDN লুপ এবং পুনরুক্তি


21

এখানে jquery প্রয়োজন নেই, কেবল একটি forলুপ কাজ করে:

var substr = currnt_image_list.split(',');
for(var i=0; i< substr.length; i++) {
  alert(substr[i]);
}

18

বিকল্প 1: traditional forতিহ্যগত-লুপ

অধিকার

একটি traditional forতিহ্যবাহী-লুপের তিনটি উপাদান রয়েছে:

  1. সূচনা: লুক ব্লকটি প্রথমবার কার্যকর হওয়ার আগেই কার্যকর করা হয়েছিল
  2. শর্ত: লুপ ব্লক কার্যকর হওয়ার আগে প্রতিবার একটি শর্ত পরীক্ষা করে এবং মিথ্যা হলে লুপটি ছেড়ে দেয়
  3. চিন্তাভাবনা: লুপ ব্লক কার্যকর হওয়ার পরে প্রতিবার সঞ্চালিত হয়

এই তিনটি উপাদান একটি ;প্রতীক দ্বারা একে অপরের থেকে পৃথক করা হয় । এই তিনটি উপাদানের প্রত্যেকটির জন্য সামগ্রীগুলি foralচ্ছিক , যার অর্থ নিম্নলিখিতটি সবচেয়ে ন্যূনতম- লুপ সম্ভব:

for (;;) {
    // Do stuff
}

অবশ্যই এটি চালানো বন্ধ করার জন্য আপনাকে লুপের মধ্যে একটি if(condition === true) { break; } বা অন্য কোনও if(condition === true) { return; }জায়গা অন্তর্ভুক্ত করতে হবে for

সাধারণত, যদিও সূচনাটি সূচক ঘোষণার জন্য ব্যবহৃত হয়, শর্তটি সেই সূচকে ন্যূনতম বা সর্বাধিক মানের সাথে তুলনা করতে ব্যবহৃত হয়, এবং উত্তরোত্তরটি সূচককে বাড়ানোর জন্য ব্যবহৃত হয়:

for (var i = 0, length = 10; i < length; i++) {
    console.log(i);
}

forএকটি অ্যারের মাধ্যমে লুপ করতে ট্রেডিশনাল-লুপ ব্যবহার করা

অ্যারের মাধ্যমে লুপ করার traditionalতিহ্যগত উপায়টি হ'ল:

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

অথবা, আপনি যদি পিছনের দিকে লুপ করতে পছন্দ করেন তবে আপনি এটি করুন:

for (var i = myArray.length - 1; i > -1; i--) {
    console.log(myArray[i]);
}

তবে অনেকগুলি সম্ভবনা রয়েছে যেমন যেমন। এইটা :

for (var key = 0, value = myArray[key], var length = myArray.length; key < length; value = myArray[++key]) {
    console.log(value);
}

... বা এই ...

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

... বা এটি:

var key = 0, value;
for (; value = myArray[key++];){ 
    console.log(value);
}

যেটি সবচেয়ে ভাল কাজ করে তা হ'ল মূলত উভয় ব্যক্তিগত স্বাদ এবং আপনি ব্যবহার করছেন এমন নির্দিষ্ট ব্যবহারের ক্ষেত্রে।

বিঃদ্রঃ :

এই সমস্ত পরিবর্তনের প্রতিটি পুরানোগুলি সহ সমস্ত ব্রাউজার দ্বারা সমর্থিত!


বিকল্প 2: whileলুপ

forআল-লুপের একটি বিকল্প হ'ল whileলুপ। একটি অ্যারের মাধ্যমে লুপ করতে, আপনি এটি করতে পারেন:

var key = 0;
while(value = myArray[key++]){
    console.log(value);
}
বিঃদ্রঃ :

forTraditional whileতিহ্যবাহী- লুপগুলির মতো , -লুপগুলি এমনকি ব্রাউজারগুলির সবচেয়ে পুরানো দ্বারা সমর্থিত।

এছাড়াও, প্রতিটি লুপকে একটি-লুপ হিসাবে forআবারও লেখা যায়। উদাহরণস্বরূপ, উপরে- whileলুপটি এই- forলুপের মতো ঠিক একই আচরণ করে :

for(var key = 0;value = myArray[key++];){
    console.log(value);
}

বিকল্প 3: for...inএবংfor...of

জাভাস্ক্রিপ্টে, আপনি এটিও করতে পারেন:

for (i in myArray) {
    console.log(myArray[i]);
}

এটি যত্ন সহ ব্যবহার করা উচিত, কারণ এটি forসমস্ত ক্ষেত্রে ট্রেডিটোনাল- লুপের মতো আচরণ করে না এবং এর সম্ভাব্য পার্শ্ব-প্রতিক্রিয়াগুলিও বিবেচনা করা দরকার। দেখুন কেন অ্যারে পুনরাবৃত্তির সাথে "জন্য ... ইন" ব্যবহার করা খারাপ ধারণা? আরো বিস্তারিত জানার জন্য.

এর বিকল্প হিসাবে for...in, এখন আরও রয়েছে for...of। নিম্নলিখিত উদাহরণটি একটি for...ofলুপ এবং লুপের মধ্যে পার্থক্য দেখায় for...in:

var myArray = [3, 5, 7];
myArray.foo = "hello";

for (var i in myArray) {
  console.log(i); // logs 0, 1, 2, "foo"
}

for (var i of myArray) {
  console.log(i); // logs 3, 5, 7
}
বিঃদ্রঃ :

আপনার এও বিবেচনা করা দরকার যে ইন্টারনেট এক্সপ্লোরারের কোনও সংস্করণ সমর্থন করে না for...of( এজ 12+ প্রযোজ্য) এবং এর for...inজন্য কমপক্ষে IE10 প্রয়োজন।


বিকল্প 4: Array.prototype.forEach()

For-লুপগুলির বিকল্প Array.prototype.forEach(), যা নিম্নলিখিত সিনট্যাক্স ব্যবহার করে:

myArray.forEach(function(value, key, myArray) {
    console.log(value);
});
বিঃদ্রঃ :

Array.prototype.forEach() সমস্ত আধুনিক ব্রাউজার, পাশাপাশি আই 9 + দ্বারা সমর্থিত।


বিকল্প 5: jQuery.each()

উল্লিখিত অন্য চারটি অপশনের পাশাপাশি, jQuery এরও নিজস্ব foreachভিন্নতা ছিল।

এটি নিম্নলিখিত বাক্য গঠন ব্যবহার করে:

$.each(myArray, function(key, value) {
    console.log(value);
});


7

JQuery ব্যবহার করুন each()। অন্যান্য উপায় আছে কিন্তু প্রতিটি এই উদ্দেশ্যে ডিজাইন করা হয়েছে।

$.each(substr, function(index, value) { 
  alert(value); 
});

এবং শেষ সংখ্যার পরে কমাটি রাখবেন না।


খুব সুন্দর সমাধান!
লর্ড নাইটন

3

আপনি একটি for()লুপ ব্যবহার করতে পারেন :

var things = currnt_image_list.split(','); 
for(var i = 0; i < things.length; i++) {
    //Do things with things[i]
}

3

তীর ফাংশন এবং সংযোগ সহ ES6 সিনট্যাক্স:

var data=["a","b","c"];
$(data).each((index, element) => {
        console.log(`current index : ${index} element : ${element}`)
    });

2

এটা চেষ্টা কর:

$.grep(array, function(element) {

})

1
ওহে! এটি কীভাবে ওপির সমস্যার সমাধান করে তা সম্পর্কে কিছু ব্যাখ্যা যুক্ত করুন। এটি কেবলমাত্র উত্তর পোস্ট করার জন্য এসওকে নিরুৎসাহিত করা হয় কারণ তারা ওপি বা ভবিষ্যতের দর্শকদের উত্তর বুঝতে সহায়তা করে না। ধন্যবাদ! - থেকে পর্যালোচনা।
d_kennetz

0

পার্শ্ব প্রতিক্রিয়া সহ অ্যারে / স্ট্রিংয়ের মাধ্যমে পুনরাবৃত্তির বিকল্প উপায়

var str = '21,32,234,223';
var substr = str.split(',');

substr.reduce((a,x)=> console.log('reduce',x), 0)        // return undefined

substr.every(x=> { console.log('every',x); return true}) // return true

substr.some(x=> { console.log('some',x); return false})  // return false

substr.map(x=> console.log('map',x));                    // return array
 
str.replace(/(\d+)/g, x=> console.log('replace',x))      // return string

আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.