Tutorial JS

JS INICIO JS Introducción JS Dónde Salida JS Declaraciones JS Sintaxis JS Comentarios JS Variables JS JS Vamos Constante JS Operadores JS Aritmética JS Tarea JS Tipos de datos JS Funciones JS Objetos JS Eventos JS Cadenas JS Métodos de cadena JS Búsqueda de cadenas JS Plantillas de cadena JS Números JS Métodos numéricos JS Matrices JS Métodos de matriz JS Clasificación de matriz JS Iteración de matriz JS Constante de matriz JS Fechas JS Formatos de fecha JS Métodos de obtención de fecha JS Métodos de configuración de fechas JS Matemáticas JS JS al azar Booleanos JS Comparaciones JS Condiciones JS Interruptor JS Bucle JS para Bucle JS para entrada Bucle JS para de Bucle JS mientras descanso JS Iterables JS Conjuntos JS Mapas JS JS Tipo de Conversión de tipo JS JS bit a bit JS expresión regular Errores JS Alcance JS JS Elevación Modo estricto JS JS esta palabra clave Función de flecha JS Clases JS JSJSON Depuración JS Guía de estilo JS Prácticas recomendadas de JS Errores JS Rendimiento JS Palabras reservadas de JS

Versiones JS

Versiones JS JS 2009 (ES5) JS 2015 (ES6) JS 2016 JS 2017 JS 2018 JS IE / Borde Historia de JS

Objetos JS

Definiciones de objetos Propiedades del objeto Métodos de objeto Visualización de objetos Accesores de objetos Constructores de objetos Prototipos de objetos Objeto iterables Conjuntos de objetos Mapas de objetos Referencia de objeto

Funciones JS

Definiciones de funciones Parámetros de función Invocación de función Llamada de función Función Aplicar Cierres de funciones

Clases JS

Introducción a la clase Herencia de clase Clase estática

JS asíncrono

Devoluciones de llamada JS JS asíncrono Promesas JS JS asíncrono/espera

JS HTML DOM

Introducción al DOM Métodos DOM Documento DOM Elementos DOM DOM HTML Formularios DOM DOM CSS Animaciones DOM Eventos DOM Oyente de eventos DOM Navegación DOM Nodos DOM Colecciones DOM Listas de nodos DOM

Lista de materiales del navegador JS

Ventana JS Pantalla JS Ubicación de JS Historia de JS Navegador JS Alerta emergente JS Tiempo JS Galletas JS

API web de JS

Introducción a la API web API de formularios web API de historial web API de almacenamiento web API de trabajo web API de búsqueda web API de geolocalización web

JS AJAX

Introducción a AJAX AJAX XMLHttp Solicitud AJAX Respuesta AJAX Archivo XML AJAX AJAXPHP Ajax ASP Base de datos AJAX Aplicaciones AJAX Ejemplos de AJAX

JSJSON

Introducción JSON Sintaxis JSON JSON frente a XML Tipos de datos JSON Análisis JSON Cadena JSON Objetos JSON Matrices JSON Servidor JSON JSONPHP JSONHTML JSON JSONP

JS frente a jQuery

Selectores jQuery HTML de jQuery CSS de jQuery DOM de jQuery

Gráficos JS

Gráficos JS Lienzo JS JS Trazado Gráfico JS.js Gráfico de Google JS JS D3.js

Ejemplos de JS

Ejemplos de JS JS HTML DOM Entrada HTML JS Objetos JS HTML Eventos JS HTML Navegador JS Editor JS Ejercicios JS Prueba JS Certificado JS

Referencias JS

Objetos JavaScript Objetos HTML DOM


Prácticas recomendadas de JavaScript


Evitar variables globales, evitar new, evitar ==, evitareval()


Evite las variables globales

Minimice el uso de variables globales.

Esto incluye todos los tipos de datos, objetos y funciones.

Las variables y funciones globales pueden ser sobrescritas por otros scripts.

Use variables locales en su lugar y aprenda a usar los cierres .


Declarar siempre variables locales

Todas las variables utilizadas en una función deben declararse como variables locales .

Las variables locales deben declararse con la var palabra clave o la letpalabra clave, o la constpalabra clave, de lo contrario se convertirán en variables globales.

El modo estricto no permite variables no declaradas.


Declaraciones en la parte superior

Es una buena práctica de codificación colocar todas las declaraciones en la parte superior de cada secuencia de comandos o función.

Esta voluntad:

  • Dar código más limpio
  • Proporcionar un solo lugar para buscar variables locales
  • Hacer que sea más fácil evitar variables globales no deseadas (implícitas)
  • Reduzca la posibilidad de nuevas declaraciones no deseadas
// Declare at the beginning
let firstName, lastName, price, discount, fullPrice;

// Use later
firstName = "John";
lastName = "Doe";

price = 19.90;
discount = 0.10;

fullPrice = price - discount;

Esto también se aplica a las variables de bucle:

