جاوا اسکریپت همیشه در حال بهبود است و هر سال ویژگی های جدیدی برای کدنویسی آسان تر و کارآمدتر اضافه می شود. این به‌روزرسانی‌ها به توسعه‌دهندگان کمک می‌کنند تا کدهای پاک‌تر بنویسند و سریع‌تر کار کنند. اگر می‌خواهید به عنوان یک توسعه‌دهنده پیشرو باشید، مهم است که در مورد آخرین آپشن های جاوا اسکریپت بیاموزید.

در این مقاله، در مورد برخی از ابزارها و روش‌های جدید موجود در جاوا اسکریپت، مانند findLast ، toReversed ، toSorted و غیره صحبت خواهیم کرد. این ویژگی‌ها به شما امکان می‌دهند تا آرایه‌ها و داده‌ها را به روش‌های هوشمندانه‌تری بدون تغییر داده‌های اصلی خود دستکاری کنید. ما به نحوه عملکرد هر یک نگاه خواهیم کرد و نمونه هایی را به شما نشان می دهم و توضیح می دهم که چگونه می توانند کد شما را بهتر کنند.

فهرست مطالب

روش های آرایه در جاوا اسکریپت

findLast : آخرین عنصر مطابق را پیدا کنید

findLastIndex : نمایه آخرین مسابقه را مشخص کنید

toReversed : معکوس بدون تغییر آرایه های اصلی

toSorted : مرتب‌سازی غیرقابل تغییر برای کد پاک‌کننده

toSpliced : ایجاد آرایه های جدید با اتصال بدون جهش

with : اصلاح عناصر آرایه بر اساس شاخص

ترکیب روش های جدید جاوا اسکریپت برای دستکاری پیشرفته داده ها

سازگاری به عقب و Polyfills

نتیجه گیری

روش های آرایه در جاوا اسکریپت

جاوا اسکریپت روش های مختلفی دارد که کار با آرایه ها را آسان تر می کند. آرایه ها فهرست ی از آیتم ها هستند و شما اغلب نیاز به جستجو، مرتب سازی یا به روز رسانی این فهرست ها دارید. روش‌های قدیمی‌تر مانند push() ، pop() ، map() و filter() مفید بوده‌اند، اما گاهی اوقات می‌توانند داده‌های اصلی را تغییر دهند، که همیشه آن چیزی نیست که شما می‌خواهید.

روش‌های جدیدتر جاوا اسکریپت گزینه‌های بهتری را برای مدیریت آرایه‌ها ارائه می‌دهند، به‌ویژه زمانی که نیاز دارید داده‌های اصلی را بدون تغییر نگه دارید. این روش های جدید کدنویسی را قابل اطمینان تر و تمیزتر می کند.

جدیدترین روش های جاوا اسکریپت راه های بیشتری برای کار با آرایه ها بدون تغییر فهرست اصلی ارائه می دهد. این روش‌ها، مانند findLast ، toSorted و toReversed ، یک آرایه جدید ایجاد می‌کنند یا نتیجه را مستقیماً به شما می‌دهند و آرایه اصلی شما را دست نخورده می‌گذارند.

findLast : آخرین عنصر مطابق را پیدا کنید

هنگام کار با آرایه ها، ممکن است بخواهید موردی را جستجو کنید که با شرایط خاصی مطابقت داشته باشد. متد find() قدیمی به شما کمک می کند اولین آیتم تطبیق را دریافت کنید، اما اگر به جای آن به آخرین تطابق نیاز داشته باشید چه؟

اینجاست که findLast() وارد می شود. آرایه را که از انتها شروع می شود جستجو می کند و آخرین موردی را که شرایط شما را برآورده می کند، به شما می دهد، بدون اینکه به صورت دستی آرایه را معکوس کند.

نحو و پارامترهای findLast

متد findLast() تقریباً مانند find() کار می کند، اما به دنبال آخرین تطابق است. در اینجا نحو اصلی آمده است:

 array.findLast(callback(element, index, array), thisArg);

callback : تابعی که هر آیتم در آرایه را تحلیل می کند.

عنصر : مورد فعلی در حال تحلیل است.

index : نمایه مورد فعلی.

آرایه : آرایه در حال پردازش.

thisArg : اختیاری. می توان آن را به عنوان this در داخل callback استفاده کرد.

مثال های عملی استفاده از findLast

