آموزش آرایه‌ها و شیء‌ها در JavaScript

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

آرایه‌ها در JavaScript

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

تعریف و استفاده از آرایه‌ها

برای تعریف یک آرایه، می‌توانیم از براکت‌های مربعی [ ] استفاده کنیم و مقادیر آرایه را با کاما , از هم جدا کنیم. این مقادیر می‌توانند از هر نوع داده‌ای باشند، از جمله رشته (string)، عدد (number)، شیء (object)، و حتی آرایه‌های دیگر (nested arrays).

مثال:

let fruits = ["سیب", "موز", "پرتقال"];
console.log(fruits[0]); // خروجی: سیب
console.log(fruits[1]); // خروجی: موز
console.log(fruits[2]); // خروجی: پرتقال

 

در این مثال، یک آرایه به نام fruits داریم که شامل سه عنصر است. ما به هر عنصر از طریق ایندکس آن دسترسی پیدا می‌کنیم، به طوری که fruits[0] اولین عنصر یعنی “سیب”، fruits[1] دومین عنصر یعنی “موز”، و fruits[2] سومین عنصر یعنی “پرتقال” را نمایش می‌دهد.

دستورات و متدهای پرکاربرد آرایه‌ها

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

۱. push(): افزودن عنصر به انتهای آرایه
با متد push می‌توانیم یک یا چند عنصر جدید را به انتهای آرایه اضافه کنیم. این متد مقدار جدید را به آرایه اضافه کرده و طول جدید آرایه را بازمی‌گرداند.

مثال:

fruits.push("انگور");
console.log(fruits); // خروجی: ["سیب", "موز", "پرتقال", "انگور"]

۲. pop(): حذف عنصر از انتهای آرایه
متد pop آخرین عنصر آرایه را حذف می‌کند و همان عنصر حذف شده را بازمی‌گرداند.

مثال:

let removedFruit = fruits.pop();
console.log(removedFruit); // خروجی: انگور
console.log(fruits); // خروجی: ["سیب", "موز", "پرتقال"]

۳. shift(): حذف عنصر از ابتدای آرایه
متد shift اولین عنصر آرایه را حذف کرده و آن عنصر را بازمی‌گرداند. این عملیات باعث تغییر ایندکس سایر عناصر آرایه می‌شود.

مثال:

let firstFruit = fruits.shift();
console.log(firstFruit); // خروجی: سیب
console.log(fruits); // خروجی: ["موز", "پرتقال"]

۴. unshift(): افزودن عنصر به ابتدای آرایه
با unshift می‌توانیم یک یا چند عنصر را به ابتدای آرایه اضافه کنیم. این متد طول جدید آرایه را بازمی‌گرداند.

مثال:

fruits.unshift("کیوی");
console.log(fruits); // خروجی: ["کیوی", "موز", "پرتقال"]

۵. splice(): افزودن یا حذف عناصر در یک موقعیت خاص
متد splice یکی از متدهای پیشرفته برای افزودن، حذف یا جایگزینی عناصر در آرایه است. این متد می‌تواند همزمان چند عنصر را حذف کرده و عناصر جدیدی اضافه کند.

نحوه استفاده:

// اضافه کردن یک عنصر
fruits.splice(1, 0, "توت‌فرنگی");
console.log(fruits); // خروجی: ["کیوی", "توت‌فرنگی", "موز", "پرتقال"]

// حذف یک عنصر
fruits.splice(2, 1);
console.log(fruits); // خروجی: ["کیوی", "توت‌فرنگی", "پرتقال"]

۶. slice(): ایجاد زیرآرایه از یک آرایه
متد slice یک بخش از آرایه را جدا کرده و یک آرایه جدید با عناصر جدا شده بازمی‌گرداند. این متد شامل موقعیت شروع و پایان (به‌صورت غیرشامل) است.

مثال:

let citrus = fruits.slice(1, 3);
console.log(citrus); // خروجی: ["توت‌فرنگی", "پرتقال"]

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

مثال:

