اشیاء جاوا اسکریپت: بهترین روش ها – انجمن DEV

در حین کار بر روی جاوا اسکریپت، باید با اشیا به عنوان بلوک سازنده جاوا اسکریپت برخورد کنیم. دانستن نحوه استفاده موثر از اشیاء کد شما را خواناتر، کارآمدتر و بدون اشکال می کند. در این وبلاگ ما قصد داریم چند روش خوب را در حین کار با اشیاء در جاوا اسکریپت ببینیم. پس اجازه دهید شروع کنیم!

نکته 1: از نحو تحت اللفظی برای ایجاد شی استفاده کنید

به نظر می رسد که این یک تغییر کوچک در هنگام تنظیم اولیه متغیر اشیاء باشد، اما پس از دانستن این اطلاعات، بهتر متوجه خواهید شد که چرا این مهم است.

// not recommended
const item = new Object();

// good practice
const item = {};

سادگی و خوانایی: نحو تحت اللفظی روشی مختصر و شهودی برای تعریف اشیا ارائه می دهد. خواندن و درک آن در مقایسه با سازنده شی آسان تر است، که نیاز به فراخوانی یک تابع با کلمه کلیدی جدید دارد.

ثبات: استفاده از نحو تحت اللفظی، سازگاری در سبک کد را در سراسر پروژه شما تضمین می کند. اکثر توسعه دهندگان به دیدن اشیایی که با استفاده از نحو تحت اللفظی تعریف شده اند، عادت دارند، که کد را آشناتر و نگهداری آن را آسان تر می کند.

کارایی: ایجاد اشیا با نحو تحت اللفظی در مقایسه با استفاده از سازنده Object سریعتر است. نحو تحت اللفظی مستقیماً شیء را بدون احضار هیچ توابع یا سازنده اضافی ایجاد می کند.

حفاظت از زنجیره اولیه: هنگام استفاده از سازنده Object، شی جدید ایجاد شده از نمونه اولیه Object جهانی ارث نمی برد. در مقابل، هنگام استفاده از نحو تحت اللفظی، شی با زنجیره اولیه درست دست نخورده ایجاد می شود.

تغییرناپذیری: هنگام استفاده از نحو تحت اللفظی، ایجاد اشیاء تغییرناپذیر با استفاده از تکنیک هایی مانند Object.freeze() یا نحو گسترش شی ES6 ({...})، که می تواند ویژگی های شی را فقط خواندنی کند. این تغییر ناپذیری به جلوگیری از تغییرات ناخواسته در شی کمک می کند.

اجتناب از خطاهای نحوی: نحو تحت اللفظی به انعطاف پذیری بیشتری در هنگام تعریف اشیاء، مانند استفاده از نام ویژگی های محاسبه شده اجازه می دهد. ({[key]: value})، نحو مختصر ویژگی ({key})، یا روش های شی ({method() {}}). این ویژگی ها هنگام استفاده از سازنده Object در دسترس نیستند.

در حالی که ممکن است موارد نادری وجود داشته باشد که استفاده از سازنده Object ضروری باشد (مثلاً هنگام ایجاد اشیاء با نمونه های اولیه خاص)، به طور کلی، نحو تحت اللفظی روشی ساده تر، خواناتر و کارآمدتر برای ایجاد اشیا در جاوا اسکریپت ارائه می دهد.

نکته 2: از نام های دارایی محاسبه شده استفاده کنید

function getKey(k) {
  return `${k}_key`; //generates key name dynamically
}

// not recommended
const obj = {
  id: 1,
  name: 'Foo',
};
obj[getKey('enabled')] = true;

// good practice!
const obj = {
  id: 1,
  name: 'Foo',
  [getKey('enabled')]: true, // computed property syntax
};

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

نکته 3: از روش شی و مختصر ویژگی استفاده کنید

• از روش اختصاری شی استفاده کنید

// looks ugly
const obj = {
  value: 1,

  addValue: function (value) {
    return this.value + value;
  },
};

// looks clean!
const obj = {
  value: 1,

  addValue(value) {
    return this.value + value;
  },
};

• از مختصر ارزش ملک استفاده کنید

const property = 'property';

// looks ugly
const obj = {
  property: property,
};

// good practice
const obj = {
  property,
};

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

نکته 4: برای املاک دارای شناسه نامعتبر قیمت ارائه دهید

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

// bulky
const obj = {
  'prop1': 1,
  'prop2': 2,
  'prop-3': 3,
};

// good practice!
const obj = {
  prop1: 1,
  prop2: 2,
  'prop-3': 3,
};

نکته 4: شیء کپی کم عمق / عمیق برای جلوگیری از تغییرپذیری شی

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

• اجتناب از استفاده Object.assign() به این ترتیب:

const originalObj = { a: 1, b: 2 };
const copiedObj = Object.assign(originalObj, { c: 3 }); // this mutates `originalObj`
delete copiedObj.a; // this will be deleted from the originalObj as well!!!!

• کپی کم عمق با استفاده از Object.assign:

const originalObj = { a: 1, b: 2 };
const copiedObj = Object.assign({}, originalObj, { c: 3 }); // copy => { a: 1, b: 2, c: 3 }
delete copiedObj.a
console.log(originalObj) // {a: 1, b: 2}
console.log(copiedObj) // {b: 2, c: 3}, 'a' is deleted from copiedObj

• کپی کم عمق با استفاده از نحو اشیاء گسترده:

const originalObj = { a: 1, b: 2 };
const copiedObj = {...originalObj, c: 3} // copy => { a: 1, b: 2, c: 3 }
delete copiedObj.a
console.log(originalObj) // {a: 1, b: 2}
console.log(copiedObj) // {b: 2, c: 3}, 'a' is deleted from copiedObj

• کپی عمیق با استفاده از JSON.parse و JSON.stringify

const originalObj = { a: 1, b: {
  b1: 1,
  b2: 2
} };
const copiedObj = JSON.parse(JSON.stringify(originalObj)) // copy => { a: 1, b: {b1: 1, b2: 2} }
delete copiedObj.b.b1
console.log(originalObj) // {a: 1, b: {b1: 1, b2: 2}}
console.log(copiedObj) // {a: 1, b: { b2: 2}}