بیایید به یک مثال ساده نگاه کنیم. تصور کنید آرایه ای از اعداد دارید و می خواهید آخرین عدد بزرگتر از 5 را پیدا کنید.

 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() جستجو را از انتهای آرایه شروع می کند و آخرین عددی را که بزرگتر از 5 است برمی گرداند.

یافتن آخرین رخداد در آرایه ها

می‌توانید از 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

مقایسه با find()

تفاوت اصلی بین find() و findLast() در جهتی است که آنها در آن جستجو می کنند. find() از ابتدای آرایه شروع می شود و در اولین مسابقه متوقف می شود، در حالی که findLast() از انتها شروع می شود و آخرین مطابقت را برمی گرداند.

در اینجا یک مقایسه است:

 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() عمل می کند، اما به جای برگرداندن مقدار، ایندکس آخرین عنصری را که شرایط شما را برآورده می کند، برمی گرداند. این امر ردیابی مکان آن آیتم در آرایه را آسان تر می کند.

نحو و پارامترهای کلیدی

سینتکس findLastIndex() ساده است و بسیار شبیه findLast() است:

 array.findLastIndex(callback(element, index, array), thisArg);

callback : تابعی که برای هر عنصر آرایه اجرا می شود.

عنصر : مورد فعلی در حال تحلیل است.

index : موقعیت آیتم فعلی در آرایه.

آرایه : آرایه در حال پردازش.

thisArg : اختیاری. به عنوان this در داخل پاسخ تماس استفاده می شود.

اگر هیچ عنصری با شرط مطابقت نداشته باشد، findLastIndex() -1 را برمی گرداند.

نمونه های عملی findLastIndex در عمل

بیایید به یک مثال نگاه کنیم. فرض کنید آرایه ای از اعداد دارید و می خواهید شاخص آخرین عدد بزرگتر از 5 را پیدا کنید.

 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() 3 را برمی گرداند که موقعیت 9 است، آخرین عدد بزرگتر از 5 در آرایه.

بازیابی آخرین شاخص مطابق با یک شرط

اگر می خواهید موقعیت آخرین عنصری را که با یک شرایط خاص مطابقت دارد مشخص کنید، 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)

در این حالت، شاخص آخرین عدد زوج 5 است.

کنتراست با findIndex

تفاوت اصلی بین findIndex() و findLastIndex() جهت جستجو است. findIndex() از ابتدای آرایه شروع می شود و در اولین مسابقه متوقف می شود. findLastIndex() به صورت معکوس کار می کند، از انتها شروع می شود و آخرین مسابقه را برمی گرداند.

در اینجا یک مقایسه سریع وجود دارد:

 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() از انتهای آرایه شروع می شود، اگر انتظار داشته باشید که مسابقه نزدیک به پایان باشد، ممکن است کارآمدتر باشد. این می تواند در مقایسه با اسکن از ابتدا با استفاده 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() یک آرایه جدید با عناصر برگردانده شده برمی گرداند.

اجتناب از عوارض جانبی با toReversed

یکی از بزرگترین مزایای toReversed() این است که از عوارض جانبی جلوگیری می کند. روش سنتی 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

متد 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 تمرینات برنامه نویسی کاربردی را تقویت می کند

در برنامه نویسی تابعی، ایده این است که از تغییر مستقیم داده ها اجتناب شود. در عوض، مقادیر جدید از توابع برگردانده می شوند و داده های اصلی دست نخورده باقی می مانند.

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() ساده است، شبیه 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 سنتی

متد 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() می تواند به جلوگیری از عوارض جانبی و ایمن تر کردن کد کمک کند.

استفاده از 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() خوانایی کد شما را بهبود می بخشد و به جلوگیری از عوارض جانبی ناخواسته کمک می کند، به خصوص هنگام کار با داده های مهم.

toSpliced : ایجاد آرایه های جدید با اتصال بدون جهش

متد splice() در جاوا اسکریپت برای گفت ن، حذف یا جایگزینی عناصر در یک آرایه مفید بوده است. اما آرایه اصلی را تغییر می دهد، که اگر بخواهید داده های اصلی را حفظ کنید، می تواند منجر به نتایج غیرمنتظره شود.

برای حل این مشکل، toSpliced() معرفی شد. مانند splice() عمل می کند، اما بدون تغییر آرایه اصلی، امکان یک رویکرد ایمن تر و تمیزتر را فراهم می کند.

