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

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

پیش نیازها: سواد اولیه کامپیوتر، درک اولیه HTML و CSS، درک جاوا اسکریپت چیست.

هدف: درک اینکه آرایه ها چیست و چگونه آنها را در جاوا اسکریپت دستکاری کنیم.

آرایه ها چیستند؟

آرایه‌ها به طور کلی به عنوان “list-like objects” توصیف می شوند. آنها اساساً اشیاء منفرد هستند که حاوی چندین مقدار ذخیره شده در یک لیست هستند.

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

اگر آرایه‌ها را نداشتیم، باید هر آیتم را در یک متغیر جداگانه ذخیره می‌کردیم، سپس کدی را که چاپ و اضافه کردن را جداگانه برای هر آیتم انجام می‌دهد، فراخوانی می‌کردیم. نوشتن این کار بسیار طولانی تر، کارآمدتر و مستعد خطا است. اگر ما ۱۰ مورد برای افزودن به فاکتور داشتیم، آزاردهنده بود، اما در مورد ۱۰۰ مورد یا ۱۰۰۰ مورد چطور؟ در ادامه مقاله به این مثال باز خواهیم گشت.

ایجاد آرایه‌ها

آرایه‌ها از براکت ها و آیتم هایی تشکیل شده اند که با کاما از هم جدا می شوند.

۱. فرض کنید می خواهیم یک لیست خرید را در یک آرایه ذخیره کنیم. کد زیر را در کنسول قرار دهید:

const shopping = [‘bread’, ‘milk’, ‘cheese’, ‘hummus’, ‘noodles’];

console.log(shopping);

۲. در مثال بالا، هر آیتم یک رشته است، اما در یک آرایه‌ می‌توانیم انواع داده‌های مختلفی را ذخیره کنیم ؛ رشته‌ها، اعداد، اشیا و حتی آرایه‌های دیگر. ما همچنین می‌توانیم انواع داده‌ها را در یک آرایه واحد ترکیب کنیم، لازم نیست خودمان را به ذخیره اعداد در یک آرایه و فقط در رشته‌ها محدود کنیم. مثلا:

const sequence = [۱, ۱,۲,۳,۵,۸,۱۳];

const random = [‘tree’, ۷۹۵, [۰, ۱, ۲]];

۳. قبل از ادامه، چند آرایه نمونه ایجاد کنید.

پیدا کردن طول آرایه ها

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

const shopping = [‘bread’, ‘milk’, ‘cheese’, ‘hummus’, ‘noodles’];

console.log(shopping.length);  // 5

دسترسی و اصلاح آیتم های آرایه

آیتم های یک آرایه شماره گذاری می شوند و از صفر شروع می شوند. به این عدد شاخص کالا می گویند. بنابراین مورد اول دارای شاخص ۰، مورد دوم دارای شاخص ۱ و غیره است. شما می‌توانید با استفاده از علامت‌گذاری براکت و ارائه نمایه مورد، به موارد جداگانه در آرایه، به همان روشی که به حروف یک رشته دسترسی داشتید، دسترسی پیدا کنید.

۱. موارد زیر را در کنسول خود وارد کنید:

const shopping = [‘bread’,‘milk’,‘cheese’, ‘hummus’, ‘noodles’];

console.log(shopping[۰]);

// returns “bread”

۲. شما همچنین می توانید یک آیتم در یک آرایه را با دادن مقدار جدید به یک آیتم آرایه تغییر دهید. این را امتحان کنید:

const shopping = [‘bread’, ‘milk’, ‘cheese’,‘hummus’, ‘noodles’];

shopping[۰] = ‘tahini’;

console.log(shopping);

// shopping will now return [ “tahini”, “milk”, “cheese”, “hummus”, “noodles” ]

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

const random = [‘tree’, ۷۹۵, [۰, ۱, ۲]];

random[۲][۲];

۴. سعی کنید قبل از حرکت، تغییرات بیشتری در نمونه های آرایه خود ایجاد کنید. کمی بازی کنید و ببینید چه چیزی کار می کند و چه چیزی خوب نیست.

پیدا کردن شاخص آیتم های یک آرایه

اگر نمایه یک آیتم را نمی دانید، می توانید از متد ()indexOf استفاده کنید. متد ()indexOf یک آیتم را به عنوان آرگومان می گیرد و اگر آیتم در آرایه نباشد، شاخص آیتم یا -1 را برمی گرداند:

const birds = [‘Parrot’, ‘Falcon’, ‘Owl’];

console.log(birds.indexOf(‘Owl’));   //  ۲

console.log(birds.indexOf(‘Rabbit’)); // -۱

افزودن آیتم ها

برای افزودن یک یا چند آیتم به انتهای یک آرایه می توانیم از ()push استفاده کنیم. توجه داشته باشید که باید یک یا چند مورد را که می خواهید به انتهای آرایه خود اضافه کنید اضافه کنید.

const cities = [‘Manchester’, ‘Liverpool’];

cities.push(‘Cardiff’);

