Sady JavaScriptu

Obsah

    Zobrazit obsah

Sada JavaScriptu je kolekce jedinečných hodnot.

Každá hodnota se může v sadě vyskytnout pouze jednou.

Sada může obsahovat libovolnou hodnotu jakéhokoli datového typu.

Nastavit metody

new Set()

Vytvoří novou sadu

add()

Přidá nový prvek do sady

delete()

Odebere prvek ze sady

has()

Vrátí hodnotu true, pokud hodnota existuje

clear()

Odebere všechny prvky ze sady

forEach()

Vyvolá zpětné volání pro každý prvek

values()

Vrátí iterátor se všemi hodnotami v sadě

keys()

Stejné jako hodnoty()

entries()

Vrátí Iterátor s páry [value,value] ze sady

size

Vrátí číselné prvky v sadě

Jak vytvořit sadu

Sadu JavaScriptu můžete vytvořit takto:

  • Předání pole do nové Set()

  • Vytvořte novou sadu a pomocí add() přidejte hodnoty

  • Vytvořte novou sadu a pomocí add() přidejte proměnné

Nová metoda Set()

Předejte pole konstruktoru new Set():

Příklad

// Create a Set
const letters = new Set(["a","b","c"]);

Zkuste to sami →

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Sets</h2>
<p>Create a Set from an Array:</p>

<p id="demo"></p>

<script>
// Create a Set
const letters = new Set(["a","b","c"]);

// Display set.size
document.getElementById("demo").innerHTML = letters.size;
</script>

</body>
</html>

Vytvořte sadu a přidejte doslovné hodnoty:

Příklad

// Create a Set
const letters = new Set();

// Add Values to the Set
letters.add("a");
letters.add("b");
letters.add("c");

Zkuste to sami →

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Sets</h2>
<p>Add values to a Set:</p>

<p id="demo"></p>

<script>
// Create a Set
const letters = new Set();

// Add Values to the Set
letters.add("a");
letters.add("b");
letters.add("c");

// Display set.size
document.getElementById("demo").innerHTML = letters.size;
</script>

</body>
</html>

Vytvořte sadu a přidejte proměnné:

Příklad

// Create Variables
const a = "a";
const b = "b";
const c = "c";

// Create a Set
const letters = new Set();

// Add Variables to the Set
letters.add(a);
letters.add(b);
letters.add(c);

Zkuste to sami →

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Sets</h2>
<p>Add variables to a Set:</p>

<p id="demo"></p>

<script>
// Create a Set
const letters = new Set();

// Create Variables
const a = "a";
const b = "b";
const c = "c";

// Add the Variables to the Set
letters.add(a);
letters.add(b);
letters.add(c);

// Display set.size
document.getElementById("demo").innerHTML = letters.size;
</script>

</body>
</html>

Metoda add()

Příklad

letters.add("d");
letters.add("e");

Zkuste to sami →

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Sets</h2>
<p>Adding new elements to a Set:</p>

<p id="demo"></p>

<script>
// Create a new Set
const letters = new Set(["a","b","c"]);

// Add a new Element
letters.add("d");
letters.add("e");

// Display set.size
document.getElementById("demo").innerHTML = letters.size;
</script>

</body>
</html>

Pokud přidáte stejné prvky, uloží se pouze první:

Příklad

letters.add("a");
letters.add("b");
letters.add("c");
letters.add("c");
letters.add("c");
letters.add("c");
letters.add("c");
letters.add("c");

Zkuste to sami →

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Sets</h2>
<p>Adding equal elements to a Set:</p>

<p id="demo"></p>

<script>
// Create a Set
const letters = new Set();

// Add values to the Set
letters.add("a");
letters.add("b");
letters.add("c");
letters.add("c");
letters.add("c");
letters.add("c");
letters.add("c");
letters.add("c");

// Display set.size
document.getElementById("demo").innerHTML = letters.size;
</script>

</body>
</html>

Metoda forEach()

Metoda forEach() vyvolá funkci pro každý prvek Set:

Příklad

// Create a Set
const letters = new Set(["a","b","c"]);

// List all entries
let text = "";
letters.forEach (function(value) {
  text += value;
})

Zkuste to sami →

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Sets</h2>
<p>forEach() calls a function for each element:</p>

<p id="demo"></p>

<script>
// Create a Set
const letters = new Set(["a","b","c"]);

// List all Elements
let text = "";
letters.forEach (function(value) {
  text += value + "<br>";
})

document.getElementById("demo").innerHTML = text;
</script>

</body>
</html>

Metoda values()

Metoda values() vrací objekt Iterator obsahující všechny hodnoty v sadě:

Příklad

letters.values()   // Returns [object Set Iterator]

Zkuste to sami →

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Sets</h2>
<p>Set.values() returns a Set Iterator:</p>

<p id="demo"></p>

<script>
// Create a Set
const letters = new Set(["a","b","c"]);

// Display set.size
document.getElementById("demo").innerHTML = letters.values();
</script>

</body>
</html>

Nyní můžete použít objekt Iterator pro přístup k prvkům:

Příklad

// Create an Iterator
const myIterator = letters.values();

// List all Values
let text = "";
for (const entry of myIterator) {
  text += entry;
}

Zkuste to sami →

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Sets</h2>
<p>Iterating Set values:</p>

<p id="demo"></p>

<script>
// Create a Set
const letters = new Set(["a","b","c"]);

// List all Elements
let text = "";
for (const x of letters.values()) {
  text += x + "<br>";
}

document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>

Metoda keys()

Sada nemá žádné klíče.

keys() vrací stejné jako values().

Díky tomu jsou sady kompatibilní s Mapami.

Příklad

letters.keys()   // Returns [object Set Iterator]

Zkuste to sami →

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Sets</h2>
<p>Set.keys() returns a Set Iterator:</p>

<p id="demo"></p>

<script>
// Create a Set
const letters = new Set(["a","b","c"]);

// Display set.size
document.getElementById("demo").innerHTML = letters.keys();
</script>

</body>
</html>

Metoda entries()

Sada nemá žádné klíče.

entries() vrací páry [value,value] místo párů [klíč,hodnota].

Díky tomu jsou sady kompatibilní s Mapami:

Příklad

// Create an Iterator
const myIterator = letters.entries();

// List all Entries
let text = "";
for (const entry of myIterator) {
  text += entry;
}

Zkuste to sami →

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Sets</h2>
<p>entries() Returns an Iterator with [value,value] pairs from a Set:</p>

<p id="demo"></p>

<script>
// Create a Set
const letters = new Set(["a","b","c"]);

// List all entries
const iterator = letters.entries();
let text = "";
for (const entry of iterator) {
  text += entry + "<br>";
}

document.getElementById("demo").innerHTML = text;
</script>

</body>
</html>

Sady jsou objekty

Pro sadu vrací typeof objekt:

typeof letters;      // Returns object

Zkuste to sami →

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Sets Objects</h2>
<p>The typeof operator returns object:</p>

<p id="demo"></p>

<script>
// Create a new Set
const letters = new Set(["a","b","c"]);

// Display typeof
document.getElementById("demo").innerHTML = typeof letters;
</script>

</body>
</html>

Pro sadu vrátí instanceof Set hodnotu true:

letters instanceof Set;  // Returns true

Zkuste to sami →

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Sets</h2>
<p>The instanceof operator returns true:</p>

<p id="demo"></p>

<script>
// Create a new Set
const letters = new Set(["a","b","c"]);

// Display typeof
document.getElementById("demo").innerHTML = letters instanceof Set;
</script>

</body>
</html>