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]
0Phươ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]
5A 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]
5console.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à Console
0— nhưng không phải Console
1, hàm, Console
2 hoặc Console
3
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 Console
5 sẽ được xâu chuỗi và đối tượng Console
6 sẽ bị mất đơn giản
Ảnh của Paweł Durczok trên BaptMethod 3 — Sử dụng
Console
7W 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à Console
9.
“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 conNó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 Console
7
Và đây là ảnh chụp màn hình kết quả
Kết quả của
Console
7Thà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[]
7T 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]
0Nó 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ếulog[]
9 là một đối tượng] sẽ là một hàng trong bảngCột đầu tiên trong bảng sẽ được gắn nhãn
console.log[object]
3. Nếulog[]
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ếulog[]
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]
9T 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ặpconsole.log[object]
3. [Sự khác biệt quan trọng duy nhất là vòng lặpconsole.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]
8Mộ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