جاوااسکریپت یک زبان برنامه نویسی پویا است که همیشه در حال بهبود می‌باشد و هر سال ویژگی‌های جدیدی برای کدنویسی آسان‌تر و کارآمدتر به آن اضافه می‌گردد. این به‌روزرسانی‌ها به توسعه‌دهندگان کمک می‌کنند تا بتوانند کدهای تمیزتری بنویسند. اگر می‌خواهیم به عنوان یک توسعه‌دهنده پیشرو باشیم، مهم است که آخرین ویژگی‌های جاوااسکریپت را به خوبی یاد بگیریم.
در این مقاله قصد داریم تا در مورد برخی از ابزارها و متدهای جدیدی که برای آرایه در جاوااسکریپت معرفی شده‌اند، مانند findLast، toReversed، toSorted و غیره صحبت کنیم. این ویژگی‌ها به ما این امکان را می‌دهند تا آرایه‌ها و داده‌ها را به روش‌های هوشمندانه‌تری، بدون تغییر داده‌های اصلی دستکاری کنیم.
جاوااسکریپت متدهای مختلفی دارد که کار با آرایه‌ها را آسان‌تر می‌کند. آرایه‌ها فهرستی از آیتم‌ها هستند و ما اغلب باید این فهرست‌ها را جستجو، مرتب‌سازی یا به‌روزرسانی کنیم. متدهای قدیمی‌تر مانند push()، pop()، map() و filter() مفید بوده‌اند، اما گاهی اوقات می‌توانند داده‌های اصلی را تغییر دهند، و این ممکن است اتفاقی باشد که باعث ایجاد مشکلاتی در برنامه شود.
متدهای جدیدتر جاوااسکریپت گزینه‌های بهتری را برای مدیریت آرایه‌ها ارائه می‌دهند، به‌ویژه زمانی که نیاز داریم داده‌های اصلی را بدون تغییر نگه داریم. این متدهای جدید کدنویسی را قابل اطمینان‌تر و تمیزتر می‌کنند.
جدیدترین متدهای جاوااسکریپت راه‌های بیشتری برای کار با آرایه‌ها بدون تغییر لیست اصلی ارائه می‌دهند. این متدها، مانند findLast، toSorted و toReversed یک آرایه جدید ایجاد می‌کنند یا نتیجه را مستقیماً به ما می‌دهند و آرایه اصلی را به شکل دست نخورده نگه می‌دارند.
findLast()هنگام کار با آرایه‌ها، ممکن است بخواهیم آیتمی را جستجو کنیم که با شرایط خاصی مطابقت داشته باشد. متد قدیمی find() به ما کمک می‌کند تا اولین آیتم منطبق با شرط مورد نظر را دریافت کنیم، اما اگر ما آخرین آیتم منطبق با شرط مورد نظر را لازم داشته باشیم چه کاری باید انجام دهیم؟
برای انجام این کار می‌توانیم از متد findLast() استفاده کنیم. این متد از قسمت انتها آرایه شروع به جستجو می‌کند و آخرین موردی را که شرایط مورد نظر ما را برآورده می‌کند، انتخاب می‌کند، بدون اینکه به صورت دستی آرایه را معکوس کند.
findLast()متد findLast() تقریباً مانند متد find() کار می‌کند، اما به دنبال آخرین آیتم منطبق است. سینتکس آن به صورت زیر می‌باشد:
array.findLast(callback(element, index, array), thisArg);
callback: تابعی که هر آیتم در آرایه را بررسی می‌کند.element: آیتم فعلی در حال بررسی را شامل می‌شود.index: بیانگر ایندکس آیتم فعلی است.array: آرایه در حال پردازش را نشان می‌دهد.thisArg: یک گزینه اختیاری است. می‌توانیم آن را به عنوان this در داخل تابع callback استفاده کنیم.findLastتصور کنید آرایه‌ای از اعداد داریم و می‌خواهیم آخرین عدد بزرگ‌تر از ۵ را پیدا کنیم:
const numbers = [2, 7, 4, 9, 3]; // Find the last number greater than 5 const lastNumberOver5 = numbers.findLast(num => num > 5); console.log(lastNumberOver5); // Output: 9
در این مثال، متد findLast() جستجو را از انتهای آرایه شروع می‌کند و آخرین عددی که بزرگ‌تر از ۵ است را return می‌کند.
می‌توانیم از متد findLast() برای دریافت آخرین آیتم منتطبق استفاده کنیم. این موضوع زمانی که چندین تطابق در یک آرایه وجود داشته باشد می‌تواند بسیار مفید باشد. فرض کنید می‌خواهیم آخرین عدد زوج را در یک آرایه پیدا کنیم:
const numbers = [1, 4, 6, 8, 3, 6]; // Find the last even number const lastEvenNumber = numbers.findLast(num => num % 2 === 0); console.log(lastEvenNumber); // Output: 6
findLast() و find()تفاوت اصلی بین متدهای find() و findLast() در جهتی است که آن‌ها کار جستجو در آرایه را انجام می‌دهند. متد find() از ابتدای آرایه کار جستجو را شروع می‌کند زمانی که اولین آیتم منطبق بر شرط را پیدا می‌کند متوقف می‌شود، اما findLast() از انتها آرایه شروع به جستجو می‌کند و آخرین آیتم منطبق را return می‌نماید. به عنوان مثال:
const numbers = [3, 5, 7, 9, 5]; // Using find() const first5 = numbers.find(num => num === 5); console.log(first5); // Output: 5 (first match) // Using findLast() const last5 = numbers.findLast(num => num === 5); console.log(last5); // Output: 5 (last match)
متد findLast() به ویژه در سناریوهایی که ترتیب آیتم‌ها مهم است بسیار مفید می‌باشد، مانند:
findLastIndex()گاهی اوقات، ما فقط به آخرین آیتم منطبق در یک آرایه نیاز نداریم، بلکه موقعیت آن را نیز می‌خواهیم. یکی از متدهای جدید آرایه در جاوااسکریپت، متد findLastIndex() است که می‌تواند در این موضوع به ما کمک کند. این متد نیز مانند findLast() عمل می‌کند، اما به جای return کردن یک مقدار، ایندکس آخرین المنتی که شرایط مورد نظر ما را برآورده می‌کند را برمی‌گرداند. این امر ردیابی مکان آن آیتم در آرایه را آسان‌تر می‌کند.
findLastIndex()سینتکس متد findLastIndex() بسیار ساده بوده و بسیار شبیه سینتکس متد findLast() است:
array.findLastIndex(callback(element, index, array), thisArg);
callback: تابعی که برای هر المنت در آرایه اجرا می‌شود.element: آیتم فعلی در حال بررسی را شامل می‌شود.index: بیانگر ایندکس آیتم فعلی است.array: آرایه در حال پردازش را نشان می‌دهد.thisArg: یک گزینه اختیاری است. می‌توانیم آن را به عنوان this در داخل تابع callback استفاده کنیم.اگر هیچ المنتی با شرط مورد نظر مطابقت نداشته باشد، متد findLastIndex() مقدار -۱ را return می‌کند.
findLastIndex()فرض کنید آرایه‌ای از اعداد داریم و می‌خواهیم ایندکس آخرین عدد بزرگ‌تر از ۵ را پیدا کنیم:
const numbers = [2, 7, 4, 9, 3]; // Find the index of the last number greater than 5 const lastIndexOver5 = numbers.findLastIndex(num => num > 5); console.log(lastIndexOver5); // Output: 3 (index of 9)
در این حالت، متد findLastIndex() عدد ۳ را return می‌کند که ایندکس مربوط به عدد ۹ است و آخرین عدد بزرگ‌تر از ۵ در آرایه می‌باشد.
اگر می‌خواهیم ایندکس آخرین المنتی را که با یک شرایط خاص مطابقت دارد را مشخص کنیم، متد findLastIndex() ابزار مناسبی برای این کار به حساب می‌آید. در مثال زیر قصد داریم تا آخرین عدد زوج در یک آرایه را پیدا کنیم:
const numbers = [1, 4, 6, 8, 3, 6]; // Find the index of the last even number const lastEvenIndex = numbers.findLastIndex(num => num % 2 === 0); console.log(lastEvenIndex); // Output: 5 (index of the last 6)
در این مثال، ایندکس آخرین عدد زوج، ۵ است.
findIndex() و findLastIndex()تفاوت اصلی بین متدهای findIndex() و findLastIndex() جهت جستجو است. متد findIndex() از ابتدای آرایه شروع می‌شود و در اولین تطابق متوقف می‌شود. متد findLastIndex() به صورت معکوس کار می‌کند، از انتها شروع می‌شود و آخرین تطابق را return می‌کند. به عنوان مثال:
const numbers = [3, 5, 7, 9, 5]; // Using findIndex() const first5Index = numbers.findIndex(num => num === 5); console.log(first5Index); // Output: 1 (first match) // Using findLastIndex() const last5Index = numbers.findLastIndex(num => num === 5); console.log(last5Index); // Output: 4 (last match)
در آرایه‌های کوچک، تفاوت عملکرد بین findIndex() و findLastIndex() ممکن است قابل توجه نباشد. اما در مجموعه داده‌های بزرگ، تفاوت می‌تواند مهم باشد. از آنجایی که findLastIndex() از انتهای آرایه شروع می‌شود، اگر انتظار داشته باشیم که آیتم منطبق با شرایط مورد نظر ما در انتهای مجموعه داده قرار داشته باشد، استفاده از findLastIndex() ممکن است کارآمدتر باشد. این کار می‌تواند در مقایسه با اسکن از ابتدا با استفاده از findIndex() در زمان صرفه‌جویی کند.
به عنوان مثال، هنگام کار با یک گزارش بزرگ از رویدادها، استفاده از findLastIndex() می‌تواند به سرعت آخرین رویدادی را که دارای یک شرط خاص است پیدا کند:
const events = new Array(100000).fill(0).map((_, i) => i + 1); // Find the index of the last number divisible by 5000 const lastDivisibleBy5000 = events.findLastIndex(num => num % 5000 === 0); console.log(lastDivisibleBy5000); // Output: 99999 (index of 100000)
در مجموعه‌های داده بزرگ مانند این مثال، استفاده از متد findLastIndex() می‌تواند به جلوگیری از جستجوهای غیرضروری در زمانی که فقط به یک آیتم که در انتهای مجموعه قرار دارد یا حتی زمانی که به آخرین رکورد نیاز داریم، کمک کند.
toReversed()از بین متدهای قدیمی جاوااسکریپت، می‌توانیم از متد reverse() برای معکوس کردن ترتیب المنت‌ها در یک آرایه استفاده می‌کنیم. اما این متد آرایه اصلی را تغییر می‌دهد. اگر می‌خواهیم داده‌های اصلی را دست نخورده نگه داریم، استفاده از این متد می‌تواند مشکلاتی را ایجاد کند. متد toReversed() این مشکل را برطرف کرده و این امکان را به ما می‌دهد تا یک آرایه را بدون اثرگذاری بر روی آرایه اصلی، معکوس کنیم.
toReversed()استفاده از متد toReversed() ساده است و یک نسخه معکوس از آرایه، بدون تغییر نسخه اصلی ایجاد می‌کند:
const newArray = array.toReversed();
array: آرایه‌ای است که می‌خواهیم المنت‌های آن را معکوس کنیم.newArray: یک آرایه جدید با المنت‌های معکوس می‌باشد.در ادامه مثالی را بررسی می‌کنیم که در آن می‌خواهیم یک آرایه را معکوس کنیم، اما همچنان باید نسخه اصلی را حفظ نماییم:
const numbers = [1, 2, 3, 4, 5]; // Reverse the array without changing the original const reversedNumbers = numbers.toReversed(); console.log(reversedNumbers); // Output: [5, 4, 3, 2, 1] console.log(numbers); // Output: [1, 2, 3, 4, 5]
در این مثال، آرایه numbers اصلی ثابت می‌ماند و متد toReversed() یک آرایه جدید با المنت‌های معکوس شده return می‌کند.
toReversed()یکی از بزرگ‌ترین مزایای متد toReversed() این است که از side effectها جلوگیری می‌کند. متد قدیمی reverse() مستقیماً آرایه اصلی را تغییر می‌دهد، که در صورت نیاز به داده‌های اصلی در جای دیگر، می‌تواند منجر به ایجاد باگ در برنامه شود. اما با استفاده از متد toReversed()، آرایه اصلی بدون تغییر باقی می‌ماند. بنابراین، دیگر لازم نیست نگران تغییرات غیرمنتظره باشیم.
const letters = ['a', 'b', 'c', 'd']; // Using toReversed to avoid side effects const reversedLetters = letters.toReversed(); console.log(reversedLetters); // Output: ['d', 'c', 'b', 'a'] console.log(letters); // Output: ['a', 'b', 'c', 'd']
همانطور که می‌بینیم، آرایه letters پس از فراخوانی toReversed() همچنان به شکل اصلی خود باقی است.
reverse() و toReversed()متد reverse() مستقیماً آرایه را تغییر می‌دهد، اما toReversed() آرایه اصلی را بدون تغییر نگه می‌دارد. مثلا:
const nums = [10, 20, 30, 40]; // Using reverse() const reversedNums1 = nums.reverse(); console.log(reversedNums1); // Output: [40, 30, 20, 10] console.log(nums); // Output: [40, 30, 20, 10] (Original array changed) // Using toReversed() const reversedNums2 = nums.toReversed(); console.log(reversedNums2); // Output: [10, 20, 30, 40] console.log(nums); // Output: [40, 30, 20, 10] (Original stays as it was after reverse)
همانطور که می‌بینیم، متد reverse() آرایه اصلی را تغییر می‌دهد، اما toReversed() این کار را انجام نمی‌دهد.
toReversed() رویه‌های برنامه نویسی فانکشنال را تقویت می‌کند؟ایده برنامه نویسی فانکشنال این است که از تغییر مستقیم داده‌ها اجتناب شود. در عوض، مقادیر جدید از توابع return شوند و داده‌های اصلی دست نخورده باقی بمانند.
متد toReversed() کاملاً با این مفهوم مطابقت دارد و به آرایه‌ها اجازه می‌دهد بدون تغییر داده‌های اصلی، معکوس شوند. این کار منجر به نوشتن کد تمیزتر و ایمن‌تر می‌گردد، زیرا با این کار خطر تغییر تصادفی مقادیر را کاهش می‌دهیم.
به عنوان مثال، در یک تنظیم برنامه نویسی فانکشنال ممکن است بخواهیم یک آرایه از امتیازات را برای اهداف نمایش بدون تغییر امتیازات واقعی معکوس کنیم:
const scores = [95, 87, 75, 60]; // Reverse the scores for display purposes without modifying the original const displayedScores = scores.toReversed(); console.log(displayedScores); // Output: [60, 75, 87, 95] console.log(scores); // Output: [95, 87, 75, 60] (Original scores intact)
toSorted()جاوااسکریپت برای مدت طولانی متد sort() را در اختیار توسعه‌دهندگان قرار داده است تا با استفاده از آن المنت‌های یک آرایه را مرتب کنند. اما مسئله این است که متد sort() آرایه اصلی را تغییر می‌دهد، که می‌تواند منجر به مشکلات ناخواسته شود.
برای رفع این مشکل، جاوااسکریپت متد toSorted() را معرفی کرد. این متد به ما کمک می‌کند تا بدون تغییر نسخه اصلی آرایه‌ها را، آن را مرتب کنیم.
toSorted()سینتکس متد toSorted() بسیار ساده بوده و شبیه به سینتکس متد sort() است، اما آرایه اصلی را تغییر نمی‌دهد:
const newArray = array.toSorted(compareFunction);
array: آرایه‌ای که می‌خواهیم آن را مرتب کنیم.compareFunction: یک گزینه اختیاری است. تابعی می‌باشد که نحوه مرتب‌سازی المنت‌ها را مشخص می‌کند. اگر ارائه نشود، المنت‌های آرایه به رشته تبدیل شده و به ترتیب صعودی مرتب می‌شوند.toSorted()فرض کنید لیستی از دانش آموزان داریم و می‌خواهیم آن‌ها را بر اساس نمراتشان مرتب کنیم، اما لیست اصلی نباید تغییر کند:
const students = [
{ name: 'Dave', score: 85 },
{ name: 'Alexa', score: 92 },
{ name: 'Katie', score: 78 }
];
// Sort students without changing the original array
const sortedStudents = students.toSorted((a, b) => b.score - a.score);
console.log(sortedStudents);
// Output: [{name: 'Katie', score: 92}, {name: 'Dave', score: 85}, {name: 'Katie', score: 78}]
console.log(students);
// Output (unchanged): [{name: 'Dave', score: 85}, {name: 'Alexa', score: 92}, {name: 'Katie', score: 78}]
متد toSorted() راهی امن برای مدیریت مرتب‌سازی داده‌ها بدون خطر تغییر تصادفی آرایه اصلی ارائه می‌دهد. این موضوع به ویژه هنگام کار بر روی پروژه‌های بزرگ که ممکن است داده‌ها در بخش‌های مختلف کد استفاده شوند، بسیار مفید می‌باشد.
در ادامه مثالی داریم که در آن لیست ساده‌ای از اعداد را مرتب می‌کنیم:
const numbers = [5, 2, 9, 1, 7]; // Sort the numbers without changing the original array const sortedNumbers = numbers.toSorted(); console.log(sortedNumbers); // Output: [1, 2, 5, 7, 9] console.log(numbers); // Output (unchanged): [5, 2, 9, 1, 7]
sort() و toSorted()متد قدیمی sort() یک آرایه را مرتب می‌کند اما آرایه اصلی را هم تغییر می‌دهد، که این موضوع می‌تواند باعث ایجاد مشکلات زیادی شود.
const numbers = [3, 1, 4, 2]; // Using sort() const sortedNumbers1 = numbers.sort(); console.log(sortedNumbers1); // Output: [1, 2, 3, 4] console.log(numbers); // Output (original array changed): [1, 2, 3, 4] // Using toSorted() const sortedNumbers2 = numbers.toSorted(); console.log(sortedNumbers2); // Output: [1, 2, 3, 4] console.log(numbers); // Output (unchanged): [3, 1, 4, 2]
همانطور که می‌بینیم، متد sort() آرایه اصلی را تغییر می‌دهد، اما متد toSorted() آرایه اصلی را دست نخورده نگه می‌دارد.
برای آرایه‌های کوچک‌تر، عملکرد بین متد sort() و toSorted() تقریبا یکسان خواهد بود. اما برای مجموعه داده‌های بزرگ‌تر یا زمانی که عمل مرتب‌سازی به صورت مکرر انجام می‌شود، متد toSorted() می‌تواند به جلوگیری از side effectها و ایمن‌تر کردن کدها کمک کند.
استفاده از toSorted() به این معنی است که می‌توانیم با خیال راحت آرایه اصلی را بدون نگرانی از تغییرات غیرمنتظره، به قسمت های دیگر کد ارسال کنیم.
برای این که کد ما بهترین عملکرد را داشته باشد باید مطمئن شویم که همیشه از یک تابع مقایسه مناسب استفاده می‌کنیم، به خصوص برای مرتب‌سازی‌های پیچیده، مانند مرتب‌سازی آبجکت‌ها:
const people = [
{ name: 'Rash', age: 30 },
{ name: 'Josh', age: 25 },
{ name: 'Sammy', age: 40 }
];
// Sort people by age without mutating the original array
const sortedPeople = people.toSorted((a, b) => a.age - b.age);
console.log(sortedPeople);
// Output: [{name: 'Josh', age: 25}, {name: 'Rash', age: 30}, {name: 'Sammy', age: 40}]
استفاده از متد toSorted() خوانایی کد ما را بهبود می‌بخشد و به جلوگیری از side effectهای ناخواسته کمک می‌کند، به خصوص هنگام کار با داده‌های مهم.
toSpliced()یکی دیگر از متدهای قدیمی جاوااسکریپت متد splice() است که برای افزودن، حذف یا جایگزینی المنت‌ها در یک آرایه مورد استفاده قرار می‌گیرد؛ اما این متد هم آرایه اصلی را تغییر می‌دهد. به همین دلیل، اگر بخواهیم داده‌های اصلی را حفظ کنیم، می‌تواند منجر به ایجاد نتایج غیرمنتظره شود.
برای حل این مشکل، متد toSpliced() معرفی شد. این متد نیز مانند متد splice() عمل می‌کند، اما آرایه اصلی را تغییر نمی‌دهد، بنابراین یک رویکرد ایمن‌تر برای برنامه‌نویسی ارائه می‌دهد.
toSpliced()سینتکس متد toSpliced() به صورت زیر می‌باشد:
const newArray = array.toSpliced(start, deleteCount, item1, item2, ...);
start: ایندکسی که در آن اعمال تغییر بر روی آرایه شروع می‌شود.deleteCount: یک گزینه اختیاری است و تعداد آیتم‌هایی که باید از آرایه حذف شوند را نشان می‌دهد.item1, item2, …: این گزینه‌ها نیز اختیاری هستند و آیتم‌هایی که باید در ایندکس شروع اضافه شوند را نشان می‌دهند.در ادامه یک مثال عملی را بررسی می‌کنیم که در آن قصد داریم المنت‌هایی را از یک آرایه حذف و جایگزین نماییم، اما آرایه اصلی را باید به صورت دست نخورده حفظ کنیم:
const fruits = ['apple', 'banana', 'cherry', 'date']; // Create a new array by removing 'banana' and adding 'blueberry' without changing the original const newFruits = fruits.toSpliced(1, 1, 'blueberry'); console.log(newFruits); // Output: ['apple', 'blueberry', 'cherry', 'date'] console.log(fruits); // Output: ['apple', 'banana', 'cherry', 'date']
در این مثال، متد toSpliced() آیتم 'banana' را حذف کرده و 'blueberry' را جایگزین همان ایندکس می‌کند، اما آرایه اصلی fruits بدون تغییر باقی می‌ماند.
splice() و toSpliced()تفاوت اصلی بین متدهای splice() و toSpliced() در جاوااسکریپت این است که splice() آرایه اصلی را تغییر می‌دهد، اما toSpliced() آرایه را بدون تغییر نگه می‌دارد و یک آرایه جدید return می‌کند. به عنوان مثال:
const numbers = [1, 2, 3, 4]; // Using splice() const splicedNumbers = numbers.splice(1, 2, 10, 20); console.log(splicedNumbers); // Output: [2, 3] (Removed elements) console.log(numbers); // Output: [1, 10, 20, 4] (Original array changed) // Using toSpliced() const newNumbers = numbers.toSpliced(1, 2, 5, 6); console.log(newNumbers); // Output: [1, 5, 6, 4] console.log(numbers); // Output: [1, 10, 20, 4] (Original array unchanged)
toSpliced() برای برنامه نویسی فانکشنالtoSpliced() به خوبی با برنامه نویسی فانکشنال سازگار است. برای مثال، در برنامه‌هایی که اغلب آرایه‌ها را دستکاری می‌کنیم (مانند لیست‌های کاربران یا محصولات)، toSpliced() کمک می‌کند تا داده‌های اصلی بدون تغییر باقی بمانند.
const users = ['Dave', 'Alexa', 'Katie']; // Remove 'Bob' and add 'Dan' without modifying the original array const updatedUsers = users.toSpliced(1, 1, 'Dan'); console.log(updatedUsers); // Output: ['Dave', 'Dan', 'Katie'] console.log(users); // Output: ['Dave', 'Alexa', 'Katie']
این متد مدیریت و کار با آرایه‌ها را، در شرایطی که نیاز به حفظ داده‌های اصلی داریم، آسان‌تر می‌کند.
toSpliced()مزیت اصلی متد toSpliced() این است که از تغییرات ناخواسته در آرایه اصلی جلوگیری می‌کند. در نتیجه، احتمال بروز اشکالات ناشی از تغییر تصادفی داده‌ها را کاهش می‌دهد.
اما باید به این نکته توجه داشته باشیم که ایجاد یک آرایه جدید با toSpliced() به این معنی است که آرایه قدیمی مستقیماً به‌روزرسانی نمی‌شود، بنابراین اگر می‌خواهیم از داده‌های اصلاح شده استفاده کنیم، باید نتیجه را در یک متغیر جدید ذخیره نماییم.
const colors = ['red', 'green', 'blue']; // Create a new array that adds 'yellow' at index 1 const newColors = colors.toSpliced(1, 0, 'yellow'); console.log(newColors); // Output: ['red', 'yellow', 'green', 'blue'] console.log(colors); // Output: ['red', 'green', 'blue'] (Original unchanged)
with()متد with() نیز یکی دیگر از متدهای جدید و قدرتمند در جاوااسکریپت است که برای کمک به جایگزینی المنت‌ها در یک آرایه، بدون تغییر آرایه اصلی معرفی شده است. زمانی که نیاز داریم آیتم‌های خاصی را بدون تأثیر بر روی سایر داده‌ها به‌روزرسانی کنیم و آرایه اصلی خود را بدون تغییر نگه داریم، استفاده از این متد می‌تواند مفید باشد.
with()متد with() به ما این امکان را می‌دهد تا یک آرایه جدید ایجاد کنیم که در آن یک المنت در یک ایندکس خاص جایگزین شود.
const newArray = array.with(index, newValue);
index: ایندکس المنتی که می‌خواهیم جایگزین کنیم.newValue: مقداری که باید در ایندکس مورد نظر درج شود.with() برای جایگزینی المنتدر ادامه یک مثال ساده را بررسی می‌کنیم که در آن می‌خواهیم یک آیتم را در یک ایندکس خاص جایگزین کنیم:
const fruits = ['apple', 'banana', 'cherry']; // Replace 'banana' with 'blueberry' at index 1 const newFruits = fruits.with(1, 'blueberry'); console.log(newFruits); // Output: ['apple', 'blueberry', 'cherry'] console.log(fruits); // Output: ['apple', 'banana', 'cherry']
در این مثال، ما 'banana' را با 'blueberry' جایگزین کردیم، اما آرایه اصلی fruits ثابت می‌ماند، که برای جلوگیری از side effectها در کد ما بسیار مفید می‌باشد.
یکی از نقاط قوت کلیدی متد with() این است که آرایه اصلی را تغییر نمی‌دهد. این امر به حفظ تغییرناپذیری کمک می‌کند، که اغلب هنگام مدیریت داده‌ها در برنامه‌های بزرگ‌تر مورد نیاز است. می‌توانیم بدون نگرانی در مورد تغییرات تصادفی داده‌های اصلی، با اطمینان المنت‌ها را جایگزین نماییم.
const numbers = [10, 20, 30, 40]; // Replace the number at index 2 (30) with 35 const updatedNumbers = numbers.with(2, 35); console.log(updatedNumbers); // Output: [10, 20, 35, 40] console.log(numbers); // Output: [10, 20, 30, 40] (Original unchanged)
این باعث می‌شود زمانی که نیاز به به‌روزرسانی داده‌ها داریم، اما همچنان می‌خواهیم در جای دیگری از کد خود به آرایه اصلی ارجاع دهیم، متد with() به انتخابی ایده‌آل تبدیل شود.
with()متد with() را می‌توانیم در بسیاری از سناریوها مانند به‌روزرسانی پروفایل کاربران، اصلاح فهرستی از آیتم‌ها و یا کار با هر داده‌ای که نیاز به به‌روزرسانی انتخابی دارد، اعمال کنیم. برای مثال، وقتی با جدولی از کاربران سروکار داریم، می‌توانیم داده‌های یک کاربر خاص را بدون تأثیر بر کل مجموعه داده جایگزین نماییم.
const users = ['Dave', 'Alexa', 'Katie']; // Update Bob's name to 'Dan' const updatedUsers = users.with(1, 'Dan'); console.log(updatedUsers); // Output: ['Dave', 'Dan', 'Katie'] console.log(users); // Output: ['Dave', 'Alexa', 'Katie'] (Original unchanged)
این متد به جلوگیری از سردرگمی ناشی از تغییرات ناخواسته در داده‌ها هنگام به‌روزرسانی المنت‌های خاص در یک آرایه کمک می‌کند.
with() با سایر متدهای موجود برای جایگزینی المنتهاقبل از معرفی متد with()، جایگزینی المنت‌ها در آرایه‌ها به کمک متدهایی مانند splice() یا رویکردهای دستی انجام می‌شد که هر دو، آرایه اصلی را تغییر می‌دهند:
const colors = ['red', 'green', 'blue']; // Traditional method (using mutation) colors.splice(1, 1, 'yellow'); console.log(colors); // Output: ['red', 'yellow', 'blue'] (Original array changed)
با استفاده از متد جدید with() می‌توانیم از این مشکل جلوگیری کنیم:
const colors = ['red', 'green', 'blue']; // Using `with` method const newColors = colors.with(1, 'yellow'); console.log(newColors); // Output: ['red', 'yellow', 'blue'] console.log(colors); // Output: ['red', 'green', 'blue'] (Original unchanged)
ما در این مقاله برخی از جدیدترین ویژگی‌های جاوااسکریپت، از جمله متدهایی مانند findLast()، findLastIndex()، toReversed()، toSorted()، toSpliced() و with() برای آرایه را بررسی کردیم.
این افزودنی‌های جدید انعطاف‌پذیری و کارایی بیشتری را برای کار با آرایه‌ها به ارمغان می‌آورند. آن‌ها به جلوگیری از تغییرات ناخواسته در داده‌های اصلی کمک می‌کنند و باعث می‌شوند کد تمیزتری داشته باشیم. به عنوان مثال، toSorted() امکان مرتب‌سازی بدون تغییر آرایه اصلی را فراهم می‌کند، و findLast() مکان‌یابی آخرین المنت منطبق با یک شرط خاص مورد نظر در یک لیست را ساده‌تر می‌نماید. استفاده از هر یک از این متدها باعث صرفه جویی در زمان و کاهش پیچیدگی هنگام مدیریت و تبدیل داده‌ها می‌شوند.
۵۰ درصد تخفیف ویژه زمستان فرانت کست تا ۱۴ دی
کد تخفیف: wnt
دیدگاه‌ها: