درس ۱۸: آرایه‌ها و اشیاء

یادگیری ساختارهای داده پیشرفته در JavaScript

درس ۱۸ از ۲۰
پیشرفت درس

آرایه‌ها (Arrays)

آرایه‌ها ساختار داده‌ای هستند که می‌توانند چندین مقدار را در یک متغیر ذخیره کنند. هر عنصر در آرایه دارای یک شاخص (index) منحصر به فرد است که از صفر شروع می‌شود.

ویژگی‌های آرایه‌ها:

  • می‌توانند انواع مختلف داده را نگهداری کنند
  • اندازه آن‌ها قابل تغییر است (Dynamic)
  • شاخص‌گذاری از صفر شروع می‌شود
  • دارای متدهای قدرتمند برای دستکاری هستند

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

روش‌های مختلف ایجاد

// روش Literal (توصیه می‌شود)
const fruits = ['سیب', 'موز', 'پرتقال'];

// روش Constructor
const numbers = new Array(1, 2, 3, 4, 5);

// آرایه خالی
const emptyArray = [];

// آرایه با اندازه مشخص
const fixedSize = new Array(5); // 5 عنصر undefined

// آرایه مختلط
const mixed = ['متن', 42, true, null, {name: 'علی'}];

دسترسی به عناصر

const colors = ['قرمز', 'آبی', 'سبز'];

// دسترسی به عنصر
console.log(colors[0]); // 'قرمز'
console.log(colors[1]); // 'آبی'

// تغییر عنصر
colors[1] = 'زرد';
console.log(colors); // ['قرمز', 'زرد', 'سبز']

// طول آرایه
console.log(colors.length); // 3

// آخرین عنصر
console.log(colors[colors.length - 1]); // 'سبز'

تمرین عملی: آرایه‌ها و اشیاء

در ادامه، کار با آرایه‌ها و اشیاء را تمرین کنید:

ویرایشگر کد خط 1، ستون 1
نمایش زنده

متدهای مهم آرایه

متدهای اضافه/حذف

const arr = [1, 2, 3];

// اضافه کردن به انتها
arr.push(4, 5); // [1, 2, 3, 4, 5]

// حذف از انتها
const last = arr.pop(); // 5, arr = [1, 2, 3, 4]

// اضافه کردن به ابتدا
arr.unshift(0); // [0, 1, 2, 3, 4]

// حذف از ابتدا
const first = arr.shift(); // 0, arr = [1, 2, 3, 4]

// اضافه/حذف در موقعیت خاص
arr.splice(2, 1, 'جدید'); // [1, 2, 'جدید', 4]

متدهای جستجو

const fruits = ['سیب', 'موز', 'پرتقال', 'موز'];

// پیدا کردن شاخص
const index = fruits.indexOf('موز'); // 1
const lastIndex = fruits.lastIndexOf('موز'); // 3

// بررسی وجود
const exists = fruits.includes('سیب'); // true

// پیدا کردن عنصر با شرط
const found = fruits.find(fruit => fruit.length > 3); // 'پرتقال'
const foundIndex = fruits.findIndex(fruit => fruit.length > 3); // 2

متدهای تبدیل

const numbers = [1, 2, 3, 4, 5];

// تبدیل هر عنصر
const doubled = numbers.map(num => num * 2); // [2, 4, 6, 8, 10]

// فیلتر کردن
const evens = numbers.filter(num => num % 2 === 0); // [2, 4]

// کاهش به یک مقدار
const sum = numbers.reduce((acc, num) => acc + num, 0); // 15

// تبدیل به رشته
const str = numbers.join(' - '); // "1 - 2 - 3 - 4 - 5"

اشیاء (Objects)

اشیاء ساختار داده‌ای هستند که می‌توانند ویژگی‌ها (properties) و متدها (methods) را نگهداری کنند. هر ویژگی شامل یک کلید (key) و یک مقدار (value) است.

ایجاد اشیاء

// روش Literal (توصیه می‌شود)
const person = {
    name: 'علی احمدی',
    age: 25,
    city: 'تهران',
    isStudent: true
};

// روش Constructor
const car = new Object();
car.brand = 'تویوتا';
car.model = 'کمری';
car.year = 2023;

// با Constructor Function
function Person(name, age) {
    this.name = name;
    this.age = age;
    this.greet = function() {
        return `سلام، من ${this.name} هستم`;
    };
}

const person1 = new Person('فاطمه', 22);

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

const user = {
    name: 'محمد',
    'last-name': 'کریمی',
    age: 30
};

