JavaScript Errores comunes

En este capítulo analizaremos los errores comunes de JavaScript.

Errores al usar el operador de asignación

En los programas de JavaScript, si usas el operador de asignación (=) en una declaración de condición if, se producirá un resultado incorrecto. La forma correcta es usar el operador de comparación de dos signos igual (==).

ifLa declaración condicional devuelvefalse(es lo que esperamos) porque x no es igual a 10:

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

Pruébalo »

ifLa declaración condicional devuelvetrue(no es lo que esperamos) porque la declaración condicional ejecuta la asignación de x = 10, y 10 es true:

var x = 0;
if (x = 10)

Pruébalo »

ifLa declaración condicional devuelvefalse(no es lo que esperamos) porque la declaración condicional ejecuta la asignación de x = 0, y 0 es false:

var x = 0;
if (x = 0)

Pruébalo »
Note Las declaraciones de asignación devuelven el valor de la variable.

Errores comunes con operadores de comparación

En las comparaciones regulares, el tipo de datos se ignora; la siguiente declaración if condicional devuelve true:

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

Pruébalo »

En comparaciones estrictas, === es el operador de identidad; comprueba simultáneamente el valor y el tipo de la expresión. La siguiente declaración if condicional devuelve false:

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

Pruébalo »

Este tipo de error aparece a menudo en las declaraciones switch, ya que switch usa el operador de identidad (===) para comparar:

El siguiente ejemplo ejecutará una ventana emergente alert:

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

Pruébalo »

El siguiente ejemplo no ejecutará una ventana emergente alert porque los tipos no coinciden:

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

Pruébalo »

Precauciones con la suma y la concatenación

La sumaes de dosnúmerosque se suman.

La concatenaciónes de doscadenasque se unen.

Tanto la suma como la concatenación en JavaScript usan el operador +.

A continuación podemos ver mediante ejemplos la diferencia entre sumar dos números y concatenar un número con una cadena:

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

Pruébalo »

Al sumar con variables, el resultado también es diferente:

var x = 10;
var y = 5;
var z = x + y;           // El resultado de z es 15

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

Pruébalo »

Precauciones con los datos de coma flotante

Todos los datos en JavaScript se almacenan en 64 bitsdatos de coma flotante (float)para almacenar.

Todos los lenguajes de programación, incluido JavaScript, tienen dificultades para determinar la precisión de los datos de coma flotante:

var x = 0.1;
var y = 0.2;
var z = x + y            // El resultado de z es 0.30000000000000004
if (z == 0.3)            // devuelve false

Pruébalo »

Para resolver el problema anterior, se puede usar la multiplicación y división de números enteros:

Ejemplos

var z = (x * 10 + y * 10) / 10;       // El resultado de z es 0.3

Pruébalo »

Puedes consultar más contenido en:Problemas de precisión en JavaScript y sus soluciones

Dividir cadenas de texto en líneas en JavaScript

JavaScript nos permite usar declaraciones de salto de línea dentro de las cadenas:

Ejemplo 1

var x =
"Hello World!";

Pruébalo »

Sin embargo, usar directamente un salto de línea (Enter) dentro de una cadena provocará un error:

Ejemplo 2

var x = "Hello
World!";

Pruébalo »

Podemos abrir las herramientas de desarrollador o presionar F12 para ver el mensaje de error:

Para dividir una cadena en líneas es necesario usar una barra invertida (\), como se muestra a continuación:

Ejemplo 3

var x = "Hello \
World!";

Pruébalo »

Uso incorrecto del punto y coma

En el siguiente ejemplo, la declaración if pierde su cuerpo; el cuerpo original de la declaración if se ejecuta como un bloque de código independiente, lo que produce un resultado de salida incorrecto.

Debido al uso incorrecto del punto y coma, el bloque de código dentro de la declaración if se ejecutará siempre:

if (x == 19);
{
    // code block 
}

Pruébalo »

Precauciones con la declaración return

JavaScript termina automáticamente al final de una línea de forma predeterminada.

Los dos ejemplos siguientes devuelven el mismo resultado (uno con punto y coma y el otro sin él):

Ejemplo 1

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

Pruébalo »

Ejemplo 2

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

Pruébalo »

JavaScript también permite usar varias líneas para representar una declaración, es decir, una declaración se puede dividir en varias líneas.

Los siguientes ejemplos devuelven el mismo resultado:

Ejemplo 3

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

Pruébalo »

Sin embargo, el siguiente ejemplo devolveráundefined：

Ejemplo 4

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

Pruébalo »

¿Por qué ocurre este resultado? Porque en JavaScript, el código del ejemplo 4 es equivalente al siguiente código:

function myFunction(a) {
    var
    power = 10;  
    return;       // 分号结束，返回 undefined
    a * power;
}

Análisis

Si la declaración está incompleta, como se muestra a continuación:

var

JavaScript intentará leer la declaración de la segunda línea:

power = 10;

Pero como la declaración sí está completa:

return

JavaScript cerrará la declaración automáticamente:

return;

En JavaScript, el punto y coma es opcional.

Debido a que return es una declaración completa, JavaScript cerrará la declaración return.

Note Nota:No dividas la declaración return en líneas.

Usar nombres como índices en arrays

Muchos lenguajes de programación permiten usar nombres como índices de un array.

Los arrays que usan nombres como índices se denominan arrays asociativos (o hash).

JavaScript no admite usar nombres para indexar arrays, solo permite índices numéricos.

Ejemplo

var person = [];
person[0] = "John";
person[1] = "Doe";
person[2] = 46;
var x = person.length;         // person.length devuelve 3
var y = person[0];             // person

Pruébalo »

En JavaScript,los objetosusannombres como índices.。

Si usas nombres como índices, al acceder al array, JavaScript redefine el array como un objeto estándar.

Después de realizar esta operación, los métodos y propiedades del array ya no se pueden usar; de lo contrario, se producirá un error:

Ejemplo

var person = [];
person["firstName"] = "John";
person["lastName"] = "Doe";
person["age"] = 46;
var x = person.length;         // person.length devuelve 0
var y = person[0];             // person

Pruébalo »

Al definir elementos de un array, no se debe añadir una coma al final

Añadir una coma después del último valor de un array no es un problema de sintaxis, pero puede dar resultados diferentes en distintos navegadores.

var colors = [5, 6, 7,]; //这样数组的长度可能为3 也可能为4.

La forma de definición correcta:

points = [40, 100, 1, 5, 25, 10];

Al definir un objeto, no se debe añadir una coma al final

La forma de definición incorrecta:

websites = {site:"Ejemplo", url:"www.example.com", like:460,}

La forma de definición correcta:

websites = {site:"Ejemplo", url:"www.example.com", like:460}

Undefined no es Null

En JavaScript,nullse usa para objetos,undefinedse usa para variables, propiedades y métodos.

Un objeto solo puede ser null si ha sido definido; de lo contrario, es undefined.

Si queremos comprobar si un objeto existe, se lanzará un error cuando el objeto aún no esté definido.

Forma de uso incorrecta:

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

La forma correcta es que necesitamos usar typeof primero para detectar si el objeto está definido:

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

Ámbito de bloque

En cada bloque de código, JavaScript no crea un nuevo ámbito; generalmente, el ámbito de cada bloque de código es global.

En el siguiente código, la variable i devuelve 10, en lugar de undefined:

Ejemplo

for (var i = 0; i < 10; i++) {
    // some code
 }
return i;

Pruébalo »
Otras extensiones