for (let i = 0; i < 5; i++) {


Inicializar variables

Es una buena práctica de codificación inicializar las variables cuando las declara.

Esta voluntad:

  • Dar código más limpio
  • Proporcionar un solo lugar para inicializar variables
  • Evitar valores indefinidos
// Declare and initiate at the beginning
let firstName = "",
let lastName = "",
let price = 0,
let discount = 0,
let fullPrice = 0,
const myArray = [],
const myObject = {};

La inicialización de variables proporciona una idea del uso previsto (y el tipo de datos previsto).


Declarar objetos con const

Declarar objetos con const evitará cualquier cambio accidental de tipo:

Ejemplo

let car = {type:"Fiat", model:"500", color:"white"};
car = "Fiat";      // Changes object to string

const car = {type:"Fiat", model:"500", color:"white"};
car = "Fiat";      // Not possible

Declarar matrices con const

Declarar arreglos con const evitará cualquier cambio accidental de tipo:

Ejemplo

let cars = ["Saab", "Volvo", "BMW"];
cars = 3;    // Changes array to number

const cars = ["Saab", "Volvo", "BMW"];
cars = 3;    // Not possible

No use un nuevo objeto ()

  • Usar ""en lugar denew String()
  • Usar 0en lugar denew Number()
  • Usar falseen lugar denew Boolean()
  • Usar {}en lugar denew Object()
  • Usar []en lugar denew Array()
  • Usar /()/en lugar denew RegExp()
  • Usar function (){}en lugar denew Function()

Ejemplo

let x1 = "";             // new primitive string
let x2 = 0;              // new primitive number
let x3 = false;          // new primitive boolean
const x4 = {};           // new object
const x5 = [];           // new array object
const x6 = /()/;         // new regexp object
const x7 = function(){}; // new function object

Cuidado con las conversiones automáticas de tipo

JavaScript está mal escrito.

Una variable puede contener todos los tipos de datos.

Una variable puede cambiar su tipo de datos:

Ejemplo

let x = "Hello";     // typeof x is a string
x = 5;               // changes typeof x to a number

Tenga en cuenta que los números se pueden convertir accidentalmente en cadenas o NaN(No es un número).

Al realizar operaciones matemáticas, JavaScript puede convertir números en cadenas:

Ejemplo

let x = 5 + 7;       // x.valueOf() is 12,  typeof x is a number
let x = 5 + "7";     // x.valueOf() is 57,  typeof x is a string
let x = "5" + 7;     // x.valueOf() is 57,  typeof x is a string
let x = 5 - 7;       // x.valueOf() is -2,  typeof x is a number
let x = 5 - "7";     // x.valueOf() is -2,  typeof x is a number
let x = "5" - 7;     // x.valueOf() is -2,  typeof x is a number
let x = 5 - "x";     // x.valueOf() is NaN, typeof x is a number

Restar una cadena de una cadena no genera un error pero devuelve NaN(no un número):

Ejemplo

"Hello" - "Dolly"    // returns NaN

Usar === Comparación

El ==operador de comparación siempre convierte (a tipos coincidentes) antes de la comparación.

El ===operador fuerza la comparación de valores y tipo:

Ejemplo

0 == "";        // true
1 == "1";       // true
1 == true;      // true

0 === "";       // false
1 === "1";      // false
1 === true;     // false

Usar valores predeterminados de parámetros

Si se llama a una función con un argumento faltante, el valor del argumento faltante se establece en undefined.

Los valores indefinidos pueden romper su código. Es un buen hábito asignar valores predeterminados a los argumentos.

Ejemplo

function myFunction(x, y) {
  if (y === undefined) {
    y = 0;
  }
}

ECMAScript 2015 permite parámetros predeterminados en la definición de la función:

function (a=1, b=1) { /*function code*/ }

Lea más sobre parámetros y argumentos de funciones en Parámetros de funciones


Finalice sus cambios con valores predeterminados

Siempre termine sus switchdeclaraciones con un default. Incluso si crees que no hay necesidad de ello.

Ejemplo

switch (new Date().getDay()) {
  case 0:
    day = "Sunday";
    break;
  case 1:
    day = "Monday";
    break;
  case 2:
    day = "Tuesday";
    break;
  case 3:
    day = "Wednesday";
    break;
  case 4:
    day = "Thursday";
    break;
  case 5:
    day = "Friday";
    break;
  case 6:
    day = "Saturday";
    break;
  default:
    day = "Unknown";
}

Evite números, cadenas y booleanos como objetos

Siempre trate los números, las cadenas o los valores booleanos como valores primitivos. No como objetos.

Declarar estos tipos como objetos ralentiza la velocidad de ejecución y produce efectos secundarios desagradables:

Ejemplo

let x = "John";             
let y = new String("John");
(x === y) // is false because x is a string and y is an object.

O incluso peor:

Ejemplo

let x = new String("John");             
let y = new String("John");
(x == y) // is false because you cannot compare objects.

Evite usar eval()

La eval()función se utiliza para ejecutar texto como código. En casi todos los casos, no debería ser necesario usarlo.

Debido a que permite ejecutar código arbitrario, también representa un problema de seguridad.