JavaScript:n yleisimmät virheet

Tämä luku esittelee joitakin yleisiä JavaScript-virheitä.

käyttää odottamatonta asetusoperaattoria

Jos ohjelmoija if lauseessa käytetään odottamatonta asetusoperaattoria（=）eikä vertailualgoritmin operaattorina（=====），JavaScript-ohjelma voi tuottaa joitakin odottamattomia tuloksia.

tämä if lause palauttaa false（kuten odotettiin）， koska x ei ole yhtä suuri kuin 10：

var x = 0;
if (x == 10)

Kokeile itse

tämä if lause palauttaa true（eikä ehkä odotetusti）， koska 10 on true：

var x = 0;
if (x = 10)

Kokeile itse

tämä if lause palauttaa false（eikä ehkä odotetusti）， koska 0 on false：

var x = 0;
if (x = 0)

Kokeile itse

Asetus palauttaa aina asetetun arvon.

odotetaan löysää vertailua

yhteisessä vertailussa tietotyyppi ei ole tärkeä. Tämä if lause palauttaa true:

var x = 10;
var y = "10";
if (x == y)

Kokeile itse

tarkassa vertailussa tietotyyppi on todella tärkeä. Tämä if lause palauttaa false:

var x = 10;
var y = "10";
if (x === y)

Kokeile itse

Yksi yleinen virhe on unohtaa switch lauseessa käytetään tarkkaa vertailua:

tämä switch lause näyttää ilmoituksen:

var x = 10;
switch(x) {
    case 10: alert("Hello");
}

Kokeile itse

tämä switch lause ei näytä ilmoitusta:

var x = 10;
switch(x) {
    case "10": alert("Hello");
}

Kokeile itse

Harhaanjohtava lisäys ja ketjutus

lisäyslisätänumerot.

ketjutus (Concatenation)lisätämerkkijono.

JavaScriptissa molemmat laskutoimitukset käyttävät samaa + Laskin.

Tämän vuoksi, kun numerot lisätään arvoina, ja kun ne lisätään merkkijonoina, saadaan erilaisia tuloksia:

var x = 10 + 5;          // x:n arvo on 15
var x = 10 + "5";         // x:n arvo on "105"

Kokeile itse

Jos kaksi muuttujaa lisätään yhteen, tuloksen ennustaminen on vaikeaa:

var x = 10;
var y = 5;
var z = x + y;            // z:n arvo on 15
var x = 10;
var y = "5";
var z = x + y;            // z:n arvo on "105"

Kokeile itse

Harhaanjohtava liukuluku

JavaScriptissa numerot tallennetaan 64-bittisinäLiukuluvut (Floats).

Kaikilla ohjelmointikielillä, mukaan lukien JavaScript, on vaikeuksia käsitellä liukulukuja:

var x = 0.1;
var y = 0.2;
var z = x + y             // z:n tuloksena ei ole 0.3

Kokeile itse

Ongelman ratkaisemiseksi käytä jakolaskutoimitusta:

Esimerkki

var z = (x * 10 + y * 10) / 10;       // z:n tuloksena tulee 0.3

Kokeile itse

JavaScriptin merkkijonon rivinvaihto

JavaScript sallii sinun vaihtaa yhden lauserivin kahteen riviin:

Esimerkki 1

var x =
"Hello World!";

Kokeile itse

Mutta rivinvaihto merkkijonon keskellä ei ole oikein:

Esimerkki 2

var x = "Hello
World!";

Kokeile itse

Jos rivinvaihto merkkijonossa on välttämätöntä, on käytettävä kenraalinviivaa:

Esimerkki 3

var x = "Hello ",
World!";

Kokeile itse

Virheellinen pilkku

Virheellisen pilkun vuoksi tämä koodibloki suoritetaan x:n arvosta riippumatta:

if (x == 19);
{
     // koodibloki
}

Kokeile itse

Rivinvaihdon return-lauseessa

Rivinvaihdon automaattinen lauserivin päättäminen on oletusarvoinen JavaScriptin käyttäytyminen.

Tämän vuoksi seuraavat kaksi esimerkkiä palauttavat saman tuloksen:

Esimerkki 1

function myFunction(a) {
    var power = 10  
    return a * power
}

Kokeile itse

Esimerkki 2

function myFunction(a) {
    var power = 10;
    return a * power;
}

Kokeile itse

JavaScript sallii sinun vaihtaa yhden lauserivin kahteen riviin.

Tämän vuoksi esimerkki 3 palauttaa myös saman tuloksen:

Esimerkki 3

