شروع کار با آبجکت‌هایJavaScript

آبجکت نوعی داده در JavaScript است. به جز روش‌های اولیه و پایه، این تنها روش برای انتقال متغیرها است. به همین دلیل، آبجکت‌ها در JavaScript بسیار مهم هستند.

جدول محتویات:

1. آبجکت‌ها چه هستند؟
2. مقادیر آبجکت
3. گرفتن مقدار یک ویژگی
4. تعیین مقدار یک ویژگی
5. حذف کردن ویژگی‌ها
6. توابع در JavaScript، همان آبجکت‌ها هستند
7. تمارینی برای بهتر شدن در کار با آبجکت‌ها

آبجکت‌ها چه هستند؟

یک آبجکت در JavaScript نوعی از داده است که شامل جفت‌های مقادیر کلیدی هستند.

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

const anObject = {
  key1: 'value1',
  key2: 'value2',
  key3: 'value3'
  // ...
}

هر کلید، به یک مقدار ارجاع می‌کند. اگر یک دیکشنری انگیلسی را مثال قرار دهید، کلیدها کلمات هستند و مقادیر، توضیحات هر کلمه هستند.

const dictionary = {
  dream: "a series of thoughts, images, and sensations occurring in a person's mind during sleep",
  happy: "feeling or showing pleasure or contentment",
  // ...
}

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

برای مثال، می‌توانید دستگاهی که به وسیله آن این مقاله را می‌خوانید را در نظر بگیرید. این دستگاه، چه دستگاهی است؟ چه اندازه‌ای دارد؟ سیستم عامل آن چیست؟

اگر این اطلاعات را در یک آبجکت JavaScript دور هم قرار دهید، به این صورت خواهد بود:

const macbook = {
  operatingSystem: 'macOS Sierra',
  screenResolution: '2880x1800',
  screenSize: '15.4 inch',
  usbPorts: 2,
  hdmiPort: 1,
  storage: '512gb'
}

مقادیر آبجکت

آبجکت‌ها می‌توانند هر مقداری که JavaScript معتبر هستند را داشته باشند. این به این معنی است که می‌توانید آبجکت‌های اولیه (مانند رشته‌ها و اعداد) و دیگر آبجکت‌ها را در آن‌ها ذخیره کنید.

const anObject = {
  string: 'Yay',
  number: 1,
  boolean: true,
  nullPrimitive: null,
  undefinedPrimitive: undefined,
  anotherObject: {},
  afunction: function () {} 
  anArray: [] 
}

گرفتن مقدار یک ویژگی

کلیدها، ویژگی نیز نام دارند. می‌توانید از دو روش برای گرفتن مقدار یک ویژگی استفاده کنید:

روش اول از طریق نشانه‌گذاری نقطه‌ای است. جایی که نام آبجکت را به همراه یک نقطه (.)، و نام ویژگی می‌نویسید:

const prop = object.property

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

const macbookStorage = macbook.storage
console.log(macbookStorage) // 512gb

روش دوم از طریق نشانه‌گذاری با براکت است. در اینجا نام آبجکت را به همراه رشته ویژگی در یک براکت (] [) می‌نویسید.

const macbookStorage = macbook['storage']
console.log(macbookStorage) // 512gb

هر دو روش کار می‌کنند.

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

1. وقتی که نام ویژگی شما یک شناسه غیر معتبر است.
2. وقتی که باید مقدار ویژگی را از طریق یک متغیر بگیرید.

شناسه‌های غیر معتبر

وقتی که در JavaScript یک متغیر را تعریف می‌کنید، باید به ۴ قانون پاینبد باشید:

1. متغیر باید به عنوان یک کلمه تنها نوشته شده باشد.
2. متغیر باید تنها از حروف، اعداد و آندرلاین (0-9، a-z، A-Z، ـ) تشکیل شده باشد.
3. متغیر نمی‌تواند با یک عدد شروع شود.
4. متغیر نمی‌تواند یکی از این کلمات رزرو شده باشد.

اگر متغیر شما از این چهار قانون پیروی کند، یک شناسه معتبر است؛ اما اگر از آن‌ها پیروی نکند، یک شناسه غیر معتبر است.

آبجکت‌ها می‌توانند شناسه‌های غیر معتبر را به عنوان ویژگی داشته باشند. برای مثال:

const ObjWithInvalidIdentifer = {
  'First Name': 'Zell'
}

وقتی که یک شناسه غیر معتبر دارید، نمی‌توانید از نشانه‌گذاری نقطه‌ای استفاده کنید؛ بلکه باید از نشانه‌گذاری با استفاده از براکت استفاده کنید:

const firstName = ObjWithInvalidIdentifer.First Name // Syntax Error: Unexpected identifier
const firstName2 = ObjWithInvalidIdentifer['First Name'] // Zell

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

گرفتن مقدار یک ویژگی از طریق یک متغیر

وقتی که کدهای پیشرفته‌تری می‌نویسید، شاید لازم باشد که مقدار یک ویژگی را از طریق یک متغیر بگیرید. در این مورد، می‌توانید از نشانه‌گذاری با براکت استفاده کنید.

برای مثال، فرض کنید که ویژگی برای جستجو را در یک متغیر به نام propertyToGet ذخیره می‌کنید.

