JavaScript Void 0 Forklart på bare 5 minutter

0 Shares

JavaScript er et skriptspråk som kan brukes i både front-end og back-end utvikling. Med dette programmeringsspråket kan du lage innhold som oppdateres dynamisk, animere bilder og kontrollere multimedia.

JavaScript har hundrevis av rammeverk og biblioteker og er også det mest brukte programmeringsspråket, ifølge Statista.

JavaScript har forskjellige operatører laget for å oppnå forskjellige roller. I denne artikkelen vil jeg forklare hva JavaScript Void (0) er, dets betydning, dets brukstilfeller og fordeler, potensielle sikkerhetsrisikoer og alternativene.

Innholdsfortegnelse

Hva er Void (0)-operatøren?

I våre ordbøker betyr void «ikke gyldig» eller «helt tom». Void (0) er en operatør som sjekker en gitt verdi og returnerer udefinert. En funksjon anses som ugyldig hvis den ikke returnerer noe. Void (0)-operatøren kan brukes i mange områder.

Du kan for eksempel få JavaScript til å returnere udefinert når du klikker på en ankertag. Når det skjer, betyr det at siden du klikker på ikke vil bli oppdatert, og ingenting vil skje med den siden.

Viktigheten av å bruke Void-operatoren og 0 som operand

Du kan bruke void-operatoren med ethvert uttrykk. Men i JavaScript brukes det mest med 0 som operand. Her er noen brukstilfeller for Void (0)-operatøren:

Hindre navigering

Ved vanlige anledninger, hvis du klikker på en lenke, vil den sannsynligvis ta deg til en ny side. Vi kan lage et prosjekt for å demonstrere hvordan det fungerer. Jeg vil ha to filer på prosjektet mitt: index.html og nextPage.html.

Du kan legge til denne koden i forskjellige filer som følger:

Index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Home Page</title>
</head>
<body>
    <h1>Welcome to the Home Page</h1>
    <a href="https://wilku.top/javascript-void-0-explained-in-just-5-minutes/nextPage.html">Go to Next Page (No void operator)</a>
    <script src="script.js"></script>
</body>
</html>
nextPage.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Next Page</title>
</head>
<body>
    <h1>You are on the Next Page</h1>
    <a href="index.html">Go back to Home Page (No void operator)</a>
    <script src="script.js"></script>
</body>
</html>

Sjekk denne videoen:

Som du kan se, kan du navigere fra «Hjem» til «Neste side» ved å klikke på knappen.

Vi kan nå introdusere void (0)-operatøren som blokkerer navigasjon. Legg til denne koden i index.html:

<!-- With void operator -->
<a href="https://wilku.top/javascript-void-0-explained-in-just-5-minutes/javascript:void(0);" onclick="doSomething()">Click me</a>
<script>
  function doSomething() {
    alert("Button clicked, but no navigation!");
  }
</script><!-- With void operator -->
<a href="https://wilku.top/javascript-void-0-explained-in-just-5-minutes/javascript:void(0);" onclick="doSomething()">Click me</a>
<script>
  function doSomething() {
    alert("Button clicked, but no navigation!");
  }
</script>

Sjekk denne videoen når vi trykker på «Klikk meg»-knappen:

Topp 18 beste gratis WiFi-ringeapper for iPhone

Du kan se at etter å ha klikket på knappen, dette varselet, «Knappen klikket, men ingen navigering!» vises, men vi navigerer ikke til neste side.

Selvutførende anonyme funksjoner

En selvutførende anonym funksjon eller umiddelbart påkalt funksjonsuttrykk (IIFE) er en funksjon som er definert og utført etter opprettelse. Slike funksjoner er designet for å skape et privat omfang for variabler som hindrer disse funksjonene i å forurense det globale omfanget.

Ta en titt på denne koden:

void function() {
    // Function to calculate the sum of numbers from 1 to n
    const calculateSum = () => {
        let sum = 0;
        for (let i = 1; i <= 10; i++) {
            sum += i;
        }
        return sum;
    };
    // Call the function and log the result to the console
    const result = calculateSum();
    console.log("The sum of numbers from 1 to 10 is:", result);
}();

Dette er en selvutførende funksjon som legger til alle tallene fra 1-10 og viser resultatene når koden er utført.

Når du kjører koden, vil utgangen være: «Summen av tall fra 1 til 10 er: 55».

Hvordan kombinere JavaScript og Void 0

Void-operatoren er ikke eksklusiv for JavaScript da den er tilgjengelig på andre programmeringsspråk som C og C++. Bruken av denne operatøren varierer imidlertid fra ett språk til et annet. For eksempel er void en datatype i programmeringsspråkene C og C++ og ikke en operatør.

JavaScript bruker nøkkelordet «void» med den numeriske null. Du kan bruke void ()-operatoren for å forhindre standardadferd, for eksempel at nettleseren navigerer til neste URL. Dette er et perfekt eksempel på en kodeblokk som kombinerer JavaScript med void ()-operatoren.

<a href="https://wilku.top/javascript-void-0-explained-in-just-5-minutes/javascript:void(0);" onclick="myFunction()">Click me</a>

Du kan også bruke void ()-operatoren for å få en udefinert primitiv verdi. Ta en titt på denne kodeblokken:

const result = void(0);const result = void(0);

Når du kjører det, vil du bli udefinert.

Hva er Void (0) fordeler?

I JavaScript bruker vi void ()-operatoren for å lage «void» eller «udefinerte» verdier. Dette er noen av fordelene ved å bruke denne operatøren i koden din:

Forhindre navigering: Vi kan bruke void(0) Operator i href-attributtet hvis vi vil forhindre at nettleserne navigerer til en ny side når vi klikker på en lenke eller knapp. Denne kodeblokken illustrerer hvordan det fungerer:

