Cách đọc đối tượng đối tượng trong javascript

Giống như tất cả các nhà phát triển JavaScript, tôi thích sử dụng bảng điều khiển để kiểm tra các biến trong khi viết mã. Dưới đây là 5 phương pháp để xuất các khóa và thuộc tính của đối tượng ra cửa sổ giao diện điều khiển

Ảnh của Mike Meyers trên Bapt

Nếu bạn giống tôi, bạn đã gặp phải vấn đề khi cố gắng ghi trực tiếp một đối tượng hoặc mảng JavaScript vào bảng điều khiển — nhưng đâu là cách tốt nhất?

Có lập luận rằng chúng ta chỉ nên sử dụng câu lệnh debugger và kiểm tra các biến và đối tượng trong cửa sổ trình gỡ lỗi của Công cụ dành cho nhà phát triển

Nhưng cá nhân tôi, khi tìm ra một thuật toán hoặc thử một cú pháp mã mới, tôi thích tạo nguyên mẫu nhanh trong bảng điều khiển. (Kiện tôi. 🙂)

Dưới đây là 5 cách để đăng nhập các đối tượng JavaScript trực tiếp vào cửa sổ giao diện điều khiển

Ảnh của Nikita Kostrykin trên BaptMethod 1 — Sử dụng console.log(object)

W khi phát triển trong trình duyệt, phương thức console.log() được gọi với một đối tượng hoặc các đối tượng làm đối số sẽ hiển thị đối tượng hoặc các đối tượng đó.

“Phương thức Console log() xuất một thông báo tới bảng điều khiển web. Thông báo có thể là một chuỗi đơn (với các giá trị thay thế tùy chọn) hoặc có thể là bất kỳ một hoặc nhiều đối tượng JavaScript nào. ” — Tài liệu MDN

Kiểm tra một đoạn mã bằng cách sử dụng console.log(object)

Và đây là ảnh chụp màn hình từ mã đó

Kết quả của console.log(object)

Thuộc tính của đối tượng đó có thể được kiểm tra thêm bằng cách nhấp vào mũi tên ở bên trái

Kết quả mở rộng của console.log(object)

Tất nhiên, không phải tất cả JavaScript đều được phát triển hoặc có thể gỡ lỗi trong trình duyệt — vì vậy, các nhà phát triển có thể đang sử dụng alert() thay vì console.log()

Và console.log(object)0 hoàn toàn không hoạt động theo cách tương tự — thay vào đó, nó hiển thị cảnh báo có nội dung console.log(object)1

Kết quả của console.log(object)0

Phương pháp tiếp theo được thảo luận hoạt động cho cả console.log() và alert()

Ảnh của Xin chào, tôi là Nik 🍌 trên UnsplashMethod 2 — Sử dụng console.log(object)5

A phương pháp phổ biến được thảo luận trực tuyến để biến đối tượng thành chuỗi JavaScript để kiểm tra chúng là phương pháp console.log(object)6.

“Phương thức console.log(object)7 chuyển đổi một đối tượng hoặc giá trị JavaScript thành chuỗi JSON, tùy ý thay thế các giá trị nếu hàm thay thế được chỉ định hoặc tùy chọn chỉ bao gồm các thuộc tính đã chỉ định nếu mảng thay thế được chỉ định. ” — Tài liệu MDN

Điều này cực kỳ hữu ích nếu bạn cần thay thế alert() cho console.log()

Một số mẹo và thủ thuật hữu ích là sử dụng console.log()0 làm đối số bổ sung cho việc thụt lề được định dạng độc đáo. console.log()1

Và, bạn có thể sử dụng đối số thứ hai cho console.log()2 để chỉ in các thuộc tính khớp với các khóa đó. console.log()3

Lưu ý rằng phương thức console.log()4 của đối tượng sẽ được gọi nếu nó hiện diện

Dưới đây là một vài mã ví dụ sử dụng console.log(object)5

Và ảnh chụp màn hình từ các ví dụ mã đó

Kết quả của console.log(object)5

console.log()7 tuyệt vời nhưng không hoàn hảo

B hãy coi chừng. console.log()8 chỉ hoạt động với dữ liệu tương thích với JSON, nghĩa là một số loại giá trị nhất định có thể bị mất.

Cụ thể, console.log()2 chỉ hoạt động đối với một số nguyên thủy. booleans, số, chuỗi và Console0— nhưng không phải Console1, hàm, Console2 hoặc Console3

Ngoài ra, phương thức console.log()2 cũng không hoạt động với nhiều đối tượng. Ví dụ: đối tượng Console5 sẽ được xâu chuỗi và đối tượng Console6 sẽ bị mất đơn giản

