Vad är javascript-symboler och hur kan de hjälpa dig?

digitateam





Symboler är ett nytt primitivt värde som introducerats av ES6. Deras syfte är att ge oss unika identifierare. I den här artikeln berättar vi hur de fungerar, på vilket sätt de används med JavaScript och hur de kan hjälpa oss.


Hur man skapar symboler


För att skapa en ny symbol måste vi använda dess konstruktor:

const symbol = Symbol();

Funktionen har en valfri strängparameter som fungerar som en beskrivning.

const symbol = Symbol(‘beskrivning’); console.log(symbol);//Symbol(beskrivning)

Det viktiga är att även om du använder samma beskrivning mer än en gång så är varje symbol unik.

Symbol(‘description’) === Symbol(‘description’); //false Som jag sa tidigare, symboler är nya primitiva värden och har sin egen typ. Vi kan kontrollera detta genom att använda typen av:
typ av Symbol(); //symbol

Konvertera till symboltyp


Du vet redan att i Javascript är det möjligt att konvertera typer. En stor del av detta är den implicita konverteringen, som sker när vi använder värden av olika typer tillsammans:

console.log(1 + ” lagt till ” + 2 + ” är lika med ” + 3); //1 läggs till 2 är lika med 3

Även om det finns typer som är kompatibla är detta inte fallet för symboler.

const symbol = Symbol(‘Hej’); symbol + ‘värld!’; //Uncaught TypeError: Kan inte konvertera ett symbolvärde till en sträng

Om du vill använda symboler på detta sätt måste du konvertera det eller använda egenskapen “description”.

const symbol = Symbol(‘Hej’); console.log(`${symbol.description} värld!`); //Hej världen!

Hur man använder symboler


Innan vi dyker in i symboler säger det sig självt att nycklarna till ett föremål bara kan vara strängar. Att försöka använda ett objekt som nyckel för en egenskap ger inget förväntat resultat.

const nyckel = {}; const myObject = {
[key]: ‘Hej världen!’ }; console.log(myObject); /* {
[object Object]: ‘Hej världen!’ } */

Detta är inte fallet för symboler. ECMAScript-specifikationen säger att vi kan använda dem som nycklar. Så låt oss ge det ett försök.

const nyckel = Symbol(); const myObject = {
[key]: ‘Hej världen!’ }; console.log(myObject); /* { Symbol(): ‘Hej världen!’ } */

Även om två symboler har samma beskrivning kommer de inte att överlappa varandra när de används som nycklar:

const nyckel = Symbol(‘nyckel’); const myObject = {
[key]: ‘Hej världen!’ }; console.log(myObject[key] === mitt Objekt[Symbol(‘key’)]); //falsk

Detta innebär att vi kan tilldela ett obegränsat antal unika symboler och inte oroa oss för konflikter mellan dem.


Få åtkomst till värdet


Nu är det enda sättet att komma åt vårt värde att använda symbolen.

console.log(myObject[key]); // Hej världen!

Det finns vissa skillnader när det gäller att iterera genom egenskaperna hos ett objekt med symboler. Funktionerna Object.keys, Object.entries och Object.entries ger oss inte tillgång till några värden som använder symboler, detsamma gäller för en for … in. Det enklaste sättet att iterera genom dem är att använda Object. getOwnPropertySymbols-funktionen.

const nyckel = Symbol(); const myObject = {
[key]: ‘Hej världen!’ }; Object.getOwnPropertySymbols(myObject) .forEach((symbol) => { console.log(myObject[symbol]); }); //Hej världen!

Att döma av ovanstående kan vi dra slutsatsen att symbolerna förser oss med ett dolt lager under objektet, skilt från tangenterna som är strängar.


Symboler är unika… åtminstone för det mesta.


Sättet att skapa en global symbol är att använda funktionen Symbol.for.

const symbol = Symbol.for(‘nyckel’); console.log(symbol === Symbol.for(‘nyckel’)); //Sann

Om du är osäker på om en symbol är unik kan du använda funktionen Symbol.keyFor. Den returnerar den associerade nyckeln om den hittas.

Symbol.keyFor( Symbol.for(‘key’) ); //key Symbol.keyFor( Symbol(‘nyckel’) ); //odefinierad


















projekt

Bokning gratis bokningsmotor

Recipetor - verktyg för hantering av kök, recept och leverantörer

































Vi använder våra egna och tredje parts cookies för att förbättra våra tjänster, sammanställa statistisk information och analysera dina surfvanor. Detta gör att vi kan anpassa innehållet vi erbjuder och visa dig annonser som är relaterade till dina preferenser. Genom att klicka på “Acceptera alla” godkänner du lagringen av cookies på din enhet för att förbättra webbplatsnavigering, analysera trafik och hjälpa våra marknadsföringsaktiviteter. Du kan också välja “Endast systemcookies” för att endast acceptera de cookies som krävs för att webbplatsen ska fungera, eller så kan du välja de cookies du vill aktivera genom att klicka på “inställningar”.

Acceptera alla Endast systemcookies Konfiguration

Alltid aktiv

Strikt nödvändiga cookies

Dessa cookies är nödvändiga för att webbplatsen ska fungera och kan inte inaktiveras i våra system. De ställs i allmänhet bara in som svar på dina handlingar när du begär tjänster, som att ställa in dina integritetsinställningar, logga in eller fylla i formulär. Du kan ställa in din webbläsare för att blockera eller varna dig för dessa cookies, men vissa delar av webbplatsen kommer inte att fungera. Dessa cookies lagrar ingen personligt identifierbar information
















Click to rate this post!
[Total: 0 Average: 0]
Next Post

Los Santos Drug Wars-uppdateringen är tillgänglig nu i GTA Online

Rockstar Games har officiellt lanserat Los Santos Drug War-expansion för Grand Theft Auto Online. Precis så har alla en annan anledning att dyka tillbaka djupt in i GTA Online. Los Santos Drug Wars-uppdateringen gick live tisdagen den 13 december. Den senaste GTA Online-uppdateringen, som är tillgänglig på alla plattformar, kommer […]

Subscribe US Now