روش‌های مختلف کار با آرایه‌ها در JavaScript و طراحی وب

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

برای کار با آرایه‌ها در جاوااسکریپت، ترفندها و روش‌های مختلفی وجود دارد که در این مقاله می‌خواهیم به ۱۰ مورد جالب و کاربردی اشاره کنیم که شاید برخی را ندیده باشید. با ما باشید.

کار با تک‌تک عناصر آرایه توسط forEach()

به جای استفاده از متغیری مثل i در یک حلقه که با for‌ ساخته شده و پیش رفتن به اندازه‌ی طول آرایه، می‌توانید از روش خلاصه‌تر و کوتاه‌تر forEach استفاده کنید. در این صورت نیازی به استفاده از length برای تعیین طول آرایه و شمارنده‌ی i نیست و مستقیماً دستورات موردنیاز در حلقه قرار می‌گیرد و به تعداد عناصر آرایه اجرا و تکرار می‌شود. مثل مورد زیر:

  const arr = [1, 2, 3, 4, 5, 6];

  arr.forEach(item => {
    console.log(item); // output: 1 2 3 4 5 6  });

چک کردن وجود عنصری با مقدار خاص با دستور includes()

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

در مثال زیر با توجه به اینکه متغیری به اسم arr یک آرایه است و عنصر ۲ را دارد، نتیجه‌ی دستور اول، صحیح یا True است و نتیجه‌ی دستور دوم با توجه به فقدان عدد ۷، نادرست یا False است.

  const arr = [1, 2, 3, 4, 5, 6];

  arr.includes(2); // output: true
  arr.includes(7); // output: false

فیلتر کردن عناصر آرایه با دستور filter()

با دستور filter می‌توانید عناصری از آرایه را حذف کنید و یک آرایه‌ی فیلترشده بسازید. در فیلتر کردن می‌توانید از عبارت‌های منطقی و توابع مختلف استفاده کنید. به عنوان مثال در نمونه‌ی زیر، آرایه‌ی filtered از فیلتر کردن آرایه‌ی arr حاصل می‌شود و عناصری که مقدارشان عددی و بیش از ۳ باشد، باقی می‌ماند.

  const arr = [1, 2, 3, 4, 5, 6];

  // item(s) greater than 3
  const filtered = arr.filter(num => num > 3);
  console.log(filtered); // output: [4, 5, 6]

  console.log(arr); // output: [1, 2, 3, 4, 5, 6]

ایجاد آرایه‌ی جدید با استفاده از عناصر آرایه‌های دیگر توسط دستور map()

با دستور map می‌توانید آرایه‌ی جدیدی با پردازش آرایه‌های قبلی بسازید. به عنوان مثال می‌توانید یک عمل ریاضی روی مقادیر آرایه‌ای انجام دهید و هر عنصر آن را یک واحد بیشتر کنید و به این ترتیب آرایه‌ی جدیدی بسازید. به مثال زیر توجه کنید:

  const arr = [1, 2, 3, 4, 5, 6];

  // add one to every element
  const oneAdded = arr.map(num => num + 1);
  console.log(oneAdded); // output [2, 3, 4, 5, 6, 7]

  console.log(arr); // output: [1, 2, 3, 4, 5, 6]

تبدیل آرایه به یک مقدار نهایی با دستور reduce()

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

  const arr = [1, 2, 3, 4, 5, 6];

  const sum = arr.reduce((total, value) => total + value, 0);
  console.log(sum); // 21

پاسخ به این سوال که آیا حداقل یک عضو آرایه شرطی را دارد؟ با some()

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

در مثال زیر با دستور some اول بررسی می‌شود که آیا آرایه عضوی با مقدار بیش از ۴ دارد و پاسخ مثبت است و در دستور بعدی بررسی می‌شود که آیا حداقل یک عضو کوچک‌تر از صفر وجود دارد که نتیجه false است.

  const arr = [1, 2, 3, 4, 5, 6];

  // at least one element is greater than 4?
  const largeNum = arr.some(num => num > 4);
  console.log(largeNum); // output: true

  // at least one element is less than or equal to 0?
  const smallNum = arr.some(num => num <= 0);
  console.log(smallNum); // output: false

چک کردن اینکه آیا تمام عناصر آرایه شرطی را دارند یا خیر با دستور every()

با دستور every می‌توانید بررسی کنید که آیا تمام عناصر آرایه، شرط خاصی را دارند یا خیر. اگر تمام عناصر در شرط تعیین شده صدق کنند، خروجی True خواهد شد و اگر حتی یک عضو آرایه در شرط صدق نکند، خروجی False یا نادرست می‌شود.

  const arr = [1, 2, 3, 4, 5, 6];

  // all elements are greater than 4
  const greaterFour = arr.every(num => num > 4);
  console.log(greaterFour); // output: false

  // all elements are less than 10
  const lessTen = arr.every(num => num < 10);
  console.log(lessTen); // output: true

مرتب کردن صعودی یا نزولی اعضای آرایه با sort()

با دستور sort می‌توانید عناصر آرایه را به ترتیب صعودی یا نزولی مرتب کنید و در مورد حروف و همین‌طور اعداد عمل می‌کند. برای مرتب کردن نزولی یا descending که عناصر کوچک می‌شوند، از sort((a, b) => a > b ? -1 : 1) استفاده کنید و برای مرتب کردن صعودی یا ascending که عناصر بزرگ می‌شوند، از sort((a, b) => a > b ? 1 : -1) استفاده کنید. به مثال‌های مرتب کردن دو آرایه‌ی عددی و حروفی توجه کنید:

  const arr = [1, 2, 3, 4, 5, 6];
  const alpha = ['e', 'a', 'c', 'u', 'y'];

  // sort in descending order
  descOrder = arr.sort((a, b) => a > b ? -1 : 1);
  console.log(descOrder); // output: [6, 5, 4, 3, 2, 1]

  // sort in ascending order
  ascOrder = alpha.sort((a, b) => a > b ? 1 : -1);
  console.log(ascOrder); // output: ['a', 'c', 'e', 'u', 'y']

تبدیل متغیرهای شبه‌آرایه به آرایه با Array.from()

در کارکردن با عناصر صفحات وب، ممکن است آرایه‌ای حاوی نودها بسازید و بخواهید روی آن کار کنید اما با ارورهایی روبرو شوید که مضمونشان این است که متغیر ذکر شده از نوع آرایه نیست! برای تبدیل کردن متغیرهایی که حاوی نودهایی از صفحه هستند به آرایه، از دستور Array.from استفاده کنید.

در مثال زیر برای یافتن تمام لینک‌ها که با سلکتور a در HTML تعریف می‌شوند، از دستور document.querySelectorAll استفاده شده و حاصل کار در متغیر list ذخیره شده است. طبعاً list یک آرایه‌ی معمولی نیست. بنابراین با دستور Array.from به آرایه‌ی واقعی تبدیل شده و در متغیر listAsArray ذخیره شده است. در نهایت با استفاده از دستور isArray می‌توان بررسی کرد که آیا لیست عناصر واقعاً آرایه است یا خیر.

  // I assume that you have created unorder list of items in our html file.

  const list = document.querySelectorAll('a');
  const listAsArray = Array.from(document.querySelectorAll('a'));

  // is true array?
  console.log(Array.isArray(list)); // output: false
  console.log(Array.isArray(listAsArray ));  // output: true

دستور Array.from می‌تواند کلمات و موارد دیگر را نیز جدا کرده و به یک آرایه تبدیل کند. به مثال زیر توجه کنید:

  const name = 'frugence';
  const nameArray = Array.from(name);

  console.log(name); // output: frugence
  console.log(nameArray); // output: ['f', 'r', 'u', 'g', 'e', 'n', 'c', 'e']

ساخت آرایه از عبارت‌ها و متغیرها با Array.of()

با دستور Array.of می‌توانید به راحتی از متغیرهای دیگر، اعداد و حروف و عبارت‌ها، آرایه بسازید و برای کارهای بعدی استفاده کنید.

  const nums = Array.of(1, 2, 3, 4, 5, 6);
  console.log(nums); // output: [1, 2, 3, 4, 5, 6]

devسیاره‌ی آی‌تی