نحو و کاربرد عملی

در اینجا نحوه عملکرد متد 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 سنتی

تفاوت اصلی بین splice() و toSpliced() این است که splice() آرایه اصلی را تغییر می دهد، در حالی که toSpliced() آن را دست نخورده رها می کند و یک آرایه جدید برمی گرداند.

 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)

splice() آرایه اصلی را تغییر می دهد، اما 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 به شما امکان می دهد یک آرایه جدید ایجاد کنید که در آن یک عنصر در یک شاخص خاص جایگزین شود.

 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 اصلی ثابت می ماند، که برای جلوگیری از عوارض جانبی در کد شما بسیار مفید است.

جایگزینی عناصر در آرایه ها با حفظ تغییرناپذیری

یکی از نقاط قوت کلیدی متد 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)

روش with تضمین می‌کند که داده‌های اصلی دست نخورده باقی می‌مانند که آن را گزینه بهتری برای موقعیت‌هایی می‌کند که تغییر ناپذیری مهم است.

ترکیب روش های جدید جاوا اسکریپت برای دستکاری پیشرفته داده ها

روش های جدید جاوا اسکریپت مانند findLast ، toSorted و with ابزارهای قدرتمندی برای مدیریت و تبدیل داده ها ارائه می کنند. وقتی با هم استفاده می شوند، به شما امکان می دهند عملیات داده پیچیده را به روشی ساده و خوانا ایجاد کنید.

بیایید ببینیم چگونه می‌توانید این روش‌ها را برای مدیریت کارآمد داده‌ها و نوشتن کدهای تمیز و مؤثر ترکیب کنید.

روش‌های زنجیره‌ای مانند findLast ، toSorted و with

روش‌های زنجیره‌ای در جاوا اسکریپت به شما امکان می‌دهد چندین تغییر شکل را در یک جریان واحد روی داده‌های خود اعمال کنید.

برای مثال، ممکن است بخواهید یک آرایه را مرتب کنید، آخرین عنصر منطبق را پیدا کنید و سپس آن را با یک مقدار جدید جایگزین کنید. در اینجا نحوه انجام این کار با استفاده از toSorted ، findLast و with :

 const numbers = [ 20 , 5 , 15 , 30 , 10 ]; // Chain methods to sort, find the last element greater than 10, and replace it const result = numbers .toSorted( ( a, b ) => a - b) // Sort the array in ascending order .with(numbers.findLastIndex( num => num > 10 ), 100 ); // Find and replace the last match console .log(result); // Output: [5, 10, 15, 20, 100]

در این مثال:

toSorted() آرایه را بدون تغییر آرایه اصلی به ترتیب صعودی مرتب می کند.

findLastIndex() آخرین عدد را بزرگتر از 10 پیدا می کند.

with() آن عدد (که 30 است) را با 100 جایگزین می کند، بدون اینکه آرایه اصلی را تغییر دهد.

این ترکیب هنگام کار با گردش کار داده های پیچیده مفید است و تضمین می کند که داده های اصلی بدون تغییر باقی می مانند.

ایجاد تحولات پیچیده داده با سهولت

قدرت واقعی این روش ها زمانی می درخشد که بخواهید چندین عمل را روی آرایه ها به صورت خوانا و سازماندهی شده انجام دهید. در اینجا مثال دیگری وجود دارد که در آن مرتب سازی، فیلتر کردن و جایگزینی داده ها را در یک جریان ترکیب می کنیم:

 const students = [ { name : 'Dave' , score : 85 }, { name : 'Alexa' , score : 75 }, { name : 'Katoe' , score : 90 } ]; // Chain methods to sort, find the last student with a score above 80, and update their score const updatedStudents = students .toSorted( ( a, b ) => b.score - a.score) // Sort students by score (descending) .with( students.findLastIndex( student => student.score > 80 ), { ...students.findLast( student => student.score > 80 ), score : 95 } ); console .log(updatedStudents);

در این مورد:

toSorted() دانش‌آموزان را بر اساس نمراتشان از بالاترین به پایین‌ترین مرتبه‌بندی می‌کند.

findLastIndex() آخرین دانش آموزی را که امتیاز بالاتر از 80 را کسب کرده است مشخص می کند.

