1. What is an attribute?
Properties are values associated with a JavaScript object. A JavaScript object is an unordered collection of properties. Properties can usually be changed, added, and removed, but some are read-only.
2. Access JavaScript properties
The syntax for accessing object properties is (3 representations):
The first
objectName.property // person.age
the second
objectName[“property”] // person[“age”]
third
objectName[expression] // x = “age”; person[x]
expression must be a proper property name
<head>
<meta charset="UTF-8">
<title>项目</title>
</head>
<body style="background-color: aqua;">
<p>有两种方法可以访问对象属性:</p>
<p>你可以使用 .property 或者 ["property"].</p>
<p id="demo"></p>
<script>
var person = {
firstname: "John",
lastname: "Doe",
age: 50,
eyecolor: "blue"
};
document.getElementById("demo").innerHTML =
person.firstname + " is " + person.age + " years old.";
</body>
//Copy the above code, replace different statements, and realize the function.
person["firstname"] + " is " + person["age"] + "years old.";
1. Prototype property
JavaScript objects inherit their prototype property.
The delete keyword does not delete inherited properties, but if a prototype property is deleted, it affects all objects that inherit from the prototype.
- add new attribute
A new property can be added to an existing object by giving it a value.
Assuming the person object already exists - you can give it new properties:
person.nationality = “English”;
Full code:
<head>
<meta charset="UTF-8">
<title>项目</title>
</head>
<body style="background-color: aqua;">
<p>你可以为现有对象添加新的属性.</p>
<p id="demo"></p>
<script>
var person = {
firstname: "John",
lastname: "Doe",
age: 50,
eyecolor: "blue"
};
person.nationality = "English";
document.getElementById("demo").innerHTML =
person.firstname + " is " + person.nationality + ".";
</body>
You cannot use reserved words for property (or method) names. JavaScript naming rules.
- delete attribute
The delete keyword removes a property from an object:
var person = {firstName:“John”, lastName:“Doe”, age:50, eyeColor:“blue”};
delete person.age; // or delete person["age"];
The delete keyword deletes both the property's value and the property itself.
After deletion, the attribute cannot be re-added using the previous method.
The delete operator is designed to work with object properties. it has no effect on variables or functions
The delete operator must not use properties of predefined JavaScript objects. It can crash your application.
3. JavaScript for...in loop
The JavaScript for...in statement can iterate over the properties of an object
grammar
for (variable in object) {
code to be executed
}
Each property inside the for...in loop will be executed once.
Loop object properties:
<meta charset="UTF-8">
<title>项目</title>
<p id="demo"></p>
<script>
var txt = "";
var person = {
fname: "John",
lname: "Doe",
age: 25
};
var x;
for (x in person) {
txt += person[x] + " ";
}
document.getElementById("demo").innerHTML = txt;
This article mainly introduces JavaScript properties, how to access a property, how to create a prototype property, how to add a new property, how to delete a property, and the application of traversing the properties of the object in the for...in statement. Detailed explanation. By using rich examples to help everyone understand better.