Thêm đối tượng lồng vào đối tượng JavaScript

Vì vậy, chúng ta có ý nghĩa gì bởi cấu trúc dữ liệu? . một cách cấu trúc dữ liệu. Trong khoa học máy tính, có vô số cấu trúc dữ liệu khác nhau (như bạn sẽ thấy. ), vì cách hiệu quả nhất để lưu trữ dữ liệu phụ thuộc vào cách bạn định sử dụng dữ liệu. Bạn chỉ cần đọc dữ liệu hay bạn cần cập nhật dữ liệu?

Tuy nhiên, hiện tại, chúng tôi sẽ giới hạn mọi thứ ở

schools.georgiaInstituteOfTechnology.address;
schools.georgiaInstituteOfTechnology.phoneNumber;
schools.georgiaInstituteOfTechnology.dateEstablished;

4 và

schools.georgiaInstituteOfTechnology.address;
schools.georgiaInstituteOfTechnology.phoneNumber;
schools.georgiaInstituteOfTechnology.dateEstablished;

5. Chúng ta đã thấy cách sử dụng cả hai cấu trúc này để tổ chức dữ liệu. Như chúng ta sẽ thấy trong phần này, thậm chí chỉ với hai cấu trúc dữ liệu này, chúng ta có thể tiến khá xa về mặt lưu trữ và truy cập dữ liệu phức tạp

Vậy thì cấu trúc dữ liệu lồng nhau là gì? . Hãy bắt đầu với một ví dụ đơn giản

Đối tượng bên trong Đối tượng

Dưới đây là một ví dụ đơn giản về việc tạo một đối tượng có khóa và giá trị cho khóa đó là một đối tượng khác

let schools = {
    georgiaInstituteOfTechnology: {
        address: "North Ave NW, Atlanta, GA 30332",
        phoneNumber: "(404) 894-2000",
        dateEstablished: "October 13, 1885"
    }
};

Bây giờ để truy cập một đối tượng trong một đối tượng, chúng ta có thể sử dụng ký hiệu dấu chấm giống như trong các đối tượng không được lồng vào nhau

Bây giờ chúng ta có biến

schools.georgiaInstituteOfTechnology.address;
schools.georgiaInstituteOfTechnology.phoneNumber;
schools.georgiaInstituteOfTechnology.dateEstablished;

0, chúng ta có thể sử dụng nó để truy cập các khóa trong đối tượng đó

Trên thực tế, chúng ta thậm chí không cần biến trung gian

schools.georgiaInstituteOfTechnology.address;
schools.georgiaInstituteOfTechnology.phoneNumber;
schools.georgiaInstituteOfTechnology.dateEstablished;

0. Chúng ta chỉ có thể sử dụng toán tử dấu chấm trên câu lệnh đầu tiên như thế này

schools.georgiaInstituteOfTechnology.address;
schools.georgiaInstituteOfTechnology.phoneNumber;
schools.georgiaInstituteOfTechnology.dateEstablished;

Tất cả các câu trên đánh giá các giá trị giống như các ví dụ

schools.georgiaInstituteOfTechnology.address;
schools.georgiaInstituteOfTechnology.phoneNumber;
schools.georgiaInstituteOfTechnology.dateEstablished;

0

Mảng trong đối tượng

Bây giờ hãy xem ví dụ về một đối tượng có giá trị là một mảng

let instructorData = {
    name: "Tim",
    favoriteHobbies: ["Sailing", "Hiking", "Coding"]
};

Trong ví dụ này, bây giờ chúng ta có nhiều khóa. Khóa

schools.georgiaInstituteOfTechnology.address;
schools.georgiaInstituteOfTechnology.phoneNumber;
schools.georgiaInstituteOfTechnology.dateEstablished;

3 có giá trị đơn giản là chuỗi,

