Yayınlandı

JavaScript Set: Yeni Başlayan Geliştiriciler İçin Temel Bilgiler

Yazarlar

Neden Set?

Set, herhangi bir türde benzersiz değerleri depolamanıza olanak tanıyan bir veri yapısıdır. Diziye benzer, ancak yinelenen değerlere izin vermez. Herhangi bir türde benzersiz değerleri tutmanın harika bir yoludur. Bazen bir dizide benzersiz değerleri depolamak istersiniz, ancak değerin zaten var olup olmadığını kontrol etmek için dizi üzerinde döngü oluşturmak istemezsiniz. İşte Set işinize yarayabilir.

Önceki bir makalede, Javascript Map hakkında konuştuk. Set, Map'e benzer, ancak yalnızca anahtarları depolar, değerleri değil. Herhangi bir türde benzersiz değerleri saklamanın harika bir yoludur. Birçok durumda Map kullanmak zorlayıcı olabilir. Bu nedenle, Set hakkında konuşalım.

JavaScript Set Nedir?

Set nesneleri, değer kümeleridir. Set'teki bir değer yalnızca bir kez bulunabilir; Set'in koleksiyonunda benzersizdir. Bir Set'in öğeleri üzerinde ekleme sırasına göre yineleyebilirsiniz. Ekleme sırası, her parçanın Set tarafından add() yöntemi tarafından başarıyla Set'e eklendiği sıraya karşılık gelir (yani, Set add()'u çağırdığında Set'te zaten aynı bir öğe yoktu).

Belirtim, setlerin "ortalama olarak, koleksiyondaki öğe sayısı üzerinde alt-doğrusal erişim süreleri sağlayan" şekilde uygulanmasını gerektirir. Bu nedenle, içsel olarak bir karma tablo (O(1) aramalı), bir arama ağacı (O(log(N)) aramalı) veya diğer herhangi bir veri yapısıyla temsil edilebilir, ancak karmaşıklık O(N)'den daha iyi olduğu sürece.

Set Nasıl Oluşturulur?

Bir Set oluşturmanın iki yolu vardır. İlk yol, Set yapıcısını kullanmaktır. İkinci yol, Set nesne sabiti kullanmaktır.

Set Yapıcısı

Set yapıcısı, yeni bir Set nesnesi oluşturur. Yapıcıya bir yinelenebilir nesne argüman olarak geçirebilirsiniz. Yinelenebilir nesnenin öğeleri yeni Set'e eklenecektir.

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

Set Nesne Sabiti

Set nesne sabiti, yeni bir Set nesnesi oluşturur. Nesne sabitine bir yinelenebilir nesne argüman olarak geçirebilirsiniz. Yinelenebilir nesnenin öğeleri yeni Set'e eklenecektir.

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

Set Metotları & Özelliği

MetotAçıklama
add()Belirtilen değere sahip yeni bir öğeyi Set nesnesine ekler.
clear()Set nesnesinden tüm öğeleri kaldırır.
delete()Belirtilen değere sahip öğeyi kaldırır ve Set.prototype.has(value) fonksiyonunun daha önce döndürdüğü değeri döndürür. Set.prototype.has(value) daha sonra false döndürecektir.
entries()Set nesnesindeki her öğe için [değer, değer] dizisini içeren yeni bir İteratör nesnesi döndürür, ekleme sırasına göre.
forEach()Set nesnesindeki her değer için sağlanan fonksiyonu, ekleme sırasına göre bir kez yürütür.
has()Belirtilen değere sahip bir öğenin Set nesnesinde olup olmadığını doğrulayan bir boolean değeri döndürür.
keys()Set nesnesindeki her öğenin değerlerini, ekleme sırasına göre içeren yeni bir İteratör nesnesi döndürür.
values()Set nesnesindeki her öğenin değerlerini, ekleme sırasına göre içeren yeni bir İteratör nesnesi döndürür.
ÖzellikAçıklama
sizeSet nesnesindeki değer sayısını döndürür.

Set Örnekleri

Set'e Değer Ekleme

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

Set'ten Değer Silme

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

Set'te Bir Değerin Var Olduğunu Kontrol Etme

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

Set Üzerinden Yineleme

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

Set'i Diziye Dönüştürme

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

Diziyi Set'e Dönüştürme

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

Set Boyutunu Alma

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

Set'i Temizleme

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

Set'i Birleştirme

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 }

İki Set'in Kesişimini Alma

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 }

İki Set Arasındaki Farkı Alma

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 }

Bir Set'in Başka Bir Set'in Alt Kümesi Olup Olmadığını Kontrol Etme

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

Bir Set'in Başka Bir Set'in Üst Kümesi Olup Olmadığını Kontrol Etme

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

İki Set'in Ayrık Olup Olmadığını Kontrol Etme

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

İki Set'in Eşit Olup Olmadığını Kontrol Etme

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

Tarayıcı Desteği

ChromeChromeFirefoxFirefoxEdgeEdgeSafariSafariOperaOpera
49+44+12+10.1+36+

Set vs. Dizi

SetDizi
Benzersiz değer, yinelenen değere izin vermeYinelenen değere izin ver
Set, belirli bir sırada olmayan değer kümesidirDizi, belirli bir sırada değer kümesidir
Set yinelenebilirDizi yinelenebilir
Set, karma işlemi kullandığı için diziden daha yavaş başlatılır.Dizi başlatma açısından daha hızlıdır
Bir öğenin varlığını kontrol ederken performans daha iyidirBir öğeye erişirken performans daha iyidir

Bu makale, orijinal olarak blog.imam.dev sitesinde yayınlanmıştır.

Referanslar

  1. Mozilla Developer Network - Set

  2. W3Schools - Set

  3. ECMAScript® 2015 Dil Belirtimi - Set