🥇Rất tiếc, tôi đã làm lại: gỡ lỗi các lỗi phổ biến trong JavaScript

Viết mã JavaScript có thể là một thách thức và đôi khi hết sức đáng sợ, như nhiều nhà phát triển đã quen thuộc. Trong quá trình làm việc chắc chắn sẽ phát sinh sai sót, một số lỗi thường xuyên lặp lại. Bài viết này nhắm đến các nhà phát triển mới vào nghề, nói về những lỗi này và cách giải quyết chúng. Để rõ ràng, tên của các hàm, thuộc tính và đối tượng được lấy từ bài hát phổ biến. Tất cả điều này giúp bạn nhanh chóng ghi nhớ cách sửa những lỗi thường gặp.

Chúng tôi nhắc nhở: cho tất cả độc giả của "Habr" - giảm giá 10 rúp khi đăng ký bất kỳ khóa học Skillbox nào bằng mã khuyến mại "Habr".

Hộp kỹ năng khuyến nghị: khóa học thực hành "Nhà phát triển di động PRO".

TypeError: thuộc tính không được xác định

let girl = {
    name: "Lucky",
    location: "Hollywood",
    profession: "star",
    thingsMissingInHerLife: true,
    lovely: true,
    cry: function() {
        return "cry, cry, cries in her lonely heart"
    }
}
console.log(girl.named.lucky)

Mã ví dụ ở trên đưa ra lỗi Uncaught TypeError: Không thể đọc thuộc tính 'may mắn' không xác định. Vấn đề là đối tượng cô gái không có thuộc tính được đặt tên, mặc dù nó có thuộc tính tên. Và vì thuộc tính girl.named không được xác định nên bạn không thể truy cập nó, vì về mặt hình thức nó không tồn tại. Nhưng nếu bạn thay thế girl.named.lucky bằng girl.name thì mọi thứ sẽ hoạt động bình thường và chương trình sẽ trả về Lucky.

Bạn có thể tìm hiểu thêm về các thuộc tính đọc ở đây.

Cách giải quyết Lỗi Loại

Lỗi loại xảy ra khi lập trình viên cố gắng thực hiện các hành động trên dữ liệu không khớp với một loại cụ thể. Các ví dụ bao gồm sử dụng .bold(), yêu cầu thuộc tính không xác định hoặc gọi một hàm không thực sự là một hàm.

Vì vậy, nếu bạn cố gắng gọi girl(), bạn sẽ gặp lỗi Uncaught TypeError: yourVariable.bold is not a function và girl không phải là một hàm, bởi vì nó thực sự là một đối tượng được gọi chứ không phải một hàm.

Để loại bỏ lỗi, bạn cần nghiên cứu các biến. Vậy con gái là gì? girl.named là gì? Bạn có thể tìm hiểu bằng cách phân tích mã, hiển thị các biến bằng console.log, lệnh trình gỡ lỗi hoặc gọi tên biến trong bảng điều khiển. Bạn cần đảm bảo rằng có thể thao tác trên kiểu dữ liệu có trong biến. Nếu nó không phù hợp, hãy thay đổi nó, chẳng hạn như thêm một điều kiện hoặc khối try..catch - và giành quyền kiểm soát việc thực hiện thao tác.

Tràn ngăn xếp

Nếu bạn tin tác giả lời bài hát Baby One More Time (đây là Britney Spears, vâng), thì từ hit trong ngữ cảnh này có nghĩa là mong muốn được gọi lại của ca sĩ (đây là lời giải thích về chính bối cảnh của ca khúc này). bài hát - ghi chú của người dịch). Rất có thể mong muốn này sẽ dẫn đến sự gia tăng số lượng cuộc gọi trong cuộc sống thực. Nhưng trong lập trình, đây là phép đệ quy có thể gây ra lỗi nếu call stack tràn.

Các lỗi trông như thế này:

Lỗi: Hết dung lượng ngăn xếp (Edge)
InternalError: đệ quy quá nhiều (Firefox)
RangeError: Đã vượt quá kích thước ngăn xếp cuộc gọi tối đa (Chrome)

Lỗi tràn ngăn xếp xảy ra nếu nhà phát triển không xem xét trường hợp cơ sở trong đệ quy hoặc nếu mã không giải quyết được trường hợp dự định.