console.log(cities);      // [ “Manchester”, “Liverpool”, “Cardiff” ]

cities.push(‘Bradford’, ‘Brighton’);

console.log(cities);      // [ “Manchester”, “Liverpool”, “Cardiff”, “Bradford”, “Brighton” ]

اگر می خواهید طول آرایه جدید را در یک متغیر ذخیره کنید، می توانید کاری شبیه به این انجام دهید:

const cities = [‘Manchester’, ‘Liverpool’];

const newLength = cities.push(‘Bristol’);

console.log(cities);     // [ “Manchester”, “Liverpool”, “Bristol” ]

console.log(newLength);  // 3

برای افزودن یک آیتم به ابتدای آرایه، از ()unshift استفاده میکنیم:

const cities = [‘Manchester’, ‘Liverpool’];

cities.unshift(‘Edinburgh’);

console.log(cities);     // [ “Edinburgh”, “Manchester”, “Liverpool” ]

حذف آیتم ها

برای حذف آخرین مورد از آرایه، از ()pop استفاده کنید.

const cities = [‘Manchester’, ‘Liverpool’];

cities.pop();

console.log(cities);     // [ “Manchester” ]

متد ()pop آیتمی که حذف شده را برمی گرداند. برای ذخیره آن مورد در یک متغیر جدید، می توانید این کار را انجام دهید:

const cities = [‘Manchester’,‘Liverpool’];

const removedCity = cities.pop();

console.log(removedCity);   // “Liverpool”

برای حذف اولین مورد از یک آرایه، از ()shift استفاده میکنیم:

const cities = [‘Manchester’,‘Liverpool’];

cities.shift();

console.log(cities);     // [ “Liverpool” ]

اگر شاخص یک آیتم را می دانید، می توانید آن را با استفاده از ()splice:

const cities = [‘Manchester’, ‘Liverpool’,‘Edinburgh’, ‘Carlisle’];

const index = cities.indexOf(‘Liverpool’);

if (index !== –۱) {

  cities.splice(index, ۱);

}

console.log(cities);     // [ “Manchester”, “Edinburgh”, “Carlisle” ]

در این فراخوانی به ()splice، آرگومان اول می گوید که حذف آیتم ها از کجا شروع شود و آرگومان دوم می گوید که چند آیتم باید حذف شوند. بنابراین می توانید بیش از یک مورد را حذف کنید:

const cities = [‘Manchester’,‘Liverpool’,‘Edinburgh’, ‘Carlisle’];

const index = cities.indexOf(‘Liverpool’);

if (index !== –۱) {

  cities.splice(index, 2);

}

console.log(cities);     // [ “Manchester”, “Carlisle” ]

دسترسی به هر آیتم

اغلب اوقات شما می خواهید به هر آیتم در آرایه دسترسی داشته باشید. می توانید این کار را با استفاده از عبارت for…of انجام دهید:

const birds = [‘Parrot’,‘Falcon’, ‘Owl’];

for (const bird of birds) {

  console.log(bird);

}

می توانید این کار را با استفاده از ()map انجام دهید. کد زیر آرایه ای از اعداد را می گیرد و هر عدد را دو برابر می کند:

function double(number) {

  return number * ۲;

}

const numbers = [۵, ۲, ۷, ۶];

const doubled = numbers.map(double);

console.log(doubled);  // [ 10, 4, 14, 12 ]

ما یک تابع به ()map می دهیم و ()map یک بار برای هر آیتم آرایه تابع را فراخوانی می کند و در آیتم ارسال می کند. سپس مقدار بازگشتی از هر فراخوانی تابع را به یک آرایه جدید اضافه می کند و در نهایت آرایه جدید را برمی گرداند.

گاهی اوقات می خواهید یک آرایه جدید ایجاد کنید که فقط شامل موارد موجود در آرایه اصلی باشد که با برخی آزمایش ها مطابقت دارند. می توانید این کار را با استفاده از ()filter انجام دهید. کد زیر آرایه‌ای از رشته‌ها را می‌گیرد و آرایه‌ای را برمی‌گرداند که فقط شامل رشته‌هایی است که بیش از ۸ کاراکتر طول دارند:

function isLong(city) {

  return city.length > ۸;

}

const cities = [‘London’, ‘Liverpool’, ‘Totnes’, ‘Edinburgh’];

const longer = cities.filter(isLong);

console.log(longer);  // [ “Liverpool”, “Edinburgh” ]

مانند ()map یک تابع به متد ()filter می دهیم و ()filter این تابع را برای هر آیتم آرایه که در آیتم ارسال می کند فراخوانی می کند. اگر تابع true را برگرداند، آیتم به یک آرایه جدید اضافه می شود. در نهایت آرایه جدید را برمی گرداند.

تبدیل بین رشته ها و آرایه ها

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

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

۱. بیایید با این بازی کنیم تا ببینیم چگونه کار می کند. ابتدا یک رشته در کنسول خود ایجاد کنید:

const data = ‘Manchester,London,Liverpool,Birmingham,Leeds,Carlisle’;