schools.georgiaInstituteOfTechnology.address;
schools.georgiaInstituteOfTechnology.phoneNumber;
schools.georgiaInstituteOfTechnology.dateEstablished;

4, nhưng khóa

schools.georgiaInstituteOfTechnology.address;
schools.georgiaInstituteOfTechnology.phoneNumber;
schools.georgiaInstituteOfTechnology.dateEstablished;

5 có giá trị phức tạp hơn là một mảng

Giống như trong ví dụ đối tượng bên trong đối tượng, chúng ta có thể truy cập một phần tử trong mảng bằng cách sử dụng ký hiệu dấu chấm, sau đó truy cập mảng bình thường. Để lấy phần tử đầu tiên trong mảng, mã sẽ như sau

Làm cách nào để bạn thêm một sở thích khác vào mảng

schools.georgiaInstituteOfTechnology.address;
schools.georgiaInstituteOfTechnology.phoneNumber;
schools.georgiaInstituteOfTechnology.dateEstablished;

5 bên trong đối tượng?

Đối tượng phức tạp

Bây giờ hãy xem một ví dụ kết hợp các đối tượng và mảng

Vì vậy, bạn có thể đang nghĩ, liệu tôi có thực sự sẽ làm việc với những dữ liệu như thế này không? . Thông thường, khi bạn nhận được một lượng lớn dữ liệu từ bên thứ ba, bạn sẽ nhận được dữ liệu đó ở định dạng bao gồm các đối tượng và/hoặc mảng lồng nhau. Điều bắt buộc là bạn phải hiểu cách truy cập dữ liệu trong các cấu trúc dữ liệu lồng nhau này. Nếu bạn không thể đạt đến điểm mà bạn có thể dễ dàng thao tác với các cấu trúc dữ liệu lồng nhau, thì bạn sẽ gặp rất nhiều khó khăn khi tích hợp bất kỳ loại dữ liệu bên ngoài nào vào các ứng dụng mà bạn sẽ xây dựng sau này. Sao chép và dán ví dụ trước vào đoạn trích hoặc tạo ví dụ của riêng bạn để thực hành

Truy cập và Đặt giá trị trong các đối tượng lồng nhau

Sử dụng ký hiệu dấu chấm là một cách tuyệt vời để truy cập các giá trị trong các đối tượng lồng nhau. Tuy nhiên, khi đặt giá trị động trong một đối tượng lồng nhau (khi bạn không biết chính xác tên của khóa sẽ là gì), bạn phải sử dụng ký hiệu ngoặc. Hãy xem một ví dụ nhanh. Trong ví dụ bên dưới, chúng tôi muốn viết một hàm thêm khóa vào đối tượng lồng nhau

Hãy nhớ rằng khi thêm khóa vào một đối tượng, nếu bạn KHÔNG biết chính xác tên của khóa sẽ là gì (có nghĩa là khóa sẽ được tạo động), bạn PHẢI sử dụng ký hiệu ngoặc

Viết các hàm để tạo các giá trị trong cấu trúc dữ liệu lồng nhau

Khi bạn đang tương tác với cấu trúc dữ liệu lồng nhau, đôi khi sẽ rất hữu ích nếu gói gọn một số logic của bạn vào một hàm. Điều này đặc biệt đúng nếu bạn cần thao tác cấu trúc dữ liệu theo những cách tương tự nhiều lần. Dưới đây là một số ví dụ về cách viết hàm tương tác với cấu trúc dữ liệu lồng nhau theo nhiều cách khác nhau. Chúng ta sẽ bắt đầu với cùng một ví dụ về

schools.georgiaInstituteOfTechnology.address;
schools.georgiaInstituteOfTechnology.phoneNumber;
schools.georgiaInstituteOfTechnology.dateEstablished;

7 trước đây

schools.georgiaInstituteOfTechnology.address;
schools.georgiaInstituteOfTechnology.phoneNumber;
schools.georgiaInstituteOfTechnology.dateEstablished;

