خبرکاو:

راه های مختلفی برای دسترسی به ویژگی های شی در جاوا اسکریپت وجود دارد. اما دو مورد رایج عبارتند از علامت نقطه و علامت براکت.

تفاوت این دو رویکرد را در این مقاله توضیح خواهم داد.

با علامت گذاری نقطه و براکت، می توانید:

با کلید آن به ارزش یک ویژگی دسترسی پیدا کنید

مقدار یک ویژگی موجود را با کلید آن تغییر دهید و

یک ویژگی جدید به یک شی اضافه کنید

اما این دو راه به طور متفاوتی به ویژگی ها دسترسی دارند و زمانی که یکی بهتر از دیگری باشد سناریوهای متفاوتی وجود دارد.

دسترسی به ویژگی نقطه‌گذاری

رویکرد Dot Notation شامل استفاده از یک نقطه یا نقطه ( . ) و یک کلید برای دسترسی به یک ویژگی است. در اینجا نحو است:

 object.key

شما نقطه و سپس کلید ملکی را که می خواهید به آن دسترسی داشته باشید دارید. این عبارت مقدار خاصیت را برمی گرداند. بیایید یک مثال را ببینیم:

 const obj = { name: "deeecode", age: 80, language: "javascript", } const target = obj.name // deeecode

با استفاده از dot و کلید name ، .name ، "deeecode" را دریافت می کنیم که مقدار خاصیت name است.

شما همچنین می توانید از این نماد برای اصلاح یک ویژگی موجود استفاده کنید:

 const obj = { name: "deeecode", age: 80, language: "javascript", } obj.age = 100 console.log(obj) // { // name: "deeecode", // age: 100, // language: "javascript" // }

در اینجا، ویژگی age را اصلاح می کنیم.

همچنین، می توانید با استفاده از این روش یک ویژگی جدید اضافه کنید:

 const obj = { name: "deeecode", age: 80, language: "javascript", } obj.location = "Mercury" console.log(obj) // { // name: "deeecode", // age: 80, // language: "javascript", // location: "Mercury" // }

در اینجا، ویژگی location را اضافه می کنیم.

اما این رویکرد دارای محدودیت هایی است که به زودی آنها را تحلیل خواهیم کرد. در مرحله بعد، بیایید نحوه عملکرد روش نمادگذاری براکت را درک کنیم.

در اینجا یک نسخه ویدیویی برای این موضوع وجود دارد اگر علاقه دارید.

دسترسی به ویژگی علامت گذاری براکت

رویکرد Bracket Notation شامل استفاده از براکت‌های مربع است که در آن شما یک عبارت دارید که به یک مقدار ارزیابی می‌شود. این مقدار به عنوان کلیدی برای دسترسی به ویژگی عمل می کند. در اینجا نحو است:

 object[expression]

عبارت درون پرانتز به یک کلید برای ویژگی مورد نظر شما ارزیابی می شود و این عبارت مقدار ویژگی را برمی گرداند. بیایید یک مثال را ببینیم:

 const obj = { name: "deeecode", age: 80, language: "javascript", } const target = obj["name"] // deeecode

با استفاده از براکت مربع و عبارت "name" ، ["name"] ، "deeecode" را دریافت می کنیم که مقدار خاصیت name است.

شما همچنین می توانید از این روش برای اصلاح یک ویژگی موجود استفاده کنید:

 const obj = { name: "deeecode", age: 80, language: "javascript", } obj["age"] = 100 console.log(obj) // { // name: "deeecode", // age: 100, // language: "javascript" // }

در اینجا، ویژگی age را با استفاده از عبارت رشته ای "age" تغییر می دهیم.

و، می توانید یک ویژگی جدید با استفاده از براکت اضافه کنید:

 const obj = { name: "deeecode", age: 80, language: "javascript", } obj["location"] = "Mercury" console.log(obj) // { // name: "deeecode", // age: 80, // language: "javascript", // location: "Mercury" // }

در اینجا، با استفاده از عبارت رشته ای "location" یک ویژگی location جدید اضافه می کنیم.

نماد براکت قابلیت های بیشتری نسبت به علامت نقطه دارد. من توضیح می دهم.

تفاوت بین Dot Notation و Bracket Notation Property Accessor

Dot Notation فقط به کلیدهای ثابت اجازه می دهد در حالی که Bracket Notation کلیدهای پویا را می پذیرد. کلید استاتیک در اینجا به این معنی است که کلید مستقیماً تایپ می شود، در حالی که کلید پویا در اینجا به این معنی است که کلید از یک عبارت ارزیابی می شود.

بیایید به چند نمونه نگاه کنیم.

استفاده از هر دو روش برای دسترسی به خواص

شروع با علامت نقطه:

 const obj = { name: "deeecode", age: 80, language: "javascript", } const myKey = "language" const target = obj.myKey // undefined

در اینجا، من مقدار "language" را به یک متغیر myKey اختصاص دادم. چیزی که در اینجا انتظار دارم این است که وقتی از علامت نقطه استفاده می کنم، مانند obj.myKey ، "myKey" باید با "language" جایگزین شود. پس به عنوان obj.language خوانده می شود و "جاوا اسکریپت" برمی گردد.