with() آرایه جدیدی ایجاد می کند که نمره آن دانش آموز به 95 به روز شده است.

انعطاف پذیری ترکیب این روش ها به این معنی است که می توانید حتی ساختارهای داده پیچیده را به راحتی بدون به خطر انداختن خوانایی یا تغییر داده های اصلی مدیریت کنید.

بهترین روش ها برای نوشتن کدهای تمیز و کارآمد با این روش ها

برای نوشتن کد تمیز و کارآمد، هنگام استفاده از این روش‌های جدید جاوا اسکریپت، نکات زیر را در نظر بگیرید:

اجتناب از جهش داده های اصلی : از روش هایی مانند toSorted ، toReversed استفاده کنید و آرایه اصلی را with ندهید. این تضمین می کند که داده های شما در سراسر کد شما ثابت می ماند.

استفاده از زنجیره‌ای برای خوانایی : روش‌های زنجیره‌ای هنگام انجام چند تبدیل. این باعث می شود کد شما مختصر و راحت تر دنبال شود.

از توابع پیکان استفاده کنید : توابع فلش کوتاه به کاهش پیچیدگی کد شما کمک می کند. به عنوان مثال:

 const sortedNumbers = numbers.toSorted( ( a, b ) => a - b);

روش‌ها را با دقت ترکیب کنید : مطمئن شوید که روش‌هایی که به هم متصل می‌کنید به‌طور منطقی از یکدیگر پیروی می‌کنند. برای مثال، منطقی است که ابتدا داده ها را قبل از یافتن آخرین عنصری که با یک شرط مطابقت دارد، مرتب کنیم.

مجموعه داده های بزرگ را با دقت مدیریت کنید : برای آرایه های بسیار بزرگ، مفاهیم عملکرد را در نظر بگیرید. روش‌هایی مانند findLast و toSorted ممکن است در مجموعه داده‌های بزرگ‌تر زمان ببرد، پس همیشه عملکرد کد خود را با اندازه‌های واقعی داده‌ها آزمایش کنید.

سازگاری به عقب و Polyfills

با اضافه شدن ویژگی های جدید جاوا اسکریپت، همه مرورگرها فوراً از آنها پشتیبانی نمی کنند. مهم است که مطمئن شوید کد شما همچنان در مرورگرهای قدیمی بدون شکستگی کار می کند. بیایید در مورد اینکه چگونه می توانید از عهده این کار برآیید و پلی فیل ها را برای پر کردن شکاف در هنگام استفاده از جدیدترین ویژگی ها معرفی کنید.

چگونه از سازگاری با مرورگرهای قدیمی اطمینان حاصل کنیم

برای اطمینان از اینکه کد شما در مرورگرهای قدیمی‌تری که از روش‌های جاوا اسکریپت جدید مانند findLast ، toSorted یا with پشتیبانی نمی‌کنند، به‌خوبی کار می‌کند، می‌توانید چک‌هایی را اضافه کنید تا ببینید آیا یک ویژگی قبل از استفاده از آن در دسترس است یا خیر. به این ترتیب، کد در مرورگرهای پشتیبانی نشده خراب نمی شود.