1

Bây giờ chúng ta hãy thử viết một số hàm hoạt động trên cấu trúc dữ liệu lồng nhau này. Các câu trả lời ở bên dưới - nhưng hãy cố gắng tự làm những điều này trước

bài tập

Viết một hàm gọi là

schools.georgiaInstituteOfTechnology.address;
schools.georgiaInstituteOfTechnology.phoneNumber;
schools.georgiaInstituteOfTechnology.dateEstablished;

8 bảng điều khiển đó. ghi nhật ký tất cả các giá trị trong mảng cityLivedIn

Viết một hàm gọi là

schools.georgiaInstituteOfTechnology.address;
schools.georgiaInstituteOfTechnology.phoneNumber;
schools.georgiaInstituteOfTechnology.dateEstablished;

9 bàn điều khiển đó. ghi nhật ký tất cả các giá trị bên trong đối tượng

let instructorData = {
    name: "Tim",
    favoriteHobbies: ["Sailing", "Hiking", "Coding"]
};

0

Hãy viết một hàm có tên là

let instructorData = {
    name: "Tim",
    favoriteHobbies: ["Sailing", "Hiking", "Coding"]
};

1 chấp nhận hai tham số, một khóa và một giá trị, đồng thời thêm khóa và giá trị vào đối tượng

let instructorData = {
    name: "Tim",
    favoriteHobbies: ["Sailing", "Hiking", "Coding"]
};

2 và trả về đối tượng

let instructorData = {
    name: "Tim",
    favoriteHobbies: ["Sailing", "Hiking", "Coding"]
};

2

Cuối cùng, hãy viết một hàm có tên là

let instructorData = {
    name: "Tim",
    favoriteHobbies: ["Sailing", "Hiking", "Coding"]
};

4 để loại bỏ một khóa trong đối tượng

let instructorData = {
    name: "Tim",
    favoriteHobbies: ["Sailing", "Hiking", "Coding"]
};

2 và trả về đối tượng

let instructorData = {
    name: "Tim",
    favoriteHobbies: ["Sailing", "Hiking", "Coding"]
};

2 (các khóa mới được thêm ở trên không được bao gồm trong các ví dụ này)

Các giải pháp

Đối với hầu hết các chức năng này, sẽ rất hữu ích nếu lưu trữ thông tin lồng nhau trong một biến để tránh phải nhập nhiều lần. Dưới đây là các giải pháp cho các vấn đề trước đó

trưng bàyThành phố

schools.georgiaInstituteOfTechnology.address;
schools.georgiaInstituteOfTechnology.phoneNumber;
schools.georgiaInstituteOfTechnology.dateEstablished;

1

hiển thịQuê quánDữ liệu

schools.georgiaInstituteOfTechnology.address;
schools.georgiaInstituteOfTechnology.phoneNumber;
schools.georgiaInstituteOfTechnology.dateEstablished;

2

thêm chi tiết

schools.georgiaInstituteOfTechnology.address;
schools.georgiaInstituteOfTechnology.phoneNumber;
schools.georgiaInstituteOfTechnology.dateEstablished;

3

loại bỏ chi tiết

Chúng tôi cần đảm bảo rằng chúng tôi sử dụng ký hiệu dấu ngoặc và không ký hiệu dấu chấm khi truy cập đối tượng của mình. Vì chúng ta không biết tên của khóa cho đến khi hàm được gọi, nên chúng ta cần truy cập động vào khóa đó, việc này phải được thực hiện bằng cách sử dụng ký hiệu ngoặc

Làm cách nào để thêm một đối tượng vào một đối tượng trong JavaScript?

Làm cách nào để thêm thuộc tính vào đối tượng lồng nhau trong JavaScript?

Các đối tượng có thể có các đối tượng lồng nhau bên trong chúng không?

Làm cách nào để thêm thuộc tính mới vào đối tượng hiện có trong JavaScript?