در ادامه پست گذشته با عنوان 12 هک بسیار مفید جاوا اسکریپت - قسمت اول قصد دارم در این پست بخش دوم این هک های جالب و کاربردی رو به شما دوستان آموزش بدم.
7 - گرفتن آخرین آیتم یک آرایه
کد Array.prototype.slice(begin, end) به شما این قدرت رو میده که بخشی از یک آرایه رو به سادگی cut کنید اونم با مقداردهی کردن راحت begin و end اما نکته ای که وجود داره اینکه اگر شما end رو وارد نکنید بصورت خودکار آخرین آیتم آرایه انتخاب میشه بنظرم بعضی از شما میدونید که این تابع یعنی slice میتونه مقدار منفی هم بپذیره اما اگر این کار درست انجام بشه به سادگی میتونید, از اخرین آیتم شروع به گرفتن آیتم های مورد نظر خودتون کنید . هیچ چیز, بهتر از مثال, برای درک این موضوع نیست . مثال زیر رو نگاه کنید
var array = [1, 2, 3, 4, 5, 6];
console.log(array.slice(-1)); // [6]
console.log(array.slice(-2)); // [5,6]
console.log(array.slice(-3)); // [4,5,6]
8 - کوتاه کردن آرایه
این تکنیک به شما کمک میکنه تا به سادگی آرایه های خودتون رو کوتاه کنید, فرض کنید که یک آرایه با ۱۰ آیتم دارید اما فقط نیاز به ۵ آیتم اول دارید . با این روش میتونید بسادگی ۵ آیتم دوم رو حذف کنید, اونم با ست کردن این کد array.length = 5 اما برای درک بیشتر به مثال زیر دقت کنید .
var array = [1, 2, 3, 4, 5, 6];
console.log(array.length); // 6
array.length = 3;
console.log(array.length); // 3
console.log(array); // [1,2,3]
۹- جایگزین کردن همه
فکر کنم با تابع String.replace() آشنا باشین! با استفاده از این تابع میتونید مقادیری رو در رشته های خودتون جایگزین کنید اما چطور میشه این مقدار رو در تمام نقاط یک رشته و نه فقط در یک جا تغییر داد . یه چیزی شبیه تابع replaceAll() بکارمون میاد درسته ؟ اما نیاز به چنین تابعی نیست شما تنها با عبارات با قاعده و /g در آخرش میتونید یک مقدار رو در کل یک متن تغییر بدید .
var string = "john john";
console.log(string.replace(/hn/, "ana")); // "joana john"
console.log(string.replace(/hn/g, "ana")); // "joana joana"
۱۰- ادغام دو آرایه
همه ما میدونیم برای ادغام دو آرایه میتونید از Array.concat() استفاده کنیم بصورت زیر
var array1 = [1, 2, 3];
var array2 = [4, 5, 6];
console.log(array1.concat(array2)); // [1,2,3,4,5,6];
اما موضوعی که وجود داره اینکه این روش در آرایه های بزرگ به معماری زیادی برای ترکیب دو آرایه و ساخت یک آرایه جدید نیاز پیدا میکنه و این میتونه در پروژه های که مصرف معماری برامون مهمه برای ما مشکل ایجاد کنه اما چطور میشه این مشکل رو حل کرد . خیلی ساده با استفاده از Array.push.apply(arr1, arr2) میشه این موضوع رو راحت حل کرد. این تابع یک آرایه جدید میسازه در عین حال که دو آرایه رو ترکیب میکنه و به معماری زیادی هم نیاز نداره .
var array1 = [1, 2, 3];
var array2 = [4, 5, 6];
console.log(array1.push.apply(array1, array2)); // [1,2,3,4,5,6];
۱۱ - تبدیل کردن یک NodeList به آرایه
اگر شما کد document.querySelectorAll("p") رو اجرا کنید احتمالا تمام المنت های p در DOM رو براتون لیست میکنه اونم به صورت یک NodeList . خوب اگر یک آرایه بصورت NodeList بر میگردونه پس مشکل ما چیه ؟ مشکل ما اینکه ما همه توابع آرایه ها مثل sort , reduce , map یا filter رو نمی تونم در این لیست استفاده کنیم . خب برای فعال کردن این توابع و تبدیل کردن NodeList به یک آرایه میتونیم از تکنولوژی [].slice.call(elements) استفاده کنیم مثال زیر واضع این موضوع رو نشون میده
var elements = document.querySelectorAll("p"); // NodeList
var arrayElements = [].slice.call(elements); // Now the NodeList is an array
var arrayElements = Array.from(elements); // This is another way of converting NodeList to Array
۱۲- بهم ریخت آیتم های یک آرایه
شما به سادگی میتونید آیتم های یک آرایه رو با روش زیر بهم بریزید و دیگه احتیاجی به کتابخونه های خارجی برای این کار هم ندارید مثل Lodash
var list = [1, 2, 3];
console.log(list.sort(function() {
return Math.random() - 0.5
})); // [2,1,3]
نتیجه گیری
حالا بعد از گذروندن این ۱۲ هک شما با موارد مفیدی از جاوااسکریپت آشنا شدید که مطمئنم در پروژه های بعدی به شما کمک میکنه تا ساده تر و تمیزتر کدنویسی کنید . این روش های که مطرح شد در بسیاری از ابزارها نظیر Lodash و Underscore.js و Strings.js و ابزارهای شبیه به اینها استفاده شده . امیدوارم این پست کاملا مورد استفاده دوستان قرار گرفته باشه.
دیدگاه و پرسش
در حال دریافت نظرات از سرور، لطفا منتظر بمانید
در حال دریافت نظرات از سرور، لطفا منتظر بمانید