Ảnh của Paweł Durczok trên BaptMethod 3 — Sử dụng Console7

W hile console.log() sẽ hoạt động đối với các đối tượng, có một phương thức dành riêng để hiển thị các đối tượng trên bảng điều khiển có tên là Console9.

“Phương thức Console_______4_______1 hiển thị danh sách tương tác các thuộc tính của đối tượng JavaScript đã chỉ định. Đầu ra được trình bày dưới dạng danh sách phân cấp với các tam giác hiển thị cho phép bạn xem nội dung của các đối tượng con

Nói cách khác, log()2 là cách để xem tất cả các thuộc tính của một đối tượng JavaScript được chỉ định trong bảng điều khiển mà nhà phát triển có thể dễ dàng lấy các thuộc tính của đối tượng. ” — Tài liệu MDN

Kiểm tra ví dụ mã này bằng cách sử dụng Console7

Và đây là ảnh chụp màn hình kết quả

Kết quả của Console7

Thành thật mà nói, tôi gặp khó khăn khi nói sự khác biệt giữa log()5 và log()6, ít nhất là trong bảng điều khiển của Firefox, nhưng cả hai phương pháp đều tồn tại

Tiếp theo, tôi đề cập đến một phương pháp mà con người có thể đọc được nhằm hiển thị dữ liệu dạng bảng

Ảnh của Shane Avery trên UnsplashMethod 4 — Sử dụng log()7

T tính năng bảng điều khiển ít được biết đến hơn log()8 là hoàn hảo để hiển thị dữ liệu đối tượng trong cửa sổ bảng điều khiển.

“Hàm này nhận một đối số bắt buộc là log()9, phải là một mảng hoặc một đối tượng và một tham số tùy chọn bổ sung là console.log(object)0

Nó ghi nhật ký log()9 dưới dạng bảng. Mỗi phần tử trong mảng (hoặc thuộc tính liệt kê được nếu log()9 là một đối tượng) sẽ là một hàng trong bảng

Cột đầu tiên trong bảng sẽ được gắn nhãn console.log(object)3. Nếu log()9 là một mảng thì các giá trị của nó sẽ là các chỉ số của mảng. Nếu log()9 là một đối tượng, thì giá trị của nó sẽ là tên thuộc tính. Lưu ý rằng (trong Firefox) console.log(object)6 bị giới hạn hiển thị 1000 hàng (hàng đầu tiên là chỉ mục được gắn nhãn). ” — Tài liệu MDN

Đây là một đoạn mã sử dụng log()7

Và ảnh chụp màn hình thu được, hiển thị định dạng dạng bảng

Cá nhân tôi thực sự thích console.log(object)8 để kiểm tra đối tượng nhanh chóng. 💖 💯

Ảnh của Rohan Gangopadhyay trên BaptMethod 5 — Sử dụng console.log(object)9

T phương thức trợ giúp ES6 console.log(object)0 có thể được gọi với một đối tượng làm đối số, dẫn đến một mảng các cặp khóa-giá trị.

“Phương thức console.log(object)1 trả về một mảng gồm các cặp thuộc tính khóa chuỗi có thể đếm được của một đối tượng đã cho, theo thứ tự giống như thứ tự được cung cấp bởi vòng lặp console.log(object)3. (Sự khác biệt quan trọng duy nhất là vòng lặp console.log(object)4 cũng liệt kê các thuộc tính trong chuỗi nguyên mẫu)

Thứ tự của mảng được trả về bởi console.log(object)1 không phụ thuộc vào cách xác định đối tượng. Nếu có nhu cầu sắp xếp nhất định, thì mảng nên được sắp xếp trước, chẳng hạn như console.log(object)6. ” — Tài liệu MDN

Mảng khóa-giá trị kết quả có thể được lặp lại bằng cách sử dụng vòng lặp console.log(object)7, cho phép tùy chỉnh nhiều hơn về mặt xuất ra bảng điều khiển

Kiểm tra mã này bằng cách sử dụng console.log(object)9 và console.log()

Đây là một ảnh chụp màn hình của đầu ra kết quả

Kết quả của console.log(object)9 và console.log()

Lưu ý rằng trước ES6, bạn phải sử dụng vòng lặp console.log(object)3, vì console.log(object)3 (và console.log(object)4 và console.log(object)5 có liên quan) là

Đây là ảnh chụp màn hình kết quả — nó hoạt động giống như console.log(object)6

Kết quả của console.log() bên trong một console.log(object)8

