JavaScript Các đối tượng lồng nhau là các đối tượng bên trong một đối tượng khác. Xử lý các đối tượng lồng nhau thường xuyên, chúng ta sẽ cần truy cập các giá trị lồng nhau trong cùng một cách an toàn
đối tượng lồng nhau
const user = {
id: 101,
email: 'abc@eyehunts.com',
personalInfo: {
name: 'John',
address: {
line1: '101',
line2: 'Stree Line',
city: 'NY',
state: 'WX'
}
}
}
Truy cập tên người dùng
const name = user.personalInfo.name;
Đối tượng lồng nhau JavaScript
Mã ví dụ đơn giản truy cập các đối tượng json lồng nhau cũng giống như truy cập các mảng lồng nhau
const user = {
id: 101,
email: 'abc@eyehunts.com',
personalInfo: {
name: 'John',
address: {
line1: '101',
line2: 'Stree Line',
city: 'NY',
state: 'WX'
}
}
}
console.log[user]
đầu ra
Mảng trong đối tượng
Bây giờ hãy xem một ví dụ về một đối tượng có một mảng là giá trị
let instructorData = { name: "Tim", favoriteHobbies: ["Sailing", "Hiking", "Coding"] };
Tạo các đối tượng lồng nhau trong JavaScript một cách linh hoạt
Trong ES6, các Đối tượng có thể được tạo bằng các thuộc tính được tính toán. Để sử dụng phím "động", bạn phải sử dụng ký hiệu ngoặc
Lặp qua các phần tử của
const user = {
id: 101,
email: 'abc@eyehunts.com',
personalInfo: {
name: 'John',
address: {
line1: '101',
line2: 'Stree Line',
city: 'NY',
state: 'WX'
}
}
}
console.log[user]
0. Sử dụng các phím để tìm phần tử tương ứng trong
const user = {
id: 101,
email: 'abc@eyehunts.com',
personalInfo: {
name: 'John',
address: {
line1: '101',
line2: 'Stree Line',
city: 'NY',
state: 'WX'
}
}
}
console.log[user]
1 và sử dụng phần tử đó làm khóa trong đối tượng mới đang được tạoconst basis = { a: '1', b: '2', c: '3', d: '4' };
const nested = { a: 'e', b: 'f', c: 'g', d: 'h', e: 'i', f: 'j', g: 'k' };
const result = Object.entries[basis].reduce[[obj, [key, value]] => {
obj[key] = [{
[nested[key]]: value,
date: Date.now[]
}];
return obj;
}, {}];
console.log[result];
đầu ra
{
"a": [
{
"e": "1",
"date": 1651208135047
}
],
"b": [
{
"f": "2",
"date": 1651208135047
}
],
"c": [
{
"g": "3",
"date": 1651208135047
}
],
"d": [
{
"h": "4",
"date": 1651208135047
}
]
}
Hãy bình luận nếu bạn có bất kỳ nghi ngờ hoặc đề xuất nào về chủ đề đối tượng JS này
Ghi chú. Tất cả mã Ví dụ về JS đều được thử nghiệm trên trình duyệt Firefox và trình duyệt Chrome
hệ điều hành. cửa sổ 10
Mã số. Phiên bản HTML5
Rohit
Bằng cấp về Khoa học Máy tính và Kỹ sư. Nhà phát triển ứng dụng và có kinh nghiệm về nhiều ngôn ngữ lập trình. Đam mê công nghệ & thích học hỏi kỹ thuật
Trong mã ứng dụng, các đối tượng thường được lồng vào nhau. Một đối tượng có thể có một đối tượng khác làm thuộc tính, đối tượng này có thể có một thuộc tính, một mảng gồm nhiều đối tượng hơn nữa
Các đối tượng lồng nhau là các đối tượng nằm bên trong một đối tượng khác. Bạn có thể tạo các đối tượng lồng nhau trong một đối tượng lồng nhau
Trong ví dụ sau,
const user = {
id: 101,
email: 'abc@eyehunts.com',
personalInfo: {
name: 'John',
address: {
line1: '101',
line2: 'Stree Line',
city: 'NY',
state: 'WX'
}
}
}
console.log[user]
2 là một đối tượng nằm bên trong đối tượng chính có tên là
const user = {
id: 101,
email: 'abc@eyehunts.com',
personalInfo: {
name: 'John',
address: {
line1: '101',
line2: 'Stree Line',
city: 'NY',
state: 'WX'
}
}
}
console.log[user]
3. Ký hiệu dấu chấm có thể truy cập thuộc tính của các đối tượng lồng nhauconst employeeInfo = {
employeeName: "John Doe",
employeeId: 27,
salary: {
2018-19: "400000INR",
2019-20: "500000INR",
2020-21: "650000INR"
},
address: {
locality: {
address1: "1600 pebble road",
address2: "Nearby XYZ Bank",
},
city: "Mumbai",
state: "Maharashtra",
country: "India"
}
}
Truy cập các thuộc tính đối tượng lồng nhau bằng cách hủy cấu trúc đối tượng
Cú pháp gán phá hủy cho phép bạn giải nén các giá trị mảng hoặc thuộc tính đối tượng thành các biến khác nhau
Hủy cấu trúc là một tính năng tiện dụng được thêm vào phiên bản ES6 của JavaScript. Nó có thể trích xuất các thuộc tính hoặc dữ liệu từ các đối tượng và mảng thành các biến riêng biệt một cách nhanh chóng và thuận tiện.
cú pháp
[{key1, key2, ...rest} = {key1: value1, key2: value2, key3: value3}];
Thuộc tính
const user = {
id: 101,
email: 'abc@eyehunts.com',
personalInfo: {
name: 'John',
address: {
line1: '101',
line2: 'Stree Line',
city: 'NY',
state: 'WX'
}
}
}
console.log[user]
4 thu thập vô số khóa thuộc tính còn lại mà mẫu phá hủy chưa được chọnBạn có thể tìm thêm thông tin về Phân hủy cấu trúc trong tài liệu về
[{key1, key2, ...rest} = {key1: value1, key2: value2, key3: value3}];
0Trước tiên hãy hiểu cách hủy cấu trúc các đối tượng trong JavaScript
const { salary } = employeeInfo;
console.log[salary];
const { address: {locality} = {}} = employeeInfo;
console.log[locality];
Trong ví dụ trên, chúng tôi trích xuất đối tượng
[{key1, key2, ...rest} = {key1: value1, key2: value2, key3: value3}];
1 từ đối tượng [{key1, key2, ...rest} = {key1: value1, key2: value2, key3: value3}];
2 và đối tượng [{key1, key2, ...rest} = {key1: value1, key2: value2, key3: value3}];
3 từ đối tượng [{key1, key2, ...rest} = {key1: value1, key2: value2, key3: value3}];
4, được lồng bên dưới đối tượng nhân viênNếu không tìm thấy đối tượng địa chỉ, nó sẽ báo lỗi. Để tránh lỗi này, chúng ta có thể khởi tạo đối tượng rỗng trong khi giải nén đối tượng địa chỉ
đầu ra
const name = user.personalInfo.name;
4Truy cập các thuộc tính đối tượng lồng nhau bằng cách sử dụng ký hiệu [{key1, key2, ...rest} = {key1: value1, key2: value2, key3: value3}];
5
[{key1, key2, ...rest} = {key1: value1, key2: value2, key3: value3}];
Các phương thức truy cập thuộc tính cung cấp quyền truy cập vào các thuộc tính của một đối tượng bằng cách sử dụng ký hiệu dấu chấm hoặc ký hiệu dấu ngoặc. Ký hiệu dấu chấm được sử dụng để trích xuất các thuộc tính đối tượng từng bước
Trước tiên, hãy xem cách truy cập các thuộc tính lồng nhau của các đối tượng trong JavaScript
cú pháp
const name = user.personalInfo.name;
6Khi thảo luận về các thuộc tính của một đối tượng, người ta thường phân biệt giữa thuộc tính và phương thức
Một phương thức là một thuộc tính có thể được gọi [ví dụ: nếu nó có tham chiếu đến một thể hiện Hàm làm giá trị của nó]
Bạn có thể tìm thêm thông tin về Trình truy cập thuộc tính trong tài liệu về
[{key1, key2, ...rest} = {key1: value1, key2: value2, key3: value3}];
6const name = user.personalInfo.name;
8Trong ví dụ này, chúng tôi giả định rằng đối tượng địa chỉ sẽ có mặt trong đối tượng nhân viên. Nếu không có đối tượng địa chỉ, nó sẽ báo lỗi.
[{key1, key2, ...rest} = {key1: value1, key2: value2, key3: value3}];
7