Las propiedades son la parte más importante de cualquier objeto JavaScript.
Las propiedades son los valores asociados con un objeto JavaScript.
Un objeto JavaScript es una colección de propiedades desordenadas.
Las propiedades normalmente se pueden cambiar, agregar y eliminar, pero algunas son de solo lectura.
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.
person.firstname + " is " + person.age + " years old.";
Pruébelo usted mismo →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Object Properties</h2>
<p>Access a property with .property:</p>
<p id="demo"></p>
<script>
const person = {
firstname: "John",
lastname: "Doe",
age: 50,
eyecolor: "blue"
};
document.getElementById("demo").innerHTML = person.firstname + " is " + person.age + " years old.";
</script>
</body>
</html>
person["firstname"] + " is " + person["age"] + " years old.";
Pruébelo usted mismo →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Object Properties</h2>
<p>Access a property with ["property"]:</p>
<p id="demo"></p>
<script>
const person = {
firstname: "John",
lastname: "Doe",
age: 50,
eyecolor: "blue"
};
document.getElementById("demo").innerHTML = person["firstname"] + " is " + person["age"] + " years old.";
</script>
</body>
</html>
La instrucción for...in
de JavaScript recorre las propiedades de un objeto.
for (let variable in object) {
// code to be executed
}
El bloque de código dentro del bucle for...in
se ejecutará una vez para cada propiedad.
Recorriendo las propiedades de un objeto:
const person = {
fname:" John",
lname:" Doe",
age: 25
};
for (let x in person) {
txt += person[x];
}
Pruébelo usted mismo →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Object Properties</h2>
<p>Looping object property values:</p>
<p id="demo"></p>
<script>
const person = {
fname:"John",
lname:"Doe",
age:25
};
let txt = "";
for (let x in person) {
txt += person[x] + " ";
}
document.getElementById("demo").innerHTML = txt;
</script>
</body>
</html>
Puede agregar nuevas propiedades a un objeto existente simplemente dándole un valor.
Supongamos que el objeto persona ya existe. Luego puedes darle nuevas propiedades:
person.nationality = "English";
Pruébelo usted mismo →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Object Properties</h2>
<p>Add a new property to an existing object:</p>
<p id="demo"></p>
<script>
const person = {
firstname: "John",
lastname: "Doe",
age: 50,
eyecolor: "blue"
};
person.nationality = "English";
document.getElementById("demo").innerHTML =
person.firstname + " is " + person.nationality + ".";
</script>
</body>
</html>
La palabra clave delete
elimina una propiedad de un objeto:
const person = {
firstName: "John",
lastName: "Doe",
age: 50,
eyeColor: "blue"
};
delete person.age;
Pruébelo usted mismo →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Object Properties</h2>
<p>Deleting object properties.</p>
<p id="demo"></p>
<script>
const person = {
firstname: "John",
lastname: "Doe",
age: 50,
eyecolor: "blue"
};
delete person.age;
document.getElementById("demo").innerHTML =
person.firstname + " is " + person.age + " years old.";
</script>
</body>
</html>
o eliminar persona["edad"];
const person = {
firstName: "John",
lastName: "Doe",
age: 50,
eyeColor: "blue"
};
delete person["age"];
Pruébelo usted mismo →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Object Properties</h2>
<p>Deleting object properties.</p>
<p id="demo"></p>
<script>
const person = {
firstname: "John",
lastname: "Doe",
age: 50,
eyecolor: "blue"
};
delete person["age"];
document.getElementById("demo").innerHTML =
person.firstname + " is " + person.age + " years old.";
</script>
</body>
</html>
La palabra clave delete
elimina tanto el valor de la propiedad como la propiedad misma.
Después de la eliminación, la propiedad no se puede utilizar antes de que se vuelva a agregar.
El El operador delete
está diseñado para usarse en propiedades de objetos. No tiene ningún efecto sobre variables o funciones.
El operador delete
no debe usarse en objetos JavaScript predefinidos propiedades. Puede bloquear su aplicación.
Los valores de un objeto pueden ser otro objeto:
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:
myObj.cars.car2;
Pruébelo usted mismo →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Objects</h2>
<p>Access nested objects:</p>
<p id="demo"></p>
<script>
const myObj = {
name: "John",
age: 30,
cars: {
car1: "Ford",
car2: "BMW",
car3: "Fiat"
}
}
document.getElementById("demo").innerHTML = myObj.cars.car2;
</script>
</body>
</html>
o :
myObj.cars["car2"];
Pruébelo usted mismo →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Objects</h2>
<p>Access nested objects:</p>
<p id="demo"></p>
<script>
const myObj = {
name: "John",
age: 30,
cars: {
car1: "Ford",
car2: "BMW",
car3: "Fiat"
}
}
document.getElementById("demo").innerHTML = myObj.cars["car2"];
</script>
</body>
</html>
o :
myObj["cars"]["car2"];
Pruébelo usted mismo →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Objects</h2>
<p>Access nested objects:</p>
<p id="demo"></p>
<script>
const myObj = {
name: "John",
age: 30,
cars: {
car1: "Ford",
car2: "BMW",
car3: "Fiat"
}
}
document.getElementById("demo").innerHTML = myObj["cars"]["car2"];
</script>
</body>
</html>
o :
let p1 = "cars";
let p2 = "car2";
myObj[p1][p2];
Pruébelo usted mismo →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Objects</h2>
<p>Access nested objects:</p>
<p id="demo"></p>
<script>
const myObj = {
name: "John",
age: 30,
cars: {
car1: "Ford",
car2: "BMW",
car3: "Fiat"
}
}
let p1 = "cars";
let p2 = "car2";
document.getElementById("demo").innerHTML = myObj[p1][p2];
</script>
</body>
</html>
Los valores de los objetos pueden ser matrices y los valores de las matrices pueden ser objetos:
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 matrices dentro de matrices, utilice un bucle for-in para cada matriz:
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];
}
}
Pruébelo usted mismo →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>Nested JavaScript Objects and Arrays.</h2>
<p id="demo"></p>
<script>
let x = "";
const myObj = {
name: "John",
age: 30,
cars: [
{name:"Ford", models:["Fiesta", "Focus", "Mustang"]},
{name:"BMW", models:["320", "X3", "X5"]},
{name:"Fiat", models:["500", "Panda"]}
]
}
for (let i in myObj.cars) {
x += "<h2>" + myObj.cars[i].name + "</h2>";
for (let j in myObj.cars[i].models) {
x += myObj.cars[i].models[j] + "<br>";
}
}
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
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 (¿es legible?, ¿es ¿Se puede escribir?)
En JavaScript, se pueden leer todos los atributos, pero solo se puede leer el atributo de valor. cambiarse (y sólo si la propiedad se puede escribir).
(ECMAScript 5 tiene métodos para obtener y configurar todas las propiedades atributos)
Los objetos JavaScript heredan las propiedades de su prototipo.
La palabra clave delete
no elimina las propiedades heredadas, pero si elimina una propiedad prototipo, afectará a todos los objetos heredado del prototipo.