منشور في

Liis-liiska JavaScript: Tilmaame ujeed looguulayaasha buuxa ah

الكتاب

علاش Set ؟

Set هي واحد لstructure ديال data اللي كتخليك تخزن قيم unique ديال أي نوع. شبه ل Array بلا ما كتخلي قيم متكررة. هيا واحد لطريقة زوينة باش تحفظ قيم unique ديال أي نوع. ساعات كتكون بغيت تخزن قيم unique في Array, ولكن ما بغيتش تدور ف ل Array باش تشوف واش لقييمة موجودة أو لا. هنا Set كدخل ف اللعبة.

ف مقال قبلاني، شرحنا Javascript Map. Set شبه Map, ولكن كتخزن غير keys, ما كتخزنش values. هي واحد لطريقة زوينة باش تبقى مع قيم unique ديال أي نوع. كتكون صعيبة باش تستعمل Map ف بزاف ديال الحالات. هنا علاش غادي نتكلموا على Set.

شنو هو JavaScript Set ؟

Set objects هي مجموعات ديال قيم. وحدة من لقييم ف Set كتكون موجودة مرة وحدة; هي unique ف مجموعة Set. كتقدر تدور على العناصر ديال Set ف ترتيب ل insertion. ترتيب ل insertion هو ترتيب كل وحدة تم دخولها Set بواسطة الطريقة add() بنجاح (يعني ما كانش عنصر متطابق موجود ف Set عند ما Set دير add()).

المواصفات كاتطلب أن Sets تتنفذ "بحيث، ف المتوسط، توفر أوقات وصول sublinear على عدد elements ف المجموعة". بالتالي، كتقدر تكون متمثلة ف الداخل ك hash table (مع O(1) lookup), شجرة بحث (مع O(log(N)) lookup), أو أي structure ديال data آخر, ما دام التعقيد أفضل من O(N).

كيفاش ندير Set ؟

كاينين جوج طرق باش ندير Set. الطريقة الأولى هي نستعمل constructor ديال Set. الطريقة الثانية هي نستعمل literal ديال Set object.

Set constructor

constructor ديال Set كيخلق Set object جديد. كتقدر تدخل Object قابل ل iteration ك argument ل constructor. Elements ديال ل Object القابل ل iteration غادي يتم إضافتهم ل Set الجديد.

const set = new Set([1, 2, 3, 4, 5])

Set object literal

literal ديال Set object كيخلق Set object جديد. كتقدر تدخل Object قابل ل iteration ك argument ل literal ديال object. Elements ديال ل Object القابل ل iteration غادي يتم إضافتهم ل Set الجديد.

const set = {1, 2, 3, 4, 5};

Set Methods & Property

MethodDescription
add()كضيف عنصر جديد ب value محددة ل Set object.
clear()كيمسح جميع elements من Set object.
delete()كيمسح element مرتبط ب value و كيرجع value لي Set.prototype.has(value) كانت غادي ترجعها قبل. Set.prototype.has(value) غادي ترجع false بعد ذلك.
entries()كترجع Iterator object جديد اللي كيتضمن array ديال [value, value] لكل element ف Set object, ف ترتيب ل insertion.
forEach()كيتنفيذ function معطى مرة لكل value ف Set object, ف ترتيب ل insertion.
has()كترجع boolean لي كتأكد واش element موجود ب value معطاة ف Set object.
keys()كترجع Iterator object جديد اللي كيتضمن values لكل element ف Set object ف ترتيب ل insertion.
values()كترجع Iterator object جديد اللي كيتضمن values لكل element ف Set object ف ترتيب ل insertion.
PropertyDescription
sizeكترجع عدد values ف Set object.

Set Examples

ضيف value ل Set

const set = new Set([1, 2, 3, 4, 5])
set.add(6)
console.log(Set) // Set { 1, 2, 3, 4, 5, 6 }

مسح value من Set

const set = new Set([1, 2, 3, 4, 5])
set.delete(3)
console.log(set) // Set { 1, 2, 4, 5 }

تفحص واش value موجودة ف Set

const set = new Set([1, 2, 3, 4, 5])
console.log(set.has(3)) // true

دور على Set

const set = new Set([1, 2, 3, 4, 5])
for (const item of Set) {
  console.log(item)
}
// 1
// 2
// 3
// 4
// 5

حول Set ل Array

const set = new Set([1, 2, 3, 4, 5])
const array = Array.from(set)
console.log(array) // [1, 2, 3, 4, 5]

حول Array ل Set

const Array = [1, 2, 3, 4, 5]
const set = new Set(array)
console.log(Set) // Set { 1, 2, 3, 4, 5 }

حصول على حجم Set

const set = new Set([1, 2, 3, 4, 5])
console.log(set.size) // 5

مسح Set

const set = new Set([1, 2, 3, 4, 5])
set.clear()
console.log(set) // Set {}

دمج Set

const set1 = new Set([1, 2, 3, 4, 5])
const set2 = new Set([6, 7, 8, 9, 10])
const set3 = new Set([...set1, ...set2])
console.log(set3) // Set { 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 }

حصول على intersection ديال جوج Sets

const set1 = new Set([1, 2, 3, 4, 5])
const set2 = new Set([4, 5, 6, 7, 8])
const set3 = new Set([...set1].filter((x) => set2.has(x)))
console.log(set3) // Set { 4, 5 }

حصول على الفرق بين جوج Sets

const set1 = new Set([1, 2, 3, 4, 5])
const set2 = new Set([4, 5, 6, 7, 8])
const set3 = new Set([...set1].filter((x) => !set2.has(x)))
console.log(set3) // Set { 1, 2, 3 }

تفحص واش Set هي subset ديال Set آخر

const set1 = new Set([1, 2, 3, 4, 5])
const set2 = new Set([4, 5])
console.log([...set2].every((x) => set1.has(x))) // true

تفحص واش Set هي superset ديال Set آخر

const set1 = new Set([1, 2, 3, 4, 5])
const set2 = new Set([4, 5])
console.log([...set1].every((x) => set2.has(x))) // false

تفحص واش جوج Sets disjoint

const set1 = new Set([1, 2, 3, 4, 5])
const set2 = new Set([6, 7, 8, 9, 10])
console.log([...set1].every((x) => !set2.has(x))) // true

تفحص واش جوج Sets متساوية

const set1 = new Set([1, 2, 3, 4, 5])
const set2 = new Set([1, 2, 3, 4, 5])
console.log(set1.size === set2.size && [...set1].every((x) => set2.has(x))) // true

Browser Support

ChromeChromeFirefoxFirefoxEdgeEdgeSafariSafariOperaOpera
49+44+12+10.1+36+

Set vs. Array

SetArray
قيمة unique, منع قيم متكررةالسماح ب قيم متكررة
Set هي مجموعة من القيم بلا ترتيب معينArray هي مجموعة من القيم ب ترتيب معين
Set قابل ل iterationArray قابل ل iteration
Set أبطأ من Array ف ال initialization لأنها تستعمل عملية hash.Array أسرع ف ال initialization
الأداء أفضل عند التحقق من وجود عنصرالأداء أفضل عند الوصول ل عنصر

هذا المقال تم نشره أصلاً على blog.imam.dev.

المراجع

  1. Mozilla Developer Network - Set

  2. W3Schools - Set

  3. ECMAScript® 2015 Language Specification - Set