let position = fruits.indexOf("پرتقال");
console.log(position); // خروجی: 2

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

مثال:

fruits.forEach(function(item) {
  console.log(item);
});
// خروجی:
// کیوی
// توت‌فرنگی
// پرتقال

۹. map(): ایجاد یک آرایه جدید با نتایج اجرای یک تابع برای هر عنصر
متد map یک آرایه جدید با نتایج اجرای یک تابع خاص روی هر عنصر آرایه ایجاد می‌کند و به‌عنوان خروجی، آرایه جدید را بازمی‌گرداند.

مثال:

let lengths = fruits.map(function(item) {
  return item.length;
});
console.log(lengths); // خروجی: [4, 8, 6]

۱۰. filter(): ایجاد یک آرایه جدید با عناصر که معیار خاصی را دارند
متد filter یک آرایه جدید شامل عناصری که یک معیار خاص را برآورده می‌کنند، بازمی‌گرداند.

مثال:

let longFruits = fruits.filter(function(item) {
  return item.length > 4;
});
console.log(longFruits); // خروجی: ["توت‌فرنگی", "پرتقال"]

۱۱. reduce(): خلاصه‌سازی تمام عناصر به یک مقدار واحد
متد reduce تمام عناصر آرایه را به یک مقدار واحد تبدیل می‌کند. این متد معمولاً برای عملیات‌هایی مانند جمع، ضرب، یا ترکیب داده‌ها استفاده می‌شود.

مثال:

let totalLength = fruits.reduce(function(total, item) {
  return total + item.length;
}, 0);
console.log(totalLength); // خروجی: 18

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

شیء‌ها در JavaScript

شیء‌ها (Objects) در JavaScript یکی از انواع داده‌های پیچیده هستند که به ما این امکان را می‌دهند تا اطلاعات متنوعی را در قالب یک واحد منسجم ذخیره و مدیریت کنیم. هر شیء می‌تواند شامل ویژگی‌ها (properties) و متدها (methods) باشد. ویژگی‌ها به اطلاعات یا خصوصیات مربوط به شیء اشاره دارند، در حالی که متدها توابعی هستند که می‌توانند روی شیء اعمال شوند.

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

ایجاد و استفاده از شیء‌ها

برای تعریف یک شیء در JavaScript، از دو آکولاد { } استفاده می‌کنیم و ویژگی‌ها و متدها را به شکل جفت‌های کلید-مقدار (key-value pairs) در داخل آن قرار می‌دهیم. هر جفت کلید-مقدار توسط دو نقطه : از هم جدا شده و هر ویژگی با یک کاما , جدا می‌شود.

مثال:

let person = {
  name: "علی",
  age: 25,
  greet: function() {
    console.log("سلام، من " + this.name + " هستم.");
  }
};
person.greet(); // خروجی: سلام، من علی هستم.

در این مثال، یک شیء به نام person داریم که دارای دو ویژگی به نام‌های name و age و یک متد به نام greet است. متد greet با استفاده از کلمه کلیدی this به ویژگی‌های شیء دسترسی پیدا می‌کند. کلمه کلیدی this در JavaScript به شیء فعلی که در آن قرار داریم اشاره دارد.

دسترسی به ویژگی‌های شیء

در JavaScript، می‌توان به ویژگی‌های شیء به دو روش نقطه‌ای و براکتی دسترسی پیدا کرد:

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

console.log(person.name); // علی

روش براکتی: این روش برای دسترسی به ویژگی‌هایی که کلیدهای خاص یا نامعتبر دارند یا زمانی که کلید به صورت پویا و متغیر باشد، استفاده می‌شود.

console.log(person["age"]); // 25

افزودن ویژگی جدید به شیء

می‌توان ویژگی جدیدی را به یک شیء اضافه کرد. کافی است از یک کلید جدید در کنار شیء استفاده کنید و مقدار آن را مشخص کنید.

مثال:

person.city = "تهران";
console.log(person.city); // خروجی: تهران

تغییر مقدار ویژگی‌ها

