jQuery মানচিত্র প্রতিটি বনাম


234

JQuery এ, mapএবং eachফাংশনগুলি একই জিনিসটি মনে করে। দুজনের মধ্যে কি কোনও ব্যবহারিক পার্থক্য রয়েছে? আপনি কখন অন্যটির পরিবর্তে একটি ব্যবহার করতে পছন্দ করবেন?


আরও দেখুন: stackoverflow.com/questions/3612320/...
ryenus

উত্তর:


268

eachপদ্ধতি একটি অপরিবর্তনীয় পুনরুক্তিকারীর, যেখানে হতে বোঝানো হয় mapপদ্ধতি একটি পুনরুক্তিকারীর হিসেবে ব্যবহার করা যাবে, কিন্তু সত্যিই সরবরাহকৃত অ্যারের নিপূণভাবে এবং একটি নতুন অ্যারে ফিরে বোঝানো হয়।

আরেকটি গুরুত্বপূর্ণ বিষয় লক্ষণীয় হ'ল eachফাংশনটি মূল অ্যারেটি ফেরত দেয় যখন mapফাংশনটি নতুন অ্যারে প্রদান করে। আপনি যদি মানচিত্রের ফাংশনটির রিটার্ন মানকে অতিরিক্ত ব্যবহার করেন তবে আপনি সম্ভাব্যভাবে প্রচুর স্মৃতি নষ্ট করতে পারেন।

উদাহরণ স্বরূপ:

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

$.each(items, function() {
  alert('this is ' + this);
});

var newItems = $.map(items, function(i) {
  return i + 1;
});
// newItems is [2,3,4,5]

আপনি অ্যারে থেকে কোনও আইটেম সরাতে মানচিত্রের ফাংশনটিও ব্যবহার করতে পারেন। উদাহরণ স্বরূপ:

var items = [0,1,2,3,4,5,6,7,8,9];

var itemsLessThanEqualFive = $.map(items, function(i) {
  // removes all items > 5
  if (i > 5) 
    return null;
  return i;
});
// itemsLessThanEqualFive = [0,1,2,3,4,5]

আপনি আরও নোট করবেন যে thisফাংশনটিতে ম্যাপ করা হয়নি map। আপনাকে কলব্যাকের প্রথম পরামিতি সরবরাহ করতে হবে (উদাহরণস্বরূপ আমরা iউপরে ব্যবহার করেছি )। হাস্যকরভাবে, প্রতিটি পদ্ধতিতে ব্যবহৃত কলব্যাক আর্গুমেন্টগুলি মানচিত্রের ফাংশনে কলব্যাক আর্গুমেন্টগুলির বিপরীত হয় তাই সাবধান হন।

map(arr, function(elem, index) {});
// versus 
each(arr, function(index, elem) {});

22
ভুল, মানচিত্র সরবরাহ করা অ্যারে পরিবর্তন করার জন্য নয়, এটি ইনপুট অ্যারে এবং ম্যাপিং ফাংশনের উপর ভিত্তি করে একটি নতুন অ্যারে ফিরিয়ে আনার অর্থ ।
আরুল

4
@Seb, প্রতিটি ফাংশনে আমার লিঙ্কটি পড়ুন, দ্বিতীয় অনুচ্ছেদ jQuery.Ech ফাংশনটি $ ()। প্রতিটি () এর মতো নয়।
bendewey

4
এছাড়াও মানচিত্র () ফেরত অ্যারে সমতল করুন
জর্জ মাউয়ার

3
কেন all .এচ এচ ব্যবহার করবেন?
ডেভ ভ্যান ডেন এয়েণ্ডে

6
@ ডেভভেনডেন ইন্দে যদি আপনি লুপের মাঝখানে ভাঙতে চান তবে ব্যবহার করুনreturn false;
ভগ্নেশ্বরান

93

1: কলব্যাক ফাংশনগুলিতে যুক্তিগুলি বিপরীত হয়।

.each()এর, $.each()'গুলি এবং .map()এর কলব্যাক ফাংশন সূচকে প্রথমে এবং তারপরে উপাদানটি নিয়ে যায়

function (index, element) 

$.map()এর কলব্যাক একই আর্গুমেন্ট আছে, কিন্তু বিপরীত

function (element, index)

2: .each(),, $.each()এবং এর .map()সাথে বিশেষ কিছু করুনthis

each()ফাংশনটিকে এমনভাবে কল করে thisযা বর্তমান উপাদানটির দিকে নির্দেশ করে। বেশিরভাগ ক্ষেত্রে, আপনার কলব্যাক ফাংশনে দুটি যুক্তিও লাগবে না।