در اینجا یک مثال است:

 if ( Array .prototype.findLast) { // Use the findLast method const arr = [ 1 , 2 , 3 , 4 , 5 ]; const lastOdd = arr.findLast( num => num % 2 !== 0 ); console .log(lastOdd); // Output: 5 } else { // Fallback code for older browsers console .log( 'findLast is not supported' ); }

این مثال وجود findLast را تحلیل می کند. اگر این کار را نکرد، می‌توانید یک نسخه بازگشتی اجرا کنید یا پیامی را نشان دهید. این رویکرد به حفظ سازگاری به عقب کمک می کند.

مروری بر Polyfills برای آپشن های جدید جاوا اسکریپت

polyfill قطعه کدی است که از ویژگی های جدید جاوا اسکریپت در مرورگرهایی که هنوز آنها را ندارند پشتیبانی می کند. اساساً اجرای جایگزینی از ویژگی را فراهم می کند.

به عنوان مثال، بیایید یک polyfill برای findLast ایجاد کنیم:

 if (! Array .prototype.findLast) { Array .prototype.findLast = function ( callback ) { for ( let i = this .length - 1 ; i >= 0 ; i--) { if (callback( this [i], i, this )) { return this [i]; } } return undefined ; }; }

این polyfill متد findLast را به آرایه هایی که از آن پشتیبانی نمی کنند اضافه می کند. اکنون، حتی مرورگرهای قدیمی‌تر نیز می‌توانند کدهایی را اجرا کنند که از این ویژگی استفاده می‌کنند.

Polyfills برای روش‌های رایج در سایت‌هایی مانند MDN یا از طریق کتابخانه‌هایی مانند core-js که بسیاری از آپشن های جاوا اسکریپت مدرن را پوشش می‌دهند در دسترس هستند.

ابزارها و منابع برای تست پشتیبانی مرورگر

قبل از استفاده از ویژگی های جدید، تحلیل میزان پشتیبانی گسترده آنها در مرورگرهای مختلف مفید است. در اینجا چند ابزار وجود دارد که می تواند کمک کند:

آیا می توانم استفاده کنم : یک وب سایت محبوب که سازگاری مرورگر را برای ویژگی های جدید جاوا اسکریپت نشان می دهد. می توانید روش هایی مانند toSorted یا findLast را جستجو کنید تا ببینید کدام مرورگرها از آنها پشتیبانی می کنند.

مثال: آیا می توانم استفاده کنم: findLast

Babel : یک کامپایلر جاوا اسکریپت که کدهای جاوا اسکریپت جدید را به نسخه های قدیمی تبدیل می کند که روی مرورگرهای قدیمی کار می کنند. Babel می تواند به طور خودکار polyfills را برای ویژگی های پشتیبانی نشده اضافه کند.

مثال استفاده با بابل:

 npm install --save-dev @babel/preset-env

سپس Babel را برای استفاده از پیش تنظیم پیکربندی کنید:

 { "presets" : [ "@babel/preset-env" ] }

Polyfill.io : سرویسی که به صورت خودکار پلی فیل های لازم را بر اساس مرورگر کاربر ارائه می دهد.

برای استفاده از آن، به سادگی این اسکریپت را به HTML خود اضافه کنید:

 < script src = "https://polyfill.io/v3/polyfill.min.js" > </ script >

این اسکریپت به طور خودکار فقط پلی پرهای مورد نیاز برای مرورگر در حال بارگذاری صفحه را اضافه می کند، و آن را راهی آسان برای مدیریت سازگاری به عقب می کند.

نتیجه گیری

ما برخی از جدیدترین آپشن های جاوا اسکریپت را تحلیل کرده‌ایم، از جمله روش‌هایی مانند findLast ، findLastIndex ، toReversed ، toSorted ، toSpliced ، و with .

این گفت نی‌های جدید انعطاف‌پذیری و کارایی بیشتری را برای کار با آرایه‌ها به ارمغان می‌آورند. آنها به جلوگیری از تغییرات ناخواسته در داده های اصلی کمک می کنند و کد را پاک تر و راحت تر می کنند. به عنوان مثال، toSorted امکان مرتب سازی بدون تغییر آرایه اصلی را فراهم می کند، و findLast مکان یابی آخرین عنصر منطبق را در یک فهرست ساده تر می کند.

هر یک از این روش ها باعث صرفه جویی در زمان و کاهش پیچیدگی هنگام مدیریت و تبدیل داده ها می شود.

همانطور که جاوا اسکریپت به تکامل خود ادامه می دهد، مهم است که از این روش ها در پروژه های آینده استفاده کنید. آنها می توانند وظایف پیچیده دستکاری داده ها را ساده کرده و نگهداری کد شما را آسان تر کنند. سعی کنید این روش ها را به پایگاه کد فعلی خود اضافه کنید و تحلیل کنید که چگونه می توانند نحوه نوشتن و مدیریت جاوا اسکریپت را بهبود بخشند.

دفعه بعد که با آرایه ها کار می کنید، از toSorted برای مرتب سازی، findLast برای جستجو یا with برای جایگزینی عناصر بدون تغییر داده های اصلی استفاده کنید. این تنظیمات کوچک می تواند تاثیر زیادی بر کیفیت کد شما داشته باشد.

اگر سوال یا پیشنهادی دارید، در صورت تمایل با لینکدین تماس بگیرید. اگر از این محتوا لذت بردید، برای حمایت از ایجاد محتوای مناسب‌تر برای توسعه‌دهندگان ، یک قهوه برای من بخرید .

خبرکاو