Cái gì được lồng trong JavaScript?

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: '[email protected]',
    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

đầ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

0. Sử dụng các phím để tìm phần tử tương ứng trong

1 và sử dụng phần tử đó làm khóa trong đối tượng mới đang được tạo

const 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,

2 là một đối tượng nằm bên trong đối tượng chính có tên là

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 nhau

const 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

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ọn

Bạ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});

0

Trướ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ên

Nế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;

4

Truy 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

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;

6

Khi 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});

6

const name = user.personalInfo.name;

8

Trong 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

Tôi làm cách nào để sử dụng hàm lồng nhau trong JS?

Tôi có nên sử dụng các hàm JavaScript lồng nhau không?

Từ khóa này có nghĩa là gì trong JavaScript?

Chúng ta có thể viết một hàm bên trong một hàm trong JavaScript không?