<a href="https://wilku.top/javascript-void-0-explained-in-just-5-minutes/javascript:void(0);" onclick="myFunction();">Click me</a>

Returner udefinerte verdier fra funksjoner: Som utvikler kan du bruke void ()-operatoren for å eksplisitt returnere udefinert når du vil ha kodekonsistens i applikasjonen din. Sjekk ut denne kodeblokken:

function myFunction() {
    // do something
    return void(0);
}

Unngå «undefined»-tilordning: Du kan bruke void () på en slik måte at «undefined» tilsvarer «resultatet». Du kan også bruke den som et stilistisk valg. Denne kodeblokken viser hvordan du kan oppnå dette:

let result = void(0);

Gjør koden mer lesbar: Kodelesbarhet er ikke noe vi bør ignorere, spesielt når vi arbeider med store applikasjoner. Du kan bruke void() når du eksplisitt vil forkaste returverdien og gjøre det kjent for andre utviklere at funksjonen ikke vil returnere noe. Denne kodeblokken viser hvordan du kan oppnå dette:

function myFunction() {
  // Do something...
  return void(0);
}

Potensielle sikkerhetsrisikoer for ugyldighet (0)

Selv om void (0) er nyttig i ulike tilfeller i JavaScript, kan det også vise seg å være farlig hvis det ikke brukes riktig. Dette er noen av tilfellene der void (0) kan bli brukt med ondsinnethet:

Skriptinjeksjonssårbarheter: Det er potensielle risikoer for skriptinjeksjonsangrep hvis verdien som sendes til void ()-operatøren ikke renses og valideres. Et godt eksempel er når denne verdien genereres dynamisk basert på brukerinndata.

<a href="https://wilku.top/javascript-void-0-explained-in-just-5-minutes/javascript:void(alert("This could be malicious!'));">Click me</a>

En slik kodeblokk lar brukere injisere ondsinnet kode.

Clickjacking: Angripere kan bruke void-operatorer for å lage transparente/usynlige lag over en nettside. Slike angripere vil da bruke disse lagene til å lure brukere til å klikke på skadelige lenker og knapper.
Kan brukes til å omgå Content Security Policy (CSP): De fleste nettstedeiere bruker CSP for å forhindre cross-site scripting (XSS) angrep. Du kan bruke CSP til å begrense arten av skript og ressurser som nettsidene dine skal laste. Imidlertid kan bruken av void ()-operatøren komme i konflikt med slike tiltak da den laster inn selv skriptene som ikke er tillatt av innholdssikkerhetspolicyen.

10 beste SEO-analyseverktøy på siden for å finne problemer og anbefalinger

Alternativer til ugyldig (0)

Teknologien fortsetter å endre seg, og det samme gjør programmering. Noen ser på void (0) som en utdatert operatør. Dette er noen av alternativene som moderne utviklere bruker:

Bruk event.preventDefault(): Du kan bruke event.preventDefault() for å forhindre at handlingen til en hendelse skjer. En slik erklæring kan hindre brukere i å sende inn et skjema eller navigere til neste side.

Disse kodebitene viser hvordan du bruker event.preventDefault:

#html
<a href="#" onclick="event.preventDefault()">My Link</a>

#JavaScript
document.querySelector('a').addEventListener('click', event => event.preventDefault());

Bruk # som href-verdi: Ulike sider i en applikasjon er sammenkoblet for enkel navigering. Å bruke # som href sikrer at brukerne forblir på samme side. Du kan bruke denne tilnærmingen sammen med event.prevetDefault() for å forhindre at nettsiden din ruller til toppen. Slik kan du oppnå dette:

#html

<a href="#">My Link</a>

#JavaScript
document.querySelector('a').addEventListener('click', event => {
  event.preventDefault();
  window.scrollTo(0, 0);
});

Bruk null: Du kan returnere en nullverdi i stedet for udefinert. Slik kan du oppnå dette:

let result = null;

Vanlige spørsmål

Hva er JavaScript?

Hva er en virtuell katalog og hvordan lage en?

JavaScript er et programmeringsspråk som oftest brukes i frontend-utvikling. Dette språket brukes imidlertid i back-end-utvikling med rammeverk som Node.js. JavaScript brukes for det meste med andre front-end-teknologier som CSS og HTML for å legge til interaktivitet på nettsider.

Hva er JavaScript Void 0?

JavaScript Void 0 er en operatør som brukes for å forhindre at standardhandling skjer. Du kan for eksempel bruke void (0) for å forhindre navigering når en bruker klikker på en lenke eller en knapp. Når en lenke fra en kode med ugyldig (0) klikkes, forsøker nettleseren å navigere, men resultatene evalueres til udefinert.

Finnes det alternativer til void (0)?

Ja. De fleste moderne utviklere bruker hendelseslyttere i stedet for void (0) i koden. Denne tilnærmingen gjør det enkelt å håndtere ulike funksjoner og forhindre standardoppførsel i kildekoder.

Er bruk av void (0) trygt?

Du kan bruke void (0) for å forhindre standardoppførsel og med selvutførende funksjoner. Imidlertid kan void (0) være farlig hvis du ikke bruker det bevisst i koden din. En slik operatør kan for eksempel gjøre det enkelt å injisere ondsinnet kode hvis den brukes på brukerinndata.

Konklusjon

JavaScript er et veldig bredt programmeringsspråk, og det kan ta tid før du mestrer de fleste av konseptene.

Vi har lært hva void (0)-operatøren er dens betydning og brukstilfeller, og dens alternativer. Du forstår nå også hvordan du kombinerer JavaScript og void(0) de potensielle risikoene du sannsynligvis vil komme over når du bruker denne operatøren.
Du kan også utforske noen beste JavaScript Runtime Environments for bedre kodeutførelse.