برای تغییر مقدار یک ویژگی، کافی است همانند افزودن ویژگی، کلید ویژگی مورد نظر را به شیء بدهید و مقدار جدید را اختصاص دهید.

مثال:

person.age = 30;
console.log(person.age); // خروجی: 30

حذف ویژگی‌های شیء

برای حذف یک ویژگی از شیء، از دستور delete استفاده می‌شود.

مثال:

delete person.city;
console.log(person.city); // خروجی: undefined

متدهای کاربردی برای کار با ویژگی‌های شیء

JavaScript متدهای مفیدی را برای دستکاری و بررسی ویژگی‌های شیء‌ها ارائه می‌دهد. سه متد مهم عبارتند از:

۱. Object.keys(): بازگشت آرایه‌ای از کلیدهای شیء

این متد تمام کلیدهای شیء را به صورت یک آرایه بازمی‌گرداند. این روش می‌تواند در زمان‌هایی که می‌خواهید فقط اسامی ویژگی‌های شیء را دریافت کنید، مفید باشد.

مثال:

console.log(Object.keys(person)); // خروجی: ["name", "age", "greet"]

۲. Object.values(): بازگشت آرایه‌ای از مقادیر ویژگی‌های شیء

این متد تمام مقادیر ویژگی‌های شیء را به صورت یک آرایه بازمی‌گرداند.

مثال:

console.log(Object.values(person)); // خروجی: ["علی", 30, function]

۳. Object.entries(): بازگشت آرایه‌ای از جفت‌های کلید-مقدار

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

مثال:

console.log(Object.entries(person)); // خروجی: [["name", "علی"], ["age", 30], ["greet", function]]

مثال‌های پیشرفته‌تر از استفاده از شیء‌ها

۱. استفاده از متدهای شیء

متدها می‌توانند شامل عملیات‌های پیچیده باشند و با استفاده از this به ویژگی‌های شیء دسترسی پیدا کنند.

مثال:

let car = {
  brand: "تویوتا",
  model: "کرولا",
  year: 2020,
  getCarInfo: function() {
    return "این خودرو " + this.brand + " مدل " + this.model + " سال " + this.year + " است.";
  }
};
console.log(car.getCarInfo()); // خروجی: این خودرو تویوتا مدل کرولا سال 2020 است.

 

۲. استفاده از شیء‌ها به عنوان پارامتر تابع

شیء‌ها می‌توانند به عنوان پارامتر تابع نیز استفاده شوند. این روش برای ارسال چندین داده مرتبط به تابع به طور همزمان مفید است.

مثال:

function displayPersonInfo(person) {
  console.log("نام: " + person.name);
  console.log("سن: " + person.age);
}
displayPersonInfo(person); // خروجی: نام: علی و سن: 30

۳. پیمایش ویژگی‌های شیء با for…in

برای پیمایش تمامی ویژگی‌های یک شیء، از حلقه for…in استفاده می‌شود.

مثال:

for (let key in person) {
  console.log(key + ": " + person[key]);
}
// خروجی:
// name: علی
// age: 30
// greet: function

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

نتیجه‌گیری

در این مقاله، مفاهیم اساسی و کاربردی آرایه‌ها و شیء‌ها در JavaScript را بررسی کردیم. آرایه‌ها به ما امکان ذخیره و مدیریت مجموعه‌ای از داده‌ها را می‌دهند و با متدهایی مثل push، pop، forEach و map می‌توانیم عملیات مختلفی روی داده‌ها انجام دهیم. شیء‌ها نیز ساختارهایی هستند که ترکیبی از داده‌ها و رفتارها را در یک موجودیت واحد ذخیره می‌کنند و با ویژگی‌ها و متدهای متنوعی مانند Object.keys و Object.entries به سادگی قابل دستکاری‌اند. تسلط بر این دو مفهوم به برنامه‌نویسان کمک می‌کند تا کدهای منظم‌تر و کاربردی‌تری بنویسند و در پروژه‌های خود بهتر به مدیریت داده‌ها بپردازند.