// Dot Notation
console.log(user.name); // 'محمد'
user.age = 31;

// Bracket Notation
console.log(user['last-name']); // 'کریمی'
user['email'] = 'mohammad@example.com';

// با متغیر
const prop = 'name';
console.log(user[prop]); // 'محمد'

متدهای مهم Object

کار با کلیدها و مقادیر

const student = {
    name: 'سارا',
    grade: 18.5,
    field: 'کامپیوتر'
};

// دریافت کلیدها
const keys = Object.keys(student); // ['name', 'grade', 'field']

// دریافت مقادیر
const values = Object.values(student); // ['سارا', 18.5, 'کامپیوتر']

// دریافت جفت کلید-مقدار
const entries = Object.entries(student);
// [['name', 'سارا'], ['grade', 18.5], ['field', 'کامپیوتر']]

// ایجاد شیء از entries
const newObj = Object.fromEntries(entries);

کپی و ترکیب اشیاء

const obj1 = { a: 1, b: 2 };
const obj2 = { b: 3, c: 4 };

// کپی سطحی
const copy1 = Object.assign({}, obj1);
const copy2 = { ...obj1 };

// ترکیب اشیاء
const merged = Object.assign({}, obj1, obj2); // { a: 1, b: 3, c: 4 }
const merged2 = { ...obj1, ...obj2 }; // { a: 1, b: 3, c: 4 }

// کپی عمیق (برای اشیاء ساده)
const deepCopy = JSON.parse(JSON.stringify(obj1));

Destructuring

تکنیک قدرتمندی برای استخراج مقادیر از آرایه‌ها و اشیاء:

Array Destructuring

const colors = ['قرمز', 'آبی', 'سبز'];

// استخراج مقادیر
const [first, second, third] = colors;
console.log(first); // 'قرمز'

// نادیده گرفتن عناصر
const [, , third] = colors;

// مقدار پیش‌فرض
const [a, b, c, d = 'زرد'] = colors;

// Rest operator
const [head, ...tail] = colors;
console.log(tail); // ['آبی', 'سبز']

Object Destructuring

const person = {
    name: 'علی',
    age: 25,
    city: 'تهران',
    job: 'برنامه‌نویس'
};

// استخراج ویژگی‌ها
const { name, age } = person;

// تغییر نام متغیر
const { name: fullName, age: years } = person;

// مقدار پیش‌فرض
const { name, salary = 0 } = person;

// Rest operator
const { name, ...otherInfo } = person;

// Nested destructuring
const user = {
    info: { name: 'فاطمه', age: 22 },
    address: { city: 'اصفهان' }
};

const { info: { name, age }, address: { city } } = user;

بهترین شیوه‌ها

💡 نکات مهم:

  • Immutability: از تغییر مستقیم آرایه‌ها و اشیاء اجتناب کنید
  • Spread Operator: برای کپی و ترکیب استفاده کنید
  • Destructuring: کد را خواناتر و کوتاه‌تر می‌کند
  • Method Chaining: متدهای آرایه را زنجیره‌ای استفاده کنید
  • Performance: برای آرایه‌های بزرگ از متدهای بهینه استفاده کنید

مثال Method Chaining

const students = [
    { name: 'علی', grade: 18 },
    { name: 'فاطمه', grade: 19 },
    { name: 'محمد', grade: 16 },
    { name: 'سارا', grade: 20 }
];

// زنجیره‌ای کردن متدها
const topStudents = students
    .filter(student => student.grade >= 18)
    .map(student => ({ ...student, status: 'عالی' }))
    .sort((a, b) => b.grade - a.grade);

console.log(topStudents);

کار با JSON

const data = {
    users: [
        { id: 1, name: 'علی', active: true },
        { id: 2, name: 'فاطمه', active: false }
    ]
};

// تبدیل به JSON
const jsonString = JSON.stringify(data);

// تبدیل از JSON
const parsedData = JSON.parse(jsonString);

// JSON با فرمت زیبا
const prettyJson = JSON.stringify(data, null, 2);

// فیلتر کردن ویژگی‌ها
const filteredJson = JSON.stringify(data, ['users', 'name']);

آزمون درس ۱۸

سوال ۱: کدام متد برای اضافه کردن عنصر به انتهای آرایه استفاده می‌شود؟

سوال ۲: کدام متد برای تبدیل همه عناصر آرایه استفاده می‌شود؟

سوال ۳: کدام روش برای دسترسی به ویژگی شیء با نام متغیر استفاده می‌شود؟