JavaScript lấy tất cả các khóa trong đối tượng lồng nhau
Để kiểm tra sự tồn tại của các đối tượng lồng thuộc tính, bạn nên thực hiện từng bước một để tránh TypeError. Nó sẽ bị ném nếu ít nhất một trong số các thành viên là null hoặc không xác định và bạn cố gắng truy cập một thành viên Show
Có hai cách để tránh nó. Bạn có thể bắt ngoại lệ hoặc tạo một hàm để kiểm tra sự tồn tại của nhiều cấp độ như thế này hàm checkNested(obj /*, level1, level2,. levelN*/ ) { let args = Mảng. nguyên mẫu. lát cắt. cuộc gọi (đối số, 1); . chiều dài; . đối tượng. . đối tượng. hasOwnProperty(args[i])) { return false; . { cấp độ 2. { cấp 3. 'cấp 3' } } }; . log(checkNested(test, 'level1', 'level2', 'level3')); . log(checkNested(test, 'level1', 'level2', 'foo')); Sử dụng các tính năng ES6 có thể làm cho chức năng này ngắn hơn nữa
Để có được giá trị thuộc tính lồng nhau và cũng kiểm tra sự tồn tại của nó, hãy sử dụng một lớp lót sau hàm getNested(obj,. đối số) { trả lại đối số. giảm ((obj, level) => obj && obj[level], obj) } const test = { level1. { cấp độ 2. { cấp 3. 'cấp 3' } } }; . log(getNested(test, 'level1', 'level2', 'level3')); . log(getNested(test, 'level1', 'level2', 'level3', 'length')); . log(getNested(test, 'level1', 'level2', 'foo')); . nhật ký (getNested (kiểm tra, 'a', 'b')); Bạn cũng có thể sử dụng toán tử tùy chọn để truy cập các thuộc tính được lồng sâu bằng cách sử dụng mã thông báo ?
Nếu bất kỳ cấp độ đã cho nào được truy cập là null hoặc không xác định, biểu thức sẽ chuyển thành không xác định theo mặc định Toán tử cũng xử lý các cuộc gọi phương thức một cách an toàn
Biểu thức trên tạo ra undefined if obj, obj. cấp 1 hoặc obj. cấp độ 1. phương thức là null hoặc không xác định; Toán tử xâu chuỗi tùy chọn (?. ) là một đề xuất và cho phép đọc giá trị của thuộc tính nằm sâu trong chuỗi các đối tượng được kết nối mà không cần phải xác thực rõ ràng rằng mỗi tham chiếu đều hợp lệ. Các ?. toán tử chức năng cho phép đoản mạch nếu tham chiếu đánh giá là null hoặc không xác định. Khi được sử dụng với lời gọi hàm, nó trả về undefined trong trường hợp hàm không tồn tại Trong bài đăng trên blog này, chúng ta sẽ tìm hiểu cách tạo kiểu sử dụng TypeScript, hiển thị tất cả các đường dẫn chính của một đối tượng, bao gồm cả các đường dẫn lồng nhau Tại sao điều đó lại hữu ích?Bạn đã bao giờ xây dựng hàm TypeScript nhận một thuộc tính cụ thể của một đối tượng, bằng cách chỉ định đối tượng và đường dẫn đến thuộc tính của đối tượng đó chưa? Có thể bạn quan tâm
Vào chế độ toàn màn hình Thoát chế độ toàn màn hình Chà, rõ ràng điều này hoạt động rất tốt, nhưng bạn không tận dụng hết lợi thế của TypeScript. Bạn có thể dễ dàng mắc lỗi đánh máy trên đối số thứ hai (đường dẫn) và mất một số loại quý giá khi gỡ lỗi này Làm thế nào TypeScript có thể giúp chúng tôi sau đó?Thật không may cho chúng tôi, vẫn chưa có loại tiện ích gốc nào có thể cung cấp cho chúng tôi tất cả các đường dẫn chính bên trong một đối tượng lồng nhau. Nhưng nếu đối tượng của bạn chỉ có 1 mức độ sâu, toán tử 1 của TypeScript sẽ hoạt động tốt
Vào chế độ toàn màn hình Thoát chế độ toàn màn hình Bằng cách này, bạn sẽ có một hàm an toàn kiểu thực, chỉ cho phép bạn thêm 2, 3 hoặc 4 làm đối số thứ haiNếu bạn không hiểu một số kỹ thuật tôi đã trình bày ở trên, hãy ở lại với tôi, vì tôi sẽ giải thích chi tiết hơn dưới đây Đối tượng có độ sâu hơn 1 cấpBây giờ, đối với các đối tượng có nhiều hơn 1 mức độ sâu, 1 gần như không đủ như bây giờ bạn có thể đã nhận raTrước khi đi vào chi tiết triển khai của TypeScript, hãy thử nghĩ về một thuật toán cho phép chúng ta lấy tất cả các khóa của một đối tượng có N mức độ sâu
Với thuật toán này và các nguyên tắc lập trình "đơn giản" này, một câu lệnh lặp, điều kiện và đệ quy, điều này dường như không quá khó Bây giờ, hãy sử dụng thuật toán đó và xây dựng một hàm JS có thể trích xuất tất cả các khóa của tất cả các nút trong bất kỳ đối tượng cụ thể nào 0Vào chế độ toàn màn hình Thoát chế độ toàn màn hình Vì vậy, chúng tôi biết cách thực hiện điều này theo chương trình, mục tiêu bây giờ là thử và áp dụng cùng loại khái niệm với các toán tử và loại tiện ích hiện có của TypeScript để xây dựng một 6 sẽ cung cấp cho chúng tôi tất cả các khóa của một đối tượng dưới dạng các loại chữTạo loại tiện ích TypeScriptLoại tiện ích mà chúng tôi sẽ tạo bên dưới, chỉ khả dụng kể từ TypeScript 4. 0 đã được phát hành, vì nó đã giới thiệu các loại chữ Trong phần này, chúng ta sẽ đi từng bước về cách tạo một loại tiện ích TypeScript có khả năng trích xuất tất cả các khóa bên trong bất kỳ đối tượng cụ thể nào định nghĩa loạiBước đầu tiên để tạo tiện ích này rõ ràng là khai báo một loại TypeScript mới và đặt tên cho nó 1- Khai báo kiểu mới 2Vào chế độ toàn màn hình Thoát chế độ toàn màn hình Bước tiếp theo, là làm cho loại này trở thành "chung chung", nghĩa là, nó sẽ chấp nhận bất kỳ đối tượng nào mà chúng ta chuyển vào nó. 2- Chấp nhận tham số loại chung 3Vào chế độ toàn màn hình Thoát chế độ toàn màn hình Bản thân việc thêm tham số loại chung không hạn chế loại bạn có thể chuyển vào tiện ích. Để làm được điều đó, chúng ta cần thêm từ khóa 7, để chỉ chấp nhận các loại đối tượng - bất kỳ loại nào tuân theo kiểu dữ liệu cặp "khóa-giá trị"3- Ràng buộc tham số chung 5Vào chế độ toàn màn hình Thoát chế độ toàn màn hình Tuyệt vời, chúng tôi đã xác định chữ ký của loại, bây giờ chúng tôi cần thực hiện "công việc thực sự", nghĩa là thực hiện triển khai Loại thực hiệnQuay trở lại thuật toán của chúng ta, bước đầu tiên để tạo tiện ích này là "Đi qua các khóa của đối tượng". TypeScript làm cho điều này trở nên dễ dàng với chúng tôi bằng một thứ gọi là Loại được ánh xạ, đây là một cách để duyệt qua các khóa của đối tượng và đặt loại của giá trị dựa trên từng khóa 1- Đi qua các phím của đối tượng 6Vào chế độ toàn màn hình Thoát chế độ toàn màn hình Bây giờ chúng ta đã có thể duyệt qua tất cả các khóa của đối tượng và sử dụng chúng để truy cập từng giá trị của đối tượng, chúng ta có thể chuyển sang bước thứ 2 của thuật toán. "Nếu giá trị của khóa không phải là đối tượng thì đó là khóa hợp lệ" Chúng tôi sẽ thực hiện việc kiểm tra đó bằng cách sử dụng TypeScript có điều kiện, hoạt động như sau 7Vào chế độ toàn màn hình Thoát chế độ toàn màn hình 2- Kiểm tra xem đó có phải là khóa hợp lệ không 8Vào chế độ toàn màn hình Thoát chế độ toàn màn hình Vì vậy, bây giờ chúng tôi có quyền truy cập vào tất cả các khóa cấp đầu tiên của đối tượng, nhưng rõ ràng là chúng tôi vẫn thiếu đường dẫn đến các thuộc tính của cấp độ khác, chẳng hạn như 8 và 9Để đạt được điều đó, chúng ta nên làm theo bước thứ 3 của thuật toán. "Khác, nếu khóa là một đối tượng, hãy ghép khóa này và quay lại bước 1. " Để đạt được điều đó, chúng ta cần sử dụng các kiểu đệ quy của TypeScript, thực sự hoạt động như bất kỳ ngôn ngữ lập trình nào khác - có một điều kiện gọi cùng một "kiểu" đã gọi điều kiện đó (tính đệ quy) và có một điều kiện dẫn đến một điều kiện thực tế. 3 - Thêm kiểu đệ quy 1Vào chế độ toàn màn hình Thoát chế độ toàn màn hình Về cơ bản là vậy, loại tiện ích 00 này đã có khả năng trích xuất tất cả các đường dẫn thuộc tính có thể có của một đối tượng với bất kỳ độ sâu nhất định nào, nhưng TypeScript có thể vẫn sẽ la mắng bạn vì đã sử dụng các chuỗi/số không có trong các ký tự, hãy khắc phục Để chỉ chọn các khóa của một loại cụ thể, chúng ta cần tận dụng các Loại giao lộ, đây chỉ là vấn đề sử dụng toán tử 014- Chỉ trích xuất các phím chuỗi/số 0Vào chế độ toàn màn hình Thoát chế độ toàn màn hình SortBy mẫu với NestedKeyOfBây giờ chúng ta đã hoàn tất việc triển khai loại tiện ích TypeScript của mình, đã đến lúc xem một mẫu đơn giản mà nó sẽ cực kỳ hữu ích trong bất kỳ dự án nào mà bạn có thể đang làm việc 👇 Bằng cách sử dụng tiện ích này trong hàm 02, chúng tôi có thể chọn một trong các thuộc tính của đối tượng một cách an toàn và đảm bảo rằng chúng tôi không mắc bất kỳ lỗi chính tả nào và luôn đồng bộ với cấu trúc của đối tượng và những gì chúng tôi đang chuyển qua 🤯Bản tóm tắt
Lưu ý thêm, tôi muốn đánh giá cao David Sherret tuyệt vời, người đã đăng một câu trả lời tràn ngăn xếp trông giống như loại tiện ích mà tôi đã mô tả ở trên 🙏 Làm cách nào để lấy khóa của đối tượng lồng nhau trong JavaScript?Làm cách nào để lấy khóa và giá trị của một đối tượng? . Sự vật. keys(obj) – trả về tất cả các khóa của đối tượng dưới dạng mảng Sự vật. giá trị (obj) – trả về tất cả các giá trị của đối tượng dưới dạng mảng Sự vật. entry(obj) – trả về một mảng [key, value] Làm cách nào để lấy giá trị từ đối tượng lồng nhau trong JavaScript?Nhận giá trị lồng nhau trong đối tượng dựa trên mảng khóa . So sánh các khóa bạn muốn trong đối tượng JSON lồng nhau dưới dạng Mảng Sử dụng mảng. nguyên mẫu. reduce() để lấy từng giá trị trong đối tượng JSON lồng nhau Nếu khóa tồn tại trong đối tượng, hãy trả về giá trị đích, nếu không thì trả về null Khóa đối tượng trong Javascript là gì?Đối tượng. keys() method trả về một mảng gồm các tên thuộc tính khóa chuỗi có thể đếm được của chính đối tượng đã cho . |
Bài Viết Liên Quan
Fuji Rock 2023 dates
Cho dù bạn đang tìm kiếm Vé Lễ hội nhạc rock Fuji cho tháng này, cuối tuần này, hôm nay, tối nay hay bất kỳ ngày nào khác trong tương lai, CheapoTicketing sẽ đáp ...
Plugin định vị cửa hàng tốt nhất WordPress
Nếu bạn sở hữu một doanh nghiệp có nhiều cửa hàng nằm ở các khu vực hoặc khu vực khác nhau, plugin cửa hàng WordPress có thể mang lại lợi ích lớn cho bạn. ...
Html dòng màu đen
Mọi người kêu la tại sao giữa CSS nó lại khó khăn như vậy?. Tôi nghĩ rằng vấn đề không phải là rất khó để làm, có rất nhiều cách khác nhau để làm ...
Pragma no cache nghĩa là gì?
Tôi cũng đang sử dụng Litespeedcache. Và tôi đang gặp vấn đề với phông chữ, chúng không tải HTTP, điều này có liên quan đến Tiêu đề này không?cám ơnĐang ...
MySQL cho Visual Studio 2.0 5
Các bản cập nhật cho các ghi chú này diễn ra khi các tính năng sản phẩm mới được thêm vào để mọi người có thể theo dõi quá trình phát triển. Nếu một ...
What shows have been canceled for 2022 2023?
Tìm hiểu xem chương trình nào sẽ quay lại và chương trình nào sẽ kết thúc trong danh sách các chương trình truyền hình bị hủy và đổi mới trong năm 2022 ...
Bitnami WordPress MariaDB
Sau khi thêm cài đặt trước vào tệp, hãy truy cập URL sau rồi chạy Repair Database. /wp-admin/bảo trì/sửa chữa. php (ví dụ, ví dụ. com/wp-admin/duy trì/sửa chữa. ...
Xóa vương quốc mongodb
Hướng dẫn này chỉ dành cho bạn cách thiết lập một ứng dụng web React cơ bản kết nối với các dịch vụ hỗ trợ ứng dụng Atlas của bạn và xác nhận một ...
BCC Spring semester 2023
Sinh viên phải đăng ký và ghi danh tại Berkeley City College và hoàn thành đơn xin hỗ trợ tài chính phù hợp. Thực hiện theo các bước dưới đây để đăng ký. ...
Chuyển đổi int thành mảng php
Hôm nay chúng ta sẽ tìm hiểu cách chuyển đổi mảng, số nguyên, đối tượng và biến thành chuỗi trong PHP. Chúng ta sẽ học cách sử dụng các hàm hoặc phương ...
Làm cách nào để tạo liên kết văn bản trong javascript?
Ví dụ; Vì vậy, trong hướng dẫn này, chúng tôi sẽ giải quyết vấn đề này. Bạn cũng có thể muốn tạo url ngắn bằng PHPTham gia với hơn 27.000 thành viên trong ...
5 đồng tiền Úc bằng bao nhiêu tiền Việt Nam?
Các hiệp định thương mại quốc tế tạo điều kiện cho quan hệ kinh tế của Úc và Việt Nam ngày càng đẩy mạnh. Nhu cầu giao dịch tiền Úc ngày càng tăng. ...
Javascript trong đầu hoặc cơ thể
Trong trình duyệt, JavaScript có thể được sử dụng để làm nhiều việc, nhưng thông thường nhiệm vụ chính của JavaScript là tạo nội dung tương tác hay nói ...
List of iPhones that will not support WhatsApp in 2023
Bạn có muốn trở thành người phục vụ une voiture ? En savoir plusnhà ga. thẩm mỹ viện riêng tư. hoa tiêuCe sont les petits suppléments qui rendent les vacances vraiment ...
Làm cách nào để tạo màu RGB ngẫu nhiên?
Bây giờ chúng ta sẽ xem cách tạo màu ngẫu nhiên bằng Python. Chúng tôi sẽ tạo màu ở hai định dạng. Một là định dạng RGB và một là định dạng thập ...
Sách Excel cho phân tích dữ liệu
[Ghi chú. Bài đăng trên blog này chứa 40 cuốn sách Excel hay nhất để phân tích dữ liệu và lập mô hình kinh doanh. Tôi cũng đã liệt kê ở đây những cuốn sách ...
Giai thừa sử dụng ngăn xếp trong python
Hàm giai thừa Python import math def factorial(x): return math.factorial(x) print(factorial(5)) 0 được xác định cho một số nguyên import math def factorial(x): return ...
Cách sử dụng link trong html
Trong bài viết trước bạn đọc đã cùng Taimienphi.vn tìm hiểu về thuộc tính color trong HTML. Bài viết tiếp theo dưới đây Taimienphi.vn sẽ giới thiệu tiếp cho ...
Các chức năng Python có thể bị quá tải không?
Chức năng quá tải trong Python là có thể. Quá tải phương thức trong Python cũng có thể xảy ra. Không trực tiếp, như trong C ++ hoặc Erlang, nhưng nó có thể ...
Du thuyền thế giới Cunard Queen Mary 2 2024
BẠN XỨNG ĐÁNG VỚI NÓDU LỊCH THẾ GIỚI & DU LỊCH TUYỆT VỜI 2024TẠI CUNARD ICONIC. Chuyến du thuyền Cunard World mang đến những khung cảnh đẹp nhất trên thế ...