Thuộc tính đối tượng JavaScript
Thuộc tính là phần quan trọng nhất của bất kỳ đối tượng JavaScript nào.
Thuộc tính JavaScript
Thuộc tính là các giá trị được liên kết với một đối tượng JavaScript.
Đối tượng JavaScript là một tập hợp các thuộc tính không có thứ tự.
Các thuộc tính thường có thể được thay đổi, thêm và xóa, nhưng một số thuộc tính chỉ được đọc.
Truy cập thuộc tính JavaScript
Cú pháp để truy cập thuộc tính của một đối tượng là:
objectName.property // person.age
hoặc là
objectName["property"] // person["age"]
hoặc là
objectName[expression] // x = "age"; person[x]
Biểu thức phải đánh giá thành một tên thuộc tính.
ví dụ 1
person.firstname + " is " + person.age + " years old.";
Ví dụ 2
person["firstname"] + " is " + person["age"] + " years old.";
JavaScript cho ... trong Vòng lặp
Câu lệnh JavaScript for...inlặp qua các thuộc tính của một đối tượng.
Cú pháp
for (let variable in object) {
// code to be executed
}
Khối mã bên trong for...invòng lặp sẽ được thực thi một lần cho mỗi thuộc tính.
Vòng qua các thuộc tính của một đối tượng:
Thí dụ
const person = {
fname:" John",
lname:" Doe",
age: 25
};
for (let x in person) {
txt += person[x];
}
Thêm thuộc tính mới
Bạn có thể thêm các thuộc tính mới vào một đối tượng hiện có bằng cách chỉ cần cho nó một giá trị.
Giả sử rằng đối tượng person đã tồn tại - sau đó bạn có thể cung cấp cho nó các thuộc tính mới:
Thí dụ
person.nationality = "English";
Xóa thuộc tính
Từ deletekhóa xóa một thuộc tính khỏi một đối tượng:
Thí dụ
const person = {
firstName: "John",
lastName: "Doe",
age: 50,
eyeColor: "blue"
};
delete person.age;
hoặc xóa người ["tuổi"];
Thí dụ
const person = {
firstName: "John",
lastName: "Doe",
age: 50,
eyeColor: "blue"
};
delete person["age"];
Từ deletekhóa xóa cả giá trị của thuộc tính và chính thuộc tính đó.
Sau khi xóa, thuộc tính không thể được sử dụng trước khi được thêm lại.
Toán tử
deleteđược thiết kế để sử dụng trên các thuộc tính của đối tượng. Nó không ảnh hưởng đến các biến hoặc hàm.
Toán tử deletekhông nên được sử dụng trên các thuộc tính đối tượng JavaScript được xác định trước. Nó có thể làm hỏng ứng dụng của bạn.
Đối tượng lồng nhau
Giá trị trong một đối tượng có thể là một đối tượng khác:
Thí dụ
myObj = {
name:"John",
age:30,
cars: {
car1:"Ford",
car2:"BMW",
car3:"Fiat"
}
}
Bạn có thể truy cập các đối tượng lồng nhau bằng cách sử dụng ký hiệu dấu chấm hoặc ký hiệu dấu ngoặc vuông:
Thí dụ
myObj.cars.car2;
hoặc là:
Thí dụ
myObj.cars["car2"];
hoặc là:
Thí dụ
myObj["cars"]["car2"];
hoặc là:
Thí dụ
let p1 = "cars";
let p2 = "car2";
myObj[p1][p2];
Mảng và đối tượng lồng nhau
Giá trị trong đối tượng có thể là mảng và giá trị trong mảng có thể là đối tượng:
Thí dụ
const myObj =
{
name: "John",
age: 30,
cars: [
{name:"Ford",
models:["Fiesta", "Focus", "Mustang"]},
{name:"BMW", models:["320", "X3", "X5"]},
{name:"Fiat", models:["500", "Panda"]}
]
}
Để truy cập các mảng bên trong mảng, hãy sử dụng vòng lặp bổ sung cho mỗi mảng:
Thí dụ
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];
}
}
Thuộc tính tài sản
Tất cả các tài sản có một tên. Ngoài ra chúng cũng có một giá trị.
Giá trị là một trong những thuộc tính của thuộc tính.
Các thuộc tính khác là: có thể liệt kê, có thể định cấu hình và có thể ghi.
Các thuộc tính này xác định cách thuộc tính có thể được truy cập (nó có thể đọc được không ?, nó có thể ghi được không?)
Trong JavaScript, tất cả các thuộc tính đều có thể đọc được, nhưng chỉ có thể thay đổi thuộc tính giá trị (và chỉ khi thuộc tính có thể ghi được).
(ECMAScript 5 có các phương thức để lấy và đặt tất cả các thuộc tính thuộc tính)
Thuộc tính nguyên mẫu
Các đối tượng JavaScript kế thừa các thuộc tính của nguyên mẫu của chúng.
Từ deletekhóa không xóa các thuộc tính kế thừa, nhưng nếu bạn xóa một thuộc tính nguyên mẫu, nó sẽ ảnh hưởng đến tất cả các đối tượng được kế thừa từ nguyên mẫu.