اما این چیزی نیست که اتفاق می افتد. در عوض، نتیجه undefined است.

دلیل این امر این است که Dot Notation فقط کلیدهای ثابت را می پذیرد. پس وقتی obj.myKey انجام می دهید، جاوا اسکریپت به دنبال ویژگی با کلید myKey در obj می گردد. اما آن ویژگی وجود ندارد، پس ما undefined می شویم.

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

hello + Hi که به helloHi به عنوان یک کلید ارزیابی می شود

returnKey() که مقدار را به عنوان یک کلید ارزیابی می کند

isTrue ? "trueKey" : "falseKey" که به عنوان یک کلید به "trueKey" یا "falseKey" ارزیابی می شود.

variable که مقدار متغیر را به عنوان یک کلید ارزیابی می کند

پس ، با استفاده از مثال قبلی، می توانیم این را داشته باشیم:

 const obj = { name: "deeecode", age: 80, language: "javascript", } const myKey = "language" const target = obj[myKey] // javascript

عبارتی که به پرانتز منتقل کردیم myKey است که یک متغیر است. این عبارت به "زبان" که مقدار متغیر است ارزیابی می شود. با استفاده از این مقدار، براکت های مربع می توانند مقدار خاصیت را که "جاوا اسکریپت" است، دریافت کنند.

اما اگر یک عبارت رشته ای مانند "myKey" را ارسال کنید، undefined خواهید داشت:

 const obj = { name: "deeecode", age: 80, language: "javascript", } const myKey = "language" const target = obj["myKey"] // undefined

این به این دلیل است که عبارت رشته ای "myKey" به مقدار "myKey" که به عنوان کلید دسترسی به ویژگی عمل می کند، ارزیابی می کند. از آنجایی که هیچ کلید myKey در obj وجود ندارد، مقدار بازگشتی undefined است.

استفاده از هر دو روش برای اصلاح خواص

شروع با علامت نقطه:

 const obj = { name: "deeecode", age: 80, language: "javascript", } const myKey = "age" obj.myKey = 100 console.log(obj) // { // name: "deeecode", // age: 80, // language: "javascript", // myKey: 100 // }

در اینجا، ما myKey با مقدار "age" داریم. با تلاش برای انجام obj.myKey = 100 برای تغییر ویژگی age ، کار نخواهد کرد. این به این دلیل است که نماد نقطه یک کلید ثابت را می پذیرد. پس obj.myKey myKey به عنوان یک کلید می گیرد. از آنجایی که mykey در obj وجود ندارد، این عبارت کلید را اضافه می کند. سپس، obj یک کلید جدید به نام myKey با مقدار 100 دارد.

رفتار با نماد براکت متفاوت است:

 const obj = { name: "deeecode", age: 80, language: "javascript", } const myKey = "age" obj[myKey] = 100 console.log(obj) // { // name: "deeecode", // age: 100, // language: "javascript" // }

به جای گفت ن یک ویژگی myKey جدید به obj ، رویکرد براکت ها ویژگی age را تغییر می دهد. دلیل آن این است که ما myKey به عنوان یک عبارت به براکت های مربع منتقل می کنیم. این عبارت، به عنوان یک متغیر، به "age" که مقدار متغیر است، ارزیابی می شود. با استفاده از "age" به عنوان یک کلید، این رویکرد مقدار ویژگی age را به 100 تغییر می دهد.

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

 const obj = { name: "deeecode", age: 80, language: "javascript", } const myKey = "location" obj[myKey] = "Mercury" console.log(obj) // { // name: "deeecode", // age: 100, // language: "javascript", // location: "Mercury" // }

در اینجا، متغیر myKey یک مقدار جدید دارد: "location" . با انتقال این به براکت ها و اختصاص مقدار "Mercury"، اکنون یک ویژگی جدید با جفت location کلید-مقدار و "Mercury" داریم.

آیا باید از علامت نقطه یا براکت استفاده کنید؟

تا کنون، نحوه عملکرد هر نماد را تحلیل کرده‌ایم و از مثال‌های مختلف برای دسترسی/تغییر آپشن های موجود و گفت ن آپشن های جدید استفاده کرده‌ایم. پس هنگام نوشتن کد جاوا اسکریپت از کدام باید استفاده کنید؟

عامل اصلی که به شما در تصمیم گیری کمک می کند، کلید ملکی است که می خواهید به آن دسترسی داشته باشید. اگر یک کلید ثابت است، از Dot Notation استفاده کنید. اما اگر یک کلید پویا است (از روی یک عبارت در زمان اجرا ارزیابی می شود)، از علامت گذاری براکت استفاده کنید.

نماد نقطه زمانی مفید است که شما از قبل از زمان خاصیت را بشناسید. شما به سادگی object.key برای خواندن/تغییر یک ویژگی موجود یا اضافه کردن یک ویژگی جدید انجام دهید.

علامت گذاری براکت زمانی مفید است که می خواهید به صورت پویا به یک ویژگی دسترسی داشته باشید . کلید این ویژگی می تواند از عباراتی مانند getKey() ، "my" + "key" یا keyVariable باشد.

امیدوارم از این قطعه چیزی یاد گرفته باشید. لطفا اگر مفید بود به اشتراک بگذارید :)