Errores comunes de JavaScript

Este capítulo señala algunos errores comunes en JavaScript.

Usar accidentalmente el operador de asignación

Si el programador usa accidentalmente if Se utiliza accidentalmente el operador de asignación en=）en lugar del operador de comparación (===），El programa JavaScript puede producir algunos resultados inesperados.

Esta if La sentencia devuelve false（Como se esperaba）， porque x no es igual a 10：

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

Prueba por su cuenta

Esta if La sentencia devuelve true（Tal vez no como se esperaba）， porque 10 es true：

var x = 0;
if (x = 10)

Prueba por su cuenta

Esta if La sentencia devuelve false（Tal vez no como se esperaba）， porque 0 es false：

var x = 0;
if (x = 0)

Prueba por su cuenta

Asignación siempre devuelve el valor asignado.

Esperando una comparación suelta

En la comparación convencional, el tipo de datos no es importante. Esta if La sentencia devuelve true：

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

Prueba por su cuenta

En la comparación estricta, el tipo de datos es realmente importante. Esta if La sentencia devuelve false：

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

Prueba por su cuenta

Un error común es olvidar en switch La sentencia utiliza comparación estricta:

Esta switch La sentencia mostrará cuadro de diálogo:

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

Prueba por su cuenta

Esta switch La sentencia no mostrará cuadro de diálogo:

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

Prueba por su cuenta

Suma y concatenación engañosas

SumaparaNúmeros。

Cadenas concatenadas (Concatenation)paraCadenas。

En JavaScript, ambos operadores utilizan el mismo + Operadores.

Por lo tanto, sumar números como valores numéricos y como cadenas de caracteres producirá resultados diferentes:

var x = 10 + 5;          // El resultado en x es 15
var x = 10 + "5";         // El resultado en x es "105"

Prueba por su cuenta

Si se suman dos variables, es difícil predecir el resultado:

var x = 10;
var y = 5;
var z = x + y;            // El resultado en z es 15
var x = 10;
var y = "5";
var z = x + y;            // El resultado en z es "105"

Prueba por su cuenta

El punto flotante engañoso

Los números en JavaScript se almacenan como 64 bitsNúmeros de coma flotante (Floats)。

Todos los lenguajes de programación, incluyendo JavaScript, tienen dificultades para manejar valores de coma flotante:

var x = 0.1;
var y = 0.2;
var z = x + y             // El resultado en z no será 0.3

Prueba por su cuenta

Para resolver el problema anterior, utilice operaciones de multiplicación y división:

Ejemplo

var z = (x * 10 + y * 10) / 10;       // El resultado en z será 0.3

Prueba por su cuenta

Realizar una nueva línea en una cadena de JavaScript

JavaScript le permite dividir una expresión en dos líneas:

Ejemplo 1

var x =
"Hello World!";

Prueba por su cuenta

Pero, realizar una nueva línea en el medio de una cadena no es correcto:

Ejemplo 2

var x = "Hello
¡Mundo!";

Prueba por su cuenta

Si es necesario realizar una nueva línea dentro de una cadena, debe usar la barra invertida:

Ejemplo 3

var x = "Hello ",
¡Mundo!";

Prueba por su cuenta

Punto y coma mal colocado

Debido a un punto y coma incorrecto, este bloque de código se ejecutará independientemente del valor de x:

if (x == 19);
{
     // bloque de código
}

Prueba por su cuenta

Realizar una nueva línea en un enunciado return

Cerrar expresiones automáticamente al final de una línea es el comportamiento predeterminado de JavaScript.

Por lo tanto, los siguientes dos ejemplos devolverán el mismo resultado:

Ejemplo 1

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

Prueba por su cuenta

Ejemplo 2

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

Prueba por su cuenta

JavaScript también permite que un enunciado se divida en dos líneas.

Por lo tanto, el ejemplo 3 también devolverá el mismo resultado:

Ejemplo 3

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

Prueba por su cuenta

Pero, si se cambia return ¿Qué sucederá si se realiza una nueva línea en dos renglones?

Ejemplo 4

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

Prueba por su cuenta

Esta función devolverá undefined¡!

¿Por qué? Porque JavaScript considera que tu intención es:

Ejemplo 5

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

Prueba por su cuenta

Explicación

Si un enunciado no está completo:

var

JavaScript completará esta expresión leyendo la siguiente línea:

power = 10;

Pero debido a que esta expresión es completa:

return

JavaScript cerrará automáticamente esta expresión:

return;

Esto sucede porque, en JavaScript, cerrar (finalizar) un enunciado con un punto y coma es opcional.

JavaScript cerrará return El enunciado, ya que es un enunciado completo en sí mismo.

Por lo tanto, nunca return El enunciado se realiza en una nueva línea.

Acceder al array mediante índices de nombre

Muchos lenguajes de programación admiten arrays con índices nombrados.

Los arrays con índices nombrados se conocen como arrays asociativos (o hash).

JavaScript No se admiteArray con índices nombrados.

En JavaScript，ArrayUsarÍndices numéricos：

Ejemplo

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

Prueba por su cuenta

En JavaScript，ObjetoUsarÍndices nombrados。

Si utiliza índices nombrados, JavaScript redefinirá el array como un objeto estándar al acceder al array.

Después de la redefinición automática, los métodos o propiedades del array producirán resultados undefined o incorrectos：

Ejemplo

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

Prueba por su cuenta

Use comas para finalizar la definición

Los comas al final de las definiciones de objetos y arrays son válidos en ECMAScript 5.

Ejemplo de objeto：

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

Ejemplo de array：

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

¡Advertencia！！

Internet Explorer 8 se volverá inestable.

JSON no permite comas al final.

JSON:

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

JSON:

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

Undefined no es Null

Los objetos JavaScript, variables, propiedades y métodos pueden ser undefined.

Además，el valor de un objeto JavaScript vacío puede ser： null。

Esto puede hacer que sea un poco difícil probar si el objeto está vacío.

Puede probar si el tipo es： undefined，para probar si el objeto existe：

Ejemplo

if (typeof myObj === "undefined")

Prueba por su cuenta

pero no puede probar si el objeto es nullporque si el objeto no está definido, generará un error:

Incorrecto:

if (myObj === null)

Para resolver este problema, debe probar si el objeto es nullen lugar de undefined.

pero aún así generará un error:

Incorrecto:

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

Por lo tanto, antes de probar que no es null, debe probar que no está definido:

Correcto:

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

Prueba por su cuenta

espera un ámbito de bloque

JavaScript nocrea un nuevo ámbito para cada bloque de código.

Muchos lenguajes de programación son así, pero JavaScript No es así。

piensa que este código regresará undefinedes un error común de los nuevos desarrolladores de JavaScript:

Ejemplo

for (var i = 0; i < 10; i++) {
  // Bloque de código
}
return i;

Prueba por su cuenta