function myFunction(a) {
    var
    power = 10;  
    return a * power;
}

Kokeile itse

Mutta jos vaihdetaan return Mitä tapahtuu, jos lauserivi vaihdetaan kahteen riviin:

Esimerkki 4

function myFunction(a) {
    var
    power = 10;  
    return
    a * power;
}

Kokeile itse

Tämä funktio palauttaa undefined!

Miksi niin? Koska JavaScript pitää sinun tarkoittavan:

Esimerkki 5

function myFunction(a) {
     var
    power = 10;  
    return;
    a * power;
}

Kokeile itse

Selitys

Jos jokin lauserivi on epätäydellinen:

var

JavaScript suorittaa tämän lauserivin lukemalla seuraavan rivin:

power = 10;

Mutta koska tämä lauserivi on täysimittainen:

return

JavaScript sulkee lauserivin automaattisesti:

return;

Tämä johtuu siitä, että JavaScriptissä lauserivin päättäminen (lopettaminen) on valinnainen.

JavaScript sulkee rivin lopussa return Lauseriviä, koska se on jo täysimittainen lauserivi.

Ei koskaan return Lauserivinvaihto.

Tavoittaa taulukko nimellisellä indeksillä

Monet ohjelmointikielit tukevat nimettyjä indeksejä taulukoissa.

Nimetyillä indekseillä varustetut taulukot kutsutaan liitettyinä taulukoiksi (tai hajautustaulukoiksi).

JavaScript Ei tuettuNimetyillä indekseillä varustettu taulukko.

JavaScriptissäTaulukkoKäytäNumerollinen indeksi:

Esimerkki

var person = [];
person[0] = "Bill";
person[1] = "Gates";
person[2] = 46;
var x = person.length;          // person.length palauttaa 3
var y = person[0];              // person[0] palauttaa "Bill"

Kokeile itse

JavaScriptissäObjektiKäytäNimetyt indeksi.

Jos käytät nimettyjä indeksejä, JavaScript muuttaa taulukon standardiobjektiksi, kun taulukkoa käytetään.

Automaattisen uudelleenmäärittelyn jälkeen, taulukon metodit tai ominaisuudet tuottavat määrittelemättömiä tai epäoikeita tuloksia:

Esimerkki

var person = [];
person["firstName"] = "Bill";
person["lastName"] = "Gates";
person["age"] = 46;
var x = person.length;         // person.length palauttaa 0
var y = person[0];              // person[0] palauttaa "undefined"

Kokeile itse

Käytä pilkkuja määrittelyn päättämiseen

Objektin ja taulukon määrittelyssä perässä oleva pilkku on sallittu ECMAScript 5:ssä.

Objektin esimerkki:

person = {firstName:"Bill", lastName:"Gates", age:62,}

Taulukon esimerkki:

points = [35, 450, 2, 7, 30, 16,];

Varoitus！！

Internet Explorer 8 kaatuu.

JSON ei salli perässä olevia pilkkuja.

JSON:

person = {firstName:"Bill", lastName:"Gates", age:62}

JSON:

points = [35, 450, 2, 7, 30, 16];

Määrittelemätön ei ole tyhjä

JavaScript-objektit, muuttujat, ominaisuudet ja metodit voivat olla määrittelemättömiä.

Lisäksi tyhjän JavaScript-objektin arvo voi olla null.

Tämä saattaa tehdä testiobjektin tyhjyyden tarkistamisen hieman vaikeaksi.

Voit tarkistaa, onko tyyppi undefinedTarkista, onko testiobjekti olemassa:

Esimerkki

if (typeof myObj === "undefined")

Kokeile itse

Mutta et voi testata, onko objekti null, koska jos objekti ei ole määritelty, virhe heitetään:

Väärin:

if (myObj === null)

Ongelman ratkaisemiseksi on testattava, onko objekti nulleikä määritelty.

Tämä kuitenkin aiheuttaa virheen:

Väärin:

if (myObj !== null && typeof myObj !== "undefined")

Siksi on testattava ensin, että objekti ei ole määritelty:

Oikein:

if (typeof myObj !== "undefined" && myObj !== null)

Kokeile itse

odota blokkitasoa

JavaScript eiluo uuden alueen jokaiselle koodiblokkille.

Monet ohjelmointikielit ovat näin, mutta JavaScript Ei ole niin.

uskoo, että tämä koodi palauttaa undefinedon uusi JavaScript-kehittäjän virheellinen uskomus:

Esimerkki

for (var i = 0; i < 10; i++) {
  //-koodi
}
return i;

Kokeile itse