function oneMoreTime(stillBelieve=true, loneliness=0) {
    if (!stillBelieve && loneliness < 0) return
    loneliness++
    return oneMoreTime(stillBelieve, loneliness)
}

Trong trường hợp này, stillBelieve không bao giờ có thể sai, vì vậy oneMoreTime sẽ được gọi mỗi lần nhưng hàm sẽ không bao giờ hoàn thành.

Nếu bạn bắt đầu dựa vào hai người bạn, điều này sẽ giảm bớt sự cô đơn và bạn sẽ không phải đợi một cuộc gọi.

function oneMoreTime(stillBelieve=true, loneliness=0) {
    if (!stillBelieve && loneliness < 0) return
    loneliness--
    stillBelieve = false
    return oneMoreTime(stillBelieve, loneliness)
}

Một ví dụ là các trường hợp có vòng lặp vô hạn, khi hệ thống không tạo ra thông báo lỗi nhưng trang thực thi mã JavaScript chỉ bị treo. Điều này xảy ra nếu vòng lặp while không có điều kiện kết thúc.

let worldEnded = false
 
while (worldEnded !== true) {
  console.log("Keep on dancin' till the world ends")
}

Bạn có thể giải quyết vấn đề như sau:

let worldEnded = false
 
while (worldEnded !== true) {
  console.log("Keep on dancin' till the world ends")
  worldEnded = true
}

Gỡ lỗi các vòng lặp và đệ quy vô hạn

Nếu gặp sự cố vòng lặp vô hạn, bạn cần đóng tab trong Chrome hoặc Edge và đóng cửa sổ trình duyệt trong Firefox. Sau này, bạn cần phân tích cẩn thận mã. Nếu không thể tìm ra vấn đề, bạn nên thêm lệnh gỡ lỗi vào vòng lặp hoặc hàm của mình và kiểm tra giá trị của các biến. Nếu kết quả không tương ứng với những gì mong đợi thì chúng ta thay thế nó, việc này có thể thực hiện dễ dàng.

Trong ví dụ trên, trình gỡ lỗi phải được thêm làm dòng đầu tiên của hàm hoặc vòng lặp. Sau đó, bạn cần mở tab gỡ lỗi trong Chrome, phân tích các biến trong phạm vi. Sử dụng nút tiếp theo, bạn có thể theo dõi những thay đổi của chúng ở mỗi lần lặp. Tất cả điều này đều dễ thực hiện và trong hầu hết các trường hợp, vấn đề đã được tìm thấy.

Bạn có thể đọc thêm về tất cả điều này ở đây (cho chrome) và đây (dành cho Firefox).

Lỗi cú pháp

Một trong những lỗi phổ biến nhất trong JavaScript là SyntaxError. Tiện ích mở rộng soạn thảo văn bản sẽ giúp bạn tránh chúng. Ví dụ: Bracket Pair Colorizer đánh dấu các dấu ngoặc trong mã bằng các màu khác nhau và Prettier hoặc một công cụ phân tích tương tự giúp bạn có thể nhanh chóng tìm ra lỗi. Tùy chọn tốt nhất để giảm khả năng xảy ra Lỗi Cú pháp là lồng nhau ở mức tối thiểu.

Hãy chia sẻ bằng phần bình luận: bạn làm gì để ngăn ngừa sai sót hoặc nhanh chóng phát hiện và loại bỏ chúng?

Hộp kỹ năng khuyến nghị:

Khóa học thực hành hai năm "Tôi là nhà phát triển web CHUYÊN NGHIỆP".

Khóa học trực tuyến "Nhà phát triển C# từ con số 0".

Khóa học năm thực tế "Lập trình viên PHP từ con số 0 đến CHUYÊN NGHIỆP".

Nguồn: www.habr.com

Rất tiếc, tôi đã làm lại: Gỡ lỗi các lỗi phổ biến trong JavaScript

TypeError: thuộc tính không được xác định

Cách giải quyết Lỗi Loại

Tràn ngăn xếp

Gỡ lỗi các vòng lặp và đệ quy vô hạn

Lỗi cú pháp

Thêm một lời nhận xét Hủy bỏ trả lời