طرق Map في JavaScript

طريقة new Map()

من خلال إرسال مصفوفة إلى new Map() مكتبة بناء Map:

النموذج

// إنشاء Map
const fruits = new Map([
  ["apples", 500],
  ["bananas", 300],
  ["oranges", 200]
]);

جرب بنفسك

Map.get()

يمكن استخدام get() يستعيد الطريقة الحصول على القيمة لمفتاح في Map:

النموذج

fruits.get("apples");

جرب بنفسك

Map.set()

يمكن استخدام set() يستعيد الطريقة إضافة عنصر إلى Map:

النموذج

// إنشاء Map
const fruits = new Map();
// تعيين قيمة Map
fruits.set("apples", 500);
fruits.set("bananas", 300);
fruits.set("oranges", 200);

جرب بنفسك

set() يمكن استخدام الطريقة أيضًا لتغيير القيمة الحالية في Map:

النموذج

fruits.set("apples", 500);

جرب بنفسك

Map.size

size يستعيد الطريقة عدد العناصر في Map:

النموذج

fruits.size;

جرب بنفسك

Map.delete()

delete() يستعيد الطريقة إزالة عنصر واحد من Map:

النموذج

fruits.delete("apples");

جرب بنفسك

Map.clear()

clear() يستعيد الطريقة إزالة جميع العناصر من Map:

النموذج

fruits.clear();

جرب بنفسك

Map.has()

إذا كان هناك مفتاح معين في Map،has() يستعيد الطريقة الصحيح:

النموذج

fruits.has("apples");

جرب بنفسك

جرب التالي:

fruits.delete("apples");
fruits.has("apples");

جرب بنفسك

Map.forEach()

forEach() يُطلق عليها الطريقة على كل زوج مفتاح-قيمة في Map:

النموذج

// قائمة بجميع المدخلات
let text = "";
fruits.forEach(function(value, key) {
  text += key + ' = ' + value;
});

جرب بنفسك

Map.entries()

entries() يستعيد الطريقة متجرًا يحتوي على [المفتاح, القيمةمتجرًا يحتوي على الـ

النموذج

// قائمة بجميع المدخلات
let text = "";
لـ (من خلال x من fruits.entries()) {
  text += x;
}

جرب بنفسك

Map.keys()

keys() يستعيد الطريقة متجرًا يحتوي على مفتاحي Map:

النموذج

// قائمة بجميع المفاتيح
let text = "";
لـ (من خلال x من fruits.keys()) {
  text += x;
}

جرب بنفسك

Map.values()

values() الطريقة تعود م迭代ر يحتوي على القيم في Map:

النموذج

// قائمة بجميع القيم
let text = "";
for (const x of fruits.values()) {
  text += x;
}

جرب بنفسك

يمكن استخدام values() الطريقة تقوم بجمع القيم في Map:

النموذج

// جمع جميع القيم
let total = 0;
for (const x of fruits.values()) {
  total += x;
}

جرب بنفسك

المفاتيح كعناصر

إشارة:استخدام العناصر كالمفاتيح هي خاصية مهمة في Map.

النموذج

// إنشاء العناصر
const apples = {name: 'Apples'};
const bananas = {name: 'Bananas'};
const oranges = {name: 'Oranges'};
// إنشاء Map
const fruits = new Map();
// إضافة عنصر جديد إلى Map
fruits.set(apples, 500);
fruits.set(bananas, 300);
fruits.set(oranges, 200);

جرب بنفسك

ملاحظة:المفتاح هو العنصر (apples) وليس النص ("apples"):

النموذج

fruits.get("apples"); // يعود undefined

جرب بنفسك

JavaScript Map.groupBy()

ES2024 أضاف إلى JavaScript Map.groupBy() الطريقة.

Map.groupBy() الطريقة تقوم بتجميع عناصر الهدف بناءً على القيمة الناتجة من الدالة المخصصة.

Map.groupBy() الطريقة لا تغير الهدف الأصلي.

النموذج

// إنشاء مصفوفة
const fruits = [
  {name: "apples", quantity: 300},
  {name: "bananas", quantity: 500},
  {name: "oranges", quantity: 200},
  {name: "kiwi", quantity: 150}
];
// وحدة التجميع المخصصة
function myCallback({ quantity }) {
  return quantity > 200 ? "ok" : "low";
}
// حسب العدد الفئوية
const result = Map.groupBy(fruits, myCallback);

جرب بنفسك

دعم المتصفح

Map.groupBy() هي ميزة ES2024.

من مارس 2024، جميع المتصفحات الجديدة تدعم هذه الميزة:

Chrome Edge Firefox Safari Opera
Chrome 117 Edge 117 Firefox 119 Safari 17.4 Opera 103
أيلول 2023 أيلول 2023 تشرين الأول 2023 تشرين الأول 2024 أيار 2023

تحذير:

ميزات ES2024 جديدة نسبياً.

قد تحتاج المتصفحات القديمة إلى رمز بديل (Polyfill).

الفرق بين Object.groupBy() و Map.groupBy()

Object.groupBy() و Map.groupBy() الفرق بينهما هو:

Object.groupBy() جمع العناصر في JavaScript.

Map.groupBy() جمع العناصر في Map.

دليل مرجع Map الكامل

للحصول على مرجع كامل، يرجى زيارة:دليل مرجع JavaScript Map.

هذا الدليل يحتوي على وصف جميع خصائص Map وطرقها ومثال