Object.keys والقيم والإدخالات

دعنا نبتعد عن هياكل البيانات الفردية ونتحدث عن التكرارات عليها.

في الفصل السابق رأينا الطرق map.keys() و map.values() و map.entries() .

هذه الأساليب عامة، وهناك اتفاق مشترك على استخدامها لهياكل البيانات. إذا قمنا بإنشاء بنية بيانات خاصة بنا، فيجب علينا تنفيذها أيضًا.

يتم دعمهم من أجل:

• Map

• Set

• Array

تدعم الكائنات البسيطة أيضًا أساليب مشابهة، لكن بناء الجملة مختلف قليلاً.

Object.keys والقيم والإدخالات

بالنسبة للكائنات العادية، تتوفر الطرق التالية:

• Object.keys(obj) - يُرجع مجموعة من المفاتيح.

• Object.values(obj) – إرجاع مجموعة من القيم.

• Object.entries(obj) – يُرجع مصفوفة من أزواج [key, value] .

يرجى ملاحظة الفروق (مقارنة بالخريطة على سبيل المثال):

الفرق الأول هو أنه يتعين علينا استدعاء Object.keys(obj) وليس obj.keys() .

لماذا ذلك؟ السبب الرئيسي هو المرونة. تذكر أن الكائنات هي أساس جميع الهياكل المعقدة في JavaScript. لذلك قد يكون لدينا كائن خاص بنا مثل data التي تنفذ طريقة data.values() الخاصة بها. ولا يزال بإمكاننا استدعاء Object.values(data) عليه.

والفرق الثاني هو أن أساليب Object.* تُرجع كائنات مصفوفة "حقيقية"، وليس مجرد كائنات قابلة للتكرار. هذا أساسا لأسباب تاريخية.

على سبيل المثال:

 السماح للمستخدم = {
  الاسم: "جون"،
  العمر: 30
};

• Object.keys(user) = ["name", "age"]

• Object.values(user) = ["John", 30]

• Object.entries(user) = [ ["name","John"], ["age",30] ]

فيما يلي مثال لاستخدام Object.values ​​للتكرار فوق قيم الخاصية:

 السماح للمستخدم = {
  الاسم: "جون"،
  العمر: 30
};

// حلقة فوق القيم
for (اسمحوا لقيمة Object.values(user)) {
  تنبيه (قيمة)؛ // جون، ثم 30
}

Object.keys/values/entries يتجاهل الخصائص الرمزية

تمامًا مثل حلقة for..in ، تتجاهل هذه التوابع الخصائص التي تستخدم Symbol(...) كمفاتيح.

عادة ما يكون هذا مناسبًا. ولكن إذا أردنا مفاتيح رمزية أيضًا، فهناك طريقة منفصلة Object.getOwnPropertySymbols تقوم بإرجاع مجموعة من المفاتيح الرمزية فقط. توجد أيضًا طريقة Reflect.ownKeys(obj) التي تُرجع كافة المفاتيح.

تحويل الكائنات

تفتقر الكائنات إلى العديد من الأساليب الموجودة للمصفوفات، مثل map filter وغيرها.

إذا أردنا تطبيقها، فيمكننا استخدام Object.entries متبوعًا بـ Object.fromEntries :

1. استخدم Object.entries(obj) للحصول على مجموعة من أزواج المفاتيح/القيمة من obj .

2. استخدم أساليب المصفوفة على تلك المصفوفة، على سبيل المثال، map لتحويل أزواج المفاتيح/القيمة هذه.

3. استخدم Object.fromEntries(array) على المصفوفة الناتجة لتحويلها مرة أخرى إلى كائن.

على سبيل المثال، لدينا كائن له أسعار ونرغب في مضاعفتها:

 دع الأسعار = {
  الموز: 1،
  البرتقالي: 2،
  اللحوم: 4،
};

دع doublePrices = Object.fromEntries(
  // تحويل الأسعار إلى مصفوفة، وتعيين كل زوج من المفاتيح/القيمة إلى زوج آخر
  // ومن ثم يعيد fromEntries الكائن
  Object.entries(prices).map(entry => [entry[0], input[1] * 2])
);

تنبيه (doublePrices.meat)؛ // 8

قد يبدو الأمر صعبًا للوهلة الأولى، لكن يصبح من السهل فهمه بعد استخدامه مرة أو مرتين. يمكننا أن نصنع سلاسل قوية من التحويلات بهذه الطريقة.

المهام

مجموع الخصائص

الأهمية: 5

هناك كائن salaries مع عدد تعسفي من الرواتب.

اكتب الدالة sumSalaries(salaries) التي ترجع مجموع كل الرواتب باستخدام Object.values ​​وحلقة for..of .

إذا كانت salaries فارغة فيجب أن تكون النتيجة 0 .

على سبيل المثال:

 دع الرواتب = {
  "جون": 100،
  "بيت": 300،
  "مريم": 250
};

تنبيه (مجموع الرواتب (المرتبات))؛ // 650

افتح صندوق الرمل مع الاختبارات.

حل

 دالة مجموع الرواتب (الرواتب) {

  دع المبلغ = 0؛
  لـ (دع راتب Object.values(salaries)) {
    المبلغ += الراتب؛
  }

  مبلغ الإرجاع؛ // 650
}

دع الرواتب = {
  "جون": 100،
  "بيت": 300،
  "مريم": 250
};

تنبيه (مجموع الرواتب (المرتبات))؛ // 650

أو، اختياريًا، يمكننا أيضًا الحصول على المجموع باستخدام Object.values reduce :

 // تقليل الحلقات على مجموعة الرواتب،
// إضافتها
// وإرجاع النتيجة
دالة مجموع الرواتب (الرواتب) {
  إرجاع Object.values(salaries).reduce((a, b) => a + b, 0) // 650
}

افتح الحل بالاختبارات في وضع الحماية.

عد الخصائص

الأهمية: 5

اكتب دالة count(obj) تُرجع عدد الخصائص الموجودة في الكائن:

 السماح للمستخدم = {
  الاسم: "جون"،
  العمر: 30
};

تنبيه(عدد(مستخدم)); // 2

حاول أن تجعل الكود قصيرًا قدر الإمكان.

ملحوظة: تجاهل الخصائص الرمزية، واحسب الخصائص "العادية" فقط.

افتح صندوق الرمل مع الاختبارات.

حل

 عدد الوظائف (الكائن) {
  إرجاع Object.keys(obj).length;
}

افتح الحل بالاختبارات في وضع الحماية.