کار با متدهای استاندارد Object: keys، values، entries و assign

مقدمه

در درس قبل با نحوه‌ی دسترسی به Property های یک شیء از طریق نام آشنا شدیم. اما گاهی نیاز داریم کل شیء را پیمایش کنیم یا چند شیء را با هم ترکیب کنیم. برای این منظور، جاوااسکریپت متدهای آماده‌ای روی خودِ Object ارائه می‌دهد که در این درس بررسی می‌کنیم.

Object.keys — دریافت نام Property ها

let user = { name: "علی", age: 25, city: "تهران" };

console.log(Object.keys(user)); // ["name", "age", "city"]

Object.keys یک آرایه شامل نام تمام Property های قابل شمارش (Enumerable) شیء برمی‌گرداند. از آنجا که خروجی این متد یک آرایه‌ی واقعی است، می‌توان روی آن از تمام متدهای آرایه که در فصل قبل یاد گرفتیم (مثل map یا forEach) استفاده کرد.

Object.values — دریافت مقادیر Property ها

let user = { name: "علی", age: 25, city: "تهران" };

console.log(Object.values(user)); // ["علی", 25, "تهران"]

Object.values مشابه Object.keys عمل می‌کند، با این تفاوت که به‌جای نام Property ها، مقدار آن‌ها را در قالب یک آرایه برمی‌گرداند.

Object.entries — دریافت جفت‌های کلید و مقدار

پیمایش شیء با Object.entries
خروجی کنسول اینجا نمایش داده می‌شود...

تحلیل کد

Object.entries یک آرایه از آرایه‌های دوعضوی برمی‌گرداند؛ هر زیرآرایه شامل نام Property در اندیس 0 و مقدار آن در اندیس 1 است. ترکیب Object.entries با for...of و Destructuring آرایه (که در فصل قبل دیدیم)، یکی از رایج‌ترین و خواناترین روش‌های پیمایش کامل یک شیء در جاوااسکریپت مدرن است؛ به‌جای استفاده از for...in که در فصل حلقه‌ها دیدیم.

Object.assign — ترکیب یا کپی کردن شیء

Object.assign برای کپی کردن Property ها از یک یا چند شیء به شیء دیگر استفاده می‌شود:

let target = { name: "علی" };
let source = { age: 25, city: "تهران" };

Object.assign(target, source);

console.log(target); // { name: "علی", age: 25, city: "تهران" }

اولین آرگومان، شیء مقصد است که مستقیماً تغییر می‌کند؛ آرگومان‌های بعدی، منابعی هستند که Property هایشان به مقصد کپی می‌شود. اگر بخواهیم شیء مقصد اصلی تغییر نکند، معمولاً یک شیء خالی به‌عنوان مقصد در نظر می‌گیریم:

let original = { name: "علی" };
let updated = Object.assign({}, original, { age: 25 });

console.log(original); // { name: "علی" } — بدون تغییر
console.log(updated);  // { name: "علی", age: 25 }

ترکیب چند شیء و رفتار Property های تکراری

let defaults = { theme: "روشن", language: "فارسی" };
let userPrefs = { theme: "تیره" };

let settings = Object.assign({}, defaults, userPrefs);
console.log(settings); // { theme: "تیره", language: "فارسی" }

وقتی چند منبع، Property مشترکی داشته باشند، مقدار آخرین منبعی که آن Property را دارد، در نتیجه‌ی نهایی باقی می‌ماند؛ در این مثال، theme از userPrefs جایگزین مقدار defaults شده است.

Object.assign به‌عنوان Shallow Copy

درست مانند Spread Operator که در فصل آرایه دیدیم، Object.assign نیز فقط یک کپی سطحی (Shallow Copy) می‌سازد؛ اگر یک Property خودش شامل یک شیء یا آرایه‌ی دیگر باشد، آن بخش داخلی همچنان به‌صورت ارجاع مشترک باقی می‌ماند، نه یک کپی کاملاً مستقل.

جدول جمع‌بندی متدها

متدخروجی
Object.keys(obj)آرایه‌ای از نام Property ها
Object.values(obj)آرایه‌ای از مقادیر Property ها
Object.entries(obj)آرایه‌ای از زوج‌های [کلید، مقدار]
Object.assign(target, ...sources)شیء مقصد ترکیب‌شده (و تغییریافته)

Best Practices

  • برای پیمایش کامل یک شیء (هم کلید و هم مقدار)، ترکیب Object.entries با for...of را به for...in ترجیح دهید.
  • هنگام استفاده از Object.assign برای ساخت یک شیء جدید، همیشه یک شیء خالی {} را به‌عنوان اولین آرگومان قرار دهید تا شیء اصلی تغییر نکند.

ارتباط با سایر مفاهیم

این سه متد keys، values و entries در درس بعدی، هنگام بررسی Destructuring و Spread در شیء، دوباره مورد استفاده قرار می‌گیرند؛ در واقع Spread Operator در شیء، از نظر مفهومی جایگزین مدرن‌تری برای بسیاری از کاربردهای Object.assign محسوب می‌شود.

جمع‌بندی

Object.keys، Object.values و Object.entries سه روش استاندارد برای دریافت نام، مقدار یا هر دو از Property های یک شیء در قالب آرایه هستند. Object.assign برای ترکیب یا کپی کردن Property ها از یک یا چند شیء به شیء دیگر استفاده می‌شود و مانند Spread، فقط یک Shallow Copy می‌سازد.