function shout() { alert(this + '!') }

result = $.each(['lions', 'tigers', 'bears'], shout)

// result == ['lions', 'tigers', 'bears']

জন্য পরিবর্তনশীল বৈশ্বিক জানালা বস্তুর বোঝায়।$.map()this

3: map()কলব্যাকের রিটার্ন মান সহ বিশেষ কিছু করে

map()প্রতিটি উপাদানগুলিতে ফাংশনটি কল করে এবং ফলাফলটি একটি নতুন অ্যারেতে সঞ্চয় করে, যা এটি ফিরে আসে। আপনার সাধারণত কলব্যাক ফাংশনে প্রথম যুক্তি ব্যবহার করা দরকার।

function shout(el) { return el + '!' }

result = $.map(['lions', 'tigers', 'bears'], shout)

// result == ['lions!', 'tigers!', 'bears!']

function shout() { alert(this + '!') } result = $.each(['lions', 'tigers', 'bears'], shout)একটি ভুল ফলাফল উত্পাদন এটি আপনার উত্তর বিপরীতে !! jsfiddle.net/9zy2pLev
হেমন্ত

@ হেমন্ত সবেমাত্র ক্রোমে ফ্রিডলটি পরীক্ষা করেছে এবং দেখে মনে হচ্ছে এটি ঠিক আছে। তিনটি সতর্কতা কথোপকথন রয়েছে ('সিংহ!', 'বাঘ!', 'ভালুক!') এবং শেষেresult === ['lions', 'tigers', 'bears']
প্যাট্রিক ম্যাকএলানি

22

eachএকটি অ্যারের উপর ফাংশন iterates প্রতি উপাদান একবার সরবরাহকৃত ফাংশন কলিং, এবং সেটিং thisসক্রিয় উপাদান। এই:

function countdown() {
    alert(this + "..");
}

$([5, 4, 3, 2, 1]).each(countdown);

সতর্ক করে দেবে 5..তারপর 4..তারপর 3..তারপর 2..তারপর1..

অন্যদিকে মানচিত্র একটি অ্যারে নেয় এবং ফাংশন দ্বারা পরিবর্তিত প্রতিটি উপাদান সহ একটি নতুন অ্যারে প্রদান করে। এই:

function squared() {
    return this * this;
}

var s = $([5, 4, 3, 2, 1]).map(squared);

এর সত্তা হতে হবে [25, 16, 9, 4, 1]


18

আমি এটি দ্বারা এটি বুঝতে পেরেছি :

function fun1() {
    return this + 1;
}
function fun2(el) {
    return el + 1;
}

var item = [5,4,3,2,1];

var newitem1 = $.each(item, fun1);
var newitem2 = $.map(item, fun2);

console.log(newitem1); // [5, 4, 3, 2, 1] 
console.log(newitem2); // [6, 5, 4, 3, 2] 

সুতরাং, " প্রতিটি " ফাংশন মূল অ্যারেটি ফেরত দেয় যখন " মানচিত্র " ফাংশনটি একটি নতুন অ্যারে প্রদান করে


0
var intArray = [1, 2, 3, 4, 5];
//lets use each function
$.each(intArray, function(index, element) {
  if (element === 3) {
    return false;
  }
  console.log(element); // prints only 1,2. Breaks the loop as soon as it encountered number 3
});

//lets use map function
$.map(intArray, function(element, index) {
  if (element === 3) {
    return false;
  }
  console.log(element); // prints only 1,2,4,5. skip the number 3.
});

-1

আপনি অ্যারেতে কাজ করছেন যখন Jquery.map আরও বোধগম্য হয় কারণ এটি অ্যারেগুলি দিয়ে খুব ভাল সম্পাদন করে।

নির্বাচক আইটেমগুলির মাধ্যমে পুনরাবৃত্তি করার সময় Jquery.each সবচেয়ে ভাল ব্যবহৃত হয়। যা প্রমাণ করে যে মানচিত্রের ফাংশন কোনও নির্বাচক ব্যবহার করে না।

$(selector).each(...)

$.map(arr....)

যেমন আপনি দেখতে পাচ্ছেন, মানচিত্রটি নির্বাচকদের সাথে ব্যবহারের উদ্দেশ্যে নয়।


2
দুর্ভাগ্যক্রমে প্রতিটি ফাংশনটির নামকরণ করা হয়েছে ... প্রথমবার নয়, এবং শেষেরটিও নয় যে আমি একজনের সম্পর্কে জিজ্ঞাসা করছি
জেরেমি বি।

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