Một lần nữa, bạn sẽ muốn sử dụng rõ ràng từ khóa console.log(object)9 — hoặc alert()0 hoặc alert()1— vì nếu không thì alert()2 sẽ là

Một điều khác cần lưu ý là vòng lặp console.log(object)4 sẽ lặp qua các thuộc tính kế thừa (xem phần ) trừ khi bạn kiểm tra phương thức alert()4 cho từng thuộc tính

Các phương thức console.log(object)0, console.log(object)4, console.log(object)5 và alert()8 không lặp qua các thuộc tính kế thừa

Tất nhiên, các nhà phát triển cần hỗ trợ cho Internet Explorer chỉ có thể sử dụng Babel như một polyfill thay vì ghi nhớ các mẫu mã cũ. 😁

Ảnh của Elias Castillo trên BaptKết luận

E rất có thể một lập trình viên JavaScript đã xuất một đối tượng ra bảng điều khiển JavaScript của trình duyệt bằng cách sử dụng console.log() tại một thời điểm nào đó.

Tuy nhiên, có nhiều cách khác để đạt được kết quả tương tự — bao gồm log()2 và cách yêu thích của cá nhân tôi, console.log(object)8

Phương thức console.log()2 có thể hữu ích để ghi đối tượng vào bảng điều khiển dưới dạng chuỗi, miễn là dữ liệu trong đối tượng an toàn với JSON

Đối với các đối tượng phức tạp, phương thức console.log()3 là một cách lặp qua một đối tượng có thể được sử dụng để ghi đối tượng vào bảng điều khiển

Khi phát triển bên ngoài trình duyệt, bạn có thể thích sử dụng alert() — trong trường hợp đó, console.log()5 và console.log()6 sử dụng alert() sẽ là lựa chọn tốt nhất để ghi lại nội dung của đối tượng bên trong cảnh báo

Dù bạn sử dụng phương pháp nào, thì việc thành thạo bảng điều khiển JavaScript là một kỹ năng hữu ích để tăng tốc quá trình phát triển của bạn. Mã hóa vui vẻ. 💻🏆🙌

Ảnh của Nikita Kostrykin trên BaptĐọc thêm

• Flavio Copes xem xét một số phương pháp kiểm tra đối tượng trên blog của anh ấy

Cách kiểm tra một đối tượng JavaScript

JavaScript cung cấp nhiều cách để kiểm tra nội dung của một biến. Cụ thể, hãy cùng tìm hiểu cách in…

cây đàn flaviocope. com

• John Au-Yeung thảo luận về gỡ lỗi bảng điều khiển trong Mã hóa tăng cấp

Gỡ lỗi ứng dụng JavaScript bằng đối tượng Console

Một tình huống phổ biến khi chúng tôi viết ứng dụng JavaScript là chúng tôi gặp lỗi hoặc ứng dụng đang hoạt động mà chúng tôi không mong đợi…

lên cấp. gitconnected. com

• Cá sấu. io bao gồm các mẹo và thủ thuật về bảng điều khiển trong bài viết của họ về chủ đề này

Nhìn vào API bảng điều khiển JavaScript

Tìm hiểu một số mẹo và thủ thuật để gỡ lỗi mã JavaScript của bạn bằng một số phương pháp mạnh mẽ có sẵn trên bảng điều khiển

cá sấu. io

• Darryl Pargeter giải thích chuyên sâu về bảng điều khiển tại freeCodeCamp. tổ chức

Cách tận dụng tối đa bảng điều khiển JavaScript

của Darryl Pargeter Cách tận dụng tối đa bảng điều khiển JavaScript Một trong những công cụ sửa lỗi cơ bản nhất trong…

www. freecodecamp. tổ chức

• Zell Liew cung cấp nhiều cách khác nhau để lặp qua các đối tượng JS trên blog của anh ấy

Lặp qua các đối tượng trong JavaScript. Zell Liew

Thỉnh thoảng, bạn có thể cần lặp qua các Đối tượng trong JavaScript. Cách duy nhất để làm như vậy trước ES6 là với một…

zellwk. com

Ảnh của Korie Cull trên Bapt

Tiến sĩ. Derek Austin là tác giả của Lập trình nghề nghiệp. Làm thế nào bạn có thể trở thành một lập trình viên có thân hình 6 con số thành công trong 6 tháng, hiện đã có trên Amazon

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

Làm cách nào để giải quyết đối tượng đối tượng trong JavaScript?

Đối tượng đối tượng JavaScript là gì?

Làm thế nào bạn có thể đọc các thuộc tính của một đối tượng trong JavaScript?