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 objetos 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 funciones 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


Propiedades de objeto de JavaScript


Las propiedades son la parte más importante de cualquier objeto de JavaScript.


Propiedades de JavaScript

Las propiedades son los valores asociados con un objeto de JavaScript.

Un objeto JavaScript es una colección de propiedades desordenadas.

Por lo general, las propiedades se pueden cambiar, agregar y eliminar, pero algunas son de solo lectura.


Acceso a las propiedades de JavaScript

La sintaxis para acceder a la propiedad de un objeto es:

objectName.property      // person.age

o

objectName["property"]   // person["age"]

o

objectName[expression]   // x = "age"; person[x]

La expresión debe evaluarse como un nombre de propiedad.

Ejemplo 1

person.firstname + " is " + person.age + " years old.";

Ejemplo 2

person["firstname"] + " is " + person["age"] + " years old.";


JavaScript para... en bucle

La declaración de JavaScript for...inrecorre las propiedades de un objeto.

Sintaxis

for (let variable in object) {
  // code to be executed
}

El bloque de código dentro del for...inbucle se ejecutará una vez para cada propiedad.

Recorriendo las propiedades de un objeto:

Ejemplo

const person = {
  fname:" John",
  lname:" Doe",
  age: 25
};

for (let x in person) {
  txt += person[x];
}

Adición de nuevas propiedades

Puede agregar nuevas propiedades a un objeto existente simplemente dándole un valor.

Suponga que el objeto persona ya existe; luego puede darle nuevas propiedades:

Ejemplo

person.nationality = "English";

Eliminación de propiedades

La deletepalabra clave elimina una propiedad de un objeto:

Ejemplo

const person = {
  firstName: "John",
  lastName: "Doe",
  age: 50,
  eyeColor: "blue"
};

delete person.age;

o borrar persona["edad"];

Ejemplo

const person = {
  firstName: "John",
  lastName: "Doe",
  age: 50,
  eyeColor: "blue"
};

delete person["age"];

La deletepalabra clave elimina tanto el valor de la propiedad como la propiedad misma.

Después de la eliminación, la propiedad no se puede usar antes de que se vuelva a agregar.

El deleteoperador está diseñado para usarse en propiedades de objetos. No tiene efecto sobre variables o funciones.

El deleteoperador no se debe usar en propiedades de objeto de JavaScript predefinidas. Puede bloquear su aplicación.


Objetos anidados

Los valores en un objeto pueden ser otro objeto:

Ejemplo

myObj = {
  name:"John",
  age:30,
  cars: {
    car1:"Ford",
    car2:"BMW",
    car3:"Fiat"
  }
}

Puede acceder a objetos anidados utilizando la notación de puntos o la notación de corchetes:

Ejemplo

myObj.cars.car2;

o:

Ejemplo

myObj.cars["car2"];

o:

Ejemplo

myObj["cars"]["car2"];

o:

Ejemplo

let p1 = "cars";
let p2 = "car2";
myObj[p1][p2];

Matrices y objetos anidados

Los valores de los objetos pueden ser matrices y los valores de las matrices pueden ser objetos:

Ejemplo

const myObj = {
  name: "John",
  age: 30,
  cars: [
    {name:"Ford", models:["Fiesta", "Focus", "Mustang"]},
    {name:"BMW", models:["320", "X3", "X5"]},
    {name:"Fiat", models:["500", "Panda"]}
  ]
}

Para acceder a arreglos dentro de arreglos, use un bucle for-in para cada arreglo:

Ejemplo

for (let i in myObj.cars) {
  x += "<h1>" + myObj.cars[i].name + "</h1>";
  for (let j in myObj.cars[i].models) {
    x += myObj.cars[i].models[j];
  }
}

Atributos de propiedad

Todas las propiedades tienen un nombre. Además también tienen un valor.

El valor es uno de los atributos de la propiedad.

Otros atributos son: enumerable, configurable y escribible.

Estos atributos definen cómo se puede acceder a la propiedad (¿se puede leer?, ¿se puede escribir?)

En JavaScript, todos los atributos se pueden leer, pero solo se puede cambiar el atributo de valor (y solo si se puede escribir en la propiedad).

(ECMAScript 5 tiene métodos para obtener y establecer todos los atributos de propiedad)


Propiedades del prototipo

Los objetos JavaScript heredan las propiedades de su prototipo.

La deletepalabra clave no elimina las propiedades heredadas, pero si elimina una propiedad de prototipo, afectará a todos los objetos heredados del prototipo.