۲. حالا بیایید آن را در هر کاما تقسیم کنیم:

const cities = data.split(‘,’);

cities;

۳. در نهایت، سعی کنید طول آرایه جدید خود را پیدا کنید و برخی موارد را از آن بازیابی کنید:

cities.length;

cities[.]; // the first item in the array

cities[۱]; // the second item in the array

cities[cities.length – ۱]; // the last item in the array

4. همچنین می توانید با استفاده از متد join() برعکس بروید. موارد زیر را امتحان کنید:

const commaSeparated = cities.join(‘,’);

commaSeparated;

5. روش دیگر برای تبدیل آرایه به رشته استفاده از متد ()toString است. ()toString مسلماً ساده‌تر از ()join است زیرا پارامتری نمی‌گیرد، اما محدودتر است. با ()join می توانید جداکننده های مختلفی را مشخص کنید، در حالی که ()toString همیشه از کاما استفاده می کند. (گام 4 را با نویسه ای متفاوت از کاما اجرا کنید.)

const dogNames = [‘Rocket’,‘Flash’,‘Bella’,‘Slugger’];

dogNames.toString(); // Rocket,Flash,Bella,Slugger

یادگیری فعال: چاپ products

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

1. در زیر کامنت number 1 // تعدادی رشته وجود دارد که هر کدام حاوی نام محصول و قیمت است که با یک دونقطه از هم جدا شده اند. ما از شما می خواهیم که این را به یک آرایه تبدیل کنید و آن را در آرایه ای به نام products ذخیره کنید.

2. در زیر کامنت number 2 // ، یک حلقه ()for…of برای عبور از هر آیتم در آرایه محصولات شروع کنید.

3. در زیر کامنت number 3 // می‌خواهیم یک خط کد بنویسید که آیتم آرایه فعلی (name:price) را به دو آیتم جداگانه تقسیم می‌کند، یکی فقط شامل نام و دیگری فقط شامل قیمت است.

اکنون

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

5. یک متغیر به نام total وجود دارد که ایجاد می شود و در بالای کد مقدار 0 به آن داده می شود. در داخل حلقه (زیر number 4 //) می‌خواهیم خطی اضافه کنید که در هر تکرار حلقه، قیمت فعلی کالا را به کل آن اضافه می‌کند، به طوری که در پایان کد، مجموع صحیح روی فاکتور چاپ می‌شود. ممکن است برای انجام این کار به یک اپراتور انتساب نیاز داشته باشید.

6. می‌خواهیم خط زیر number 5 // را تغییر دهید تا متغیر itemText برابر با “current item name — $current item price” باشد، برای مثال “Shoes — $23.99” در هر مورد، بنابراین اطلاعات صحیح برای هر مورد بر روی فاکتور چاپ شده است این فقط یک الحاق رشته ساده است که باید برای شما آشنا باشد.

7. در نهایت، در زیر نظر number 6 //، باید یک } اضافه کنید تا انتهای حلقه ()for…of را مشخص کنید.

یادگیری فعال: ۵ جستجوی برتر

استفاده خوب از روش‌های آرایه مانند ()push و ()pop زمانی است که در حال حفظ رکوردی از آیتم‌های فعال فعلی در یک برنامه وب هستید. برای مثال در یک صحنه متحرک، ممکن است آرایه‌ای از اشیاء را داشته باشید که گرافیک پس‌زمینه نمایش داده شده را نشان می‌دهند، و ممکن است بخواهید فقط 50 مورد را به‌طور هم‌زمان نمایش داده شود، به دلایل عملکرد یا درهمریختگی. همانطور که اشیاء جدید ایجاد و به آرایه اضافه می شوند، موارد قدیمی تر را می توان از آرایه حذف کرد تا تعداد مورد نظر حفظ شود.

در این مثال، ما یک کاربرد بسیار ساده‌تر را نشان می‌دهیم. در اینجا ما یک سایت جست‌وجوی جعلی با یک کادر جستجو به شما ارائه می‌کنیم. ایده این است که وقتی عبارات در کادر جستجو وارد می شوند، ۵ عبارت برتر جستجوی قبلی در لیست نمایش داده می شوند. وقتی تعداد عبارت‌ها از ۵ بیشتر شود، هر بار که عبارت جدیدی به بالا اضافه می‌شود، آخرین عبارت شروع به حذف می‌کند، بنابراین ۵ عبارت قبلی همیشه نمایش داده می‌شوند.

توجه: در یک برنامه جستجوی واقعی، احتمالاً می‌توانید روی عبارت‌های جستجوی قبلی کلیک کنید تا به جستجوهای قبلی بازگردید، و نتایج جستجوی واقعی را نمایش می‌دهد! ما در حال حاضر آن را ساده نگه می داریم.

نتیجه گیری و پایان

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

تنها کاری که باید انجام دهید این است که از طریق ارزیابی این ماژول کار کنید، که درک شما را از مقالات قبل از آن آزمایش می کند.

ممنون که در این چند مقاله همراه کیهان وب بودید! با ما در ارتباط باشید!