const propertyToGet = 'storage'

هیچ ویژگی‌ای به نام propertyToGet در آبجکت مورد نظر وجود ندارد، پس نمی‌توانید از نشانه‌گذاری نقطه‌ای استفاده کنید. اگر اقدام به انجام این کار کنید، پاسخ «undefined» را به دست میاورید.

const storageWithDotNotation = macbook.propertyToGet
console.log(storageWithDotNotation) // undefined

از نشانه‌گذاری با براکت، فقط به این صورت می‌توانید استفاده کنید:

const macbookStorage = macbook[propertyToGet]
console.log(macbookStorage) // 512gb

این تمام چیزی است که باید درباره گرفتن مقدار یک ویژگی بدانید. حال بیایید مقدار یک ویژگی را تعیین کنیم.

تعیین مقدار یک ویژگی:

مقدار یک ویژگی را می‌توانید هم از طریق نشانه‌گذاری نقطه‌ای، و هم از طریق نشانه‌گذاری با براکت تعیین کنید. به مانند قبل، نشانه‌گذاری نقطه‌ای ترجیح داده می‌شود.

// نشانه‌گذاری نقطه‌ای
macbook.storage = '256gb'

// نشانه‌گذاری با براکت
macbook['usbPorts'] = 2

console.log(macbook)
// {
//   storage: '256gb',
//   usbPorts: 2
// }

حذف کردن ویژگی‌ها

می‌توانید با استفاده از کلمه کلیدی delete، جفت‌های مقادیر کلیدی را حذف کنید. برای انجام این کار، کلمه delete را به همراه نام ویژگی در یک نشانه‌گذاری نقطه‌ای یا با براکت، تایپ می‌کنیم.

delete object.property

در زیر، مثالی می‌بینید که در آن ویژگی storage در آبجکت macbook را حذف می‌کنیم.

delete macbook.storage
console.log(macbook)
// ویژگی مورد نظر از قبل حذف شده است، پس دیگر ان را نمیبینید.
// {
//   usbPorts: 2
// }

توابع در JavaScript، همان آبجکت‌ها هستند:

توابع نوع خاصی از آبجکت در JavaScript هستند. این توابع می‌توانند ویژگی‌هایی نیز داشته باشند. (حتی اگر هیچ ویژگی‌ای تعریف نکنید)

// می‌توانید به توابع، ویژگی اضافه کنید.
function sayName () {}
sayName.property = 'Hallelujah'

console.log(sayName.property)
// Hallelujah

از آنجایی که این توابع آبجکت هستند، می‌توانید توابع را به عنوان مقادیری در آبجکت بنویسید. ویژگی‌ها می‌توانند توابع را به عنوان مقادیر خود، با نام «متد» داشته باشند.

const anObject = {
  aMethod: function() {
    // انجام کاری در تابع
  }
}

در مثال زیر، playMusic در واقع یک متد در macbook است.

const macbook = {
  playMusic: function () {
    /* چند خط کد برای پخش آهنگ */
  }
}

از آنجایی که متدها توابع هستند، درست به مانند توابع رفتار می‌کنند.

برای فراخوانی یک متد، پس از گرفتن متد از طریق نشانه‌گذاری نقطه‌ای یا با براکت، پرانتز قرار می‌دهیم.

// فراخوانی یک متد با استفاده از نشانه‌گذاری نقطه‌ای
macbook.playMusic()

// فراخوانی یک متد با استفاده از نشانه‌گذاری با براکت
macbook['playMusic']()

همچنین می‌توانید به متدها آرگومان نیز اضافه کنید، درست به مانند توابع معمولی:

const greeter = {
  sayHello: function (name) {
    console.log('Hello ' + name + '!')
  }
}

greeter.sayHello('Zell')
// Hello Zell!

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

تمارینی برای بهتر شدن در کار با آبجکت‌ها

در کار با JavaScript، از آبجکت‌های زیادی استفاده خواهید کرد. مطمئن شوید که آن‌ها را کاملا درک می‌کنید. در زیر، مثال‌های را می‌بینید که می‌توانید برای تمرین استفاده کنید:

1. یک آبجکت خالی بسازید.
2. برای آبجکت خود، یک ویژگی با استفاده از نشانه‌گذاری نقطه‌ای بسازید و یک مقدار به آن بدهید.
3. برای آبجکت خود، یک ویژگی با استفاده از نشانه‌گذاری با استفاده از براکت بسازید و یک مقدار به آن بدهید.
4. مقدار یک ویژگی را با استفاده از نشانه‌گذاری نقطه‌ای بگیرید.
5. مقدار یک ویژگی را با استفاده از نشانه‌گذاری با براکت بگیرید.
6. مقدار یک ویژگی را با استفاده از نشانه‌گذاری نقطه‌ای تعیین کنید.
7. مقدار یک ویژگی را با استفاده از نشانه‌گذاری با براکت تعیین کنید.
8. یک متد بسازید، و آن را فراخوانی کنید.
9. یک متد بسازید که آرگومان نیز بگیرد، و آن را فراخوانی کنید.

برای یادگیری جاوااسکریپت میتوانید چارت مهارت آموزش جاوااسکریپت را طی کنید

منبع