Làm cách nào để kiểm tra đối tượng lồng nhau có trống trong JavaScript không?

Question

Với giải pháp này, bạn sẽ vượt qua

if (typeof user.settings.theme !=== 'undefined') { 
    // your property exists 
}

1. Tuy nhiên, bạn có thể thấy rằng nếu đối tượng của bạn được lồng sâu, việc kiểm tra từng cấp độ, sẽ nhanh chóng khiến câu lệnh không thể đọc được

Nội dung chính Show

Sử dụng toán tử trong
Sử dụng phương thức hasOwnProperty
Sử dụng chuỗi tùy chọn
Phần thưởng - Sử dụng toán tử xác nhận không null trong TypeScript
Đâu là sự khác biệt giữa in và hasOwnProperty?
Cách làm việc với các đối tượng an toàn với lỗi
Làm cách nào để kiểm tra xem đối tượng JavaScript có trống không?
Làm cách nào để kiểm tra xem đối tượng có phải là JavaScript lồng nhau không?
Làm cách nào để kiểm tra xem một đối tượng có trống trong JavaScript es6 không?
Làm cách nào để lấy giá trị đối tượng lồng nhau trong JavaScript?

Sử dụng toán tử trong

Điều này cũng sẽ trả về một giá trị boolean

if ('theme' in user.settings) { 
    // your property exist 
}

trong. js

Đã sao chép vào khay nhớ tạm. Sao chép

Một lần nữa, vấn đề với giải pháp này là nó giả định rằng

if (typeof user.settings.theme !=== 'undefined') { 
    // your property exists 
}

0 là một đối tượng. Nếu không, chúng tôi nhận được một

if (typeof user.settings.theme !=== 'undefined') { 
    // your property exists 
}

1

Sử dụng phương thức hasOwnProperty

Cũng giống như toán tử

if (typeof user.settings.theme !=== 'undefined') { 
    // your property exists 
}

5, toán tử này giả định sự tồn tại của

if (typeof user.settings.theme !=== 'undefined') { 
    // your property exists 
}

0 và chỉ có thể được sử dụng một cách đáng tin cậy nếu chúng ta có một đối tượng cấp độ duy nhất

if (user.settings.hasOwnProperty('theme')) { 
    // your property exist 
}

hasOwnProperty. js

Đã sao chép vào khay nhớ tạm. Sao chép

Sử dụng chuỗi tùy chọn

Không giống như các ví dụ trước, phương pháp này cung cấp giải pháp cho cha mẹ không tồn tại

if (user?.settings?.theme) { 
    // your property exist 
}

xâu chuỗi tùy chọn. js

Đã sao chép vào khay nhớ tạm. Sao chép

Ngay cả khi

if (typeof user.settings.theme !=== 'undefined') { 
    // your property exists 
}

0 không phải là một đối tượng, nó sẽ không gây ra lỗi. Tuy nhiên, cũng có một nhược điểm của việc này. Theo , giải pháp này chỉ được hỗ trợ trong ~78% trình duyệt khi viết giải pháp này. Vì vậy, bạn không nên sử dụng nó trong môi trường sản xuất. Đảm bảo rằng bạn có tùy chọn dự phòng nếu chọn tùy chọn này

Phần thưởng - Sử dụng toán tử xác nhận không null trong TypeScript

Nếu bạn đang sử dụng TypeScript, bạn có thể sử dụng toán tử xác nhận không null để kiểm tra sự tồn tại của các thuộc tính. Điều này hoạt động giống như chuỗi tùy chọn và sẽ ngăn chặn

if (typeof user.settings.theme !=== 'undefined') { 
    // your property exists 
}

1s

if ('theme' in user.settings) { 
    // your property exist 
}

0 khẳng định không rỗng. js

Đã sao chép vào khay nhớ tạm. Sao chép

Tìm cách để cải thiện kỹ năng của bạn?

Đâu là sự khác biệt giữa in và hasOwnProperty?

Điều quan trọng là phải biết sự khác biệt giữa

if (typeof user.settings.theme !=== 'undefined') { 
    // your property exists 
}

5 và

if ('theme' in user.settings) { 
    // your property exist 
}

20. Nếu cần kiểm tra các thuộc tính kế thừa, bạn cần sử dụng toán tử

if (typeof user.settings.theme !=== 'undefined') { 
    // your property exists 
}

5 . Nếu không, bạn cũng có thể sử dụng

if ('theme' in user.settings) { 
    // your property exist 
}

20 cũng được. Để nhấn mạnh sự khác biệt giữa hai loại này, hãy xem ví dụ mã sau

if ('theme' in user.settings) { 
    // your property exist 
}

5 in-vs-hasOwnProperty. js

Đã sao chép vào khay nhớ tạm. Sao chép

Cách làm việc với các đối tượng an toàn với lỗi

Ngoài ra, hãy nhớ xem cách bạn có thể khắc phục lỗi thuộc tính lồng sâu một cách an toàn và cách lặp qua một đối tượng bằng cách nhấp vào một trong hai mẹo bên dưới

Làm cách nào để kiểm tra xem đối tượng JavaScript có trống không?

Sử dụng đối tượng. . keys sẽ trả về một mảng chứa tên thuộc tính của đối tượng. Nếu độ dài của mảng là 0 thì chúng ta biết rằng đối tượng trống.

Làm cách nào để kiểm tra xem đối tượng có phải là JavaScript lồng nhau không?

Để kiểm tra xem một đối tượng có thuộc tính lồng nhau hay không, hãy sử dụng toán tử xâu chuỗi tùy chọn - ? . . Các ?. toán tử cho phép bạn đọc giá trị của thuộc tính lồng nhau mà không đưa ra lỗi nếu thuộc tính không tồn tại trên đối tượng, e. g. đối tượng?. một?.

Làm cách nào để kiểm tra xem một đối tượng có trống trong JavaScript es6 không?

thuộc tính độ dài. Nếu nó trả về số không (0), đối tượng trống . Bây giờ bạn có thể sử dụng phương pháp này để kiểm tra xem một đối tượng có trống không bằng câu lệnh if hoặc tạo một hàm kiểm tra. Điều này sẽ trả về đúng hoặc sai.

Làm cách nào để lấy giá trị đối tượng lồng nhau trong JavaScript?

Cấu trúc dữ liệu lồng nhau là một mảng hoặc đối tượng tham chiếu đến các mảng hoặc đối tượng khác, i. e. giá trị của nó là mảng hoặc đối tượng. Có thể truy cập các cấu trúc như vậy bằng cách áp dụng liên tiếp ký hiệu dấu chấm hoặc dấu ngoặc vuông . Đây là một ví dụ. dữ liệu const = { mã. 42, mặt hàng. [{ Tôi. 1, tên. 'foo' }, { id. 2, tên. 'thanh' }] };

programming javascript