Làm cách nào để tránh TypeError trong JavaScript?

Một trong những lỗi loại phổ biến nhất trong JavaScript là "Không thể đọc thuộc tính không xác định" nổi tiếng. Lỗi này xảy ra khi bạn cố gắng đọc hoặc truy cập một thuộc tính trên một đối tượng là

let user; // The variable is set to undefined

user = await getUser(id); // The request fails and returns `undefined`, but it is not handled

console.log(user.name); // You try to log the `name` property of the `user` object, that is still `undefined`

0. Một trường hợp phổ biến khác do sự cố tương tự gây ra, đó là khi bạn nhận được thông báo lỗi tương tự, nhưng với

let user; // The variable is set to undefined

user = await getUser(id); // The request fails and returns `undefined`, but it is not handled

console.log(user.name); // You try to log the `name` property of the `user` object, that is still `undefined`

1 thay vì

let user; // The variable is set to undefined

user = await getUser(id); // The request fails and returns `undefined`, but it is not handled

console.log(user.name); // You try to log the `name` property of the `user` object, that is still `undefined`

0

Cannot read property of null

Lý do tại sao điều này xảy ra?

Hãy tưởng tượng tình huống sau. Bạn có một đối tượng

let user; // The variable is set to undefined

user = await getUser(id); // The request fails and returns `undefined`, but it is not handled

console.log(user.name); // You try to log the `name` property of the `user` object, that is still `undefined`

3 ban đầu là

let user; // The variable is set to undefined

user = await getUser(id); // The request fails and returns `undefined`, but it is not handled

console.log(user.name); // You try to log the `name` property of the `user` object, that is still `undefined`

0 và nó được điền thông qua một yêu cầu

let user; // The variable is set to undefined

user = await getUser(id); // The request fails and returns `undefined`, but it is not handled

console.log(user.name); // You try to log the `name` property of the `user` object, that is still `undefined`

0. Máy chủ của bạn không hoạt động và do đó, nó trả về giá trị

let user; // The variable is set to undefined

user = await getUser(id); // The request fails and returns `undefined`, but it is not handled

console.log(user.name); // You try to log the `name` property of the `user` object, that is still `undefined`

0, nhưng bạn đã không xử lý đường dẫn lỗi này và bạn vẫn cố đọc các thuộc tính từ đối tượng

let user; // The variable is set to undefined

user = await getUser(id); // The request fails and returns `undefined`, but it is not handled

console.log(user.name); // You try to log the `name` property of the `user` object, that is still `undefined`

3

let user; // The variable is set to undefined

user = await getUser(id); // The request fails and returns `undefined`, but it is not handled

console.log(user.name); // You try to log the `name` property of the `user` object, that is still `undefined`

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

Biến trong ví dụ mã trên được khai báo, nhưng giá trị của nó vẫn được đặt thành

let user; // The variable is set to undefined

user = await getUser(id); // The request fails and returns `undefined`, but it is not handled

console.log(user.name); // You try to log the `name` property of the `user` object, that is still `undefined`

0. Ở đây về cơ bản bạn đang cố gắng làm như sau

console.log(undefined.name); // This will throw "Cannot read property 'name' of undefined"

// Same as if the request returns with a `null` and you try to read properties from that
console.log(null.name); // This will throw "Cannot read property 'name' of null"

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

Vì

let user; // The variable is set to undefined

user = await getUser(id); // The request fails and returns `undefined`, but it is not handled

console.log(user.name); // You try to log the `name` property of the `user` object, that is still `undefined`

0 không phải là đối tượng, bạn sẽ nhận được một

let user; // The variable is set to undefined

user = await getUser(id); // The request fails and returns `undefined`, but it is not handled

console.log(user.name); // You try to log the `name` property of the `user` object, that is still `undefined`

5, giống như bên dưới. Vì vậy, làm thế nào chúng ta có thể tránh điều này?

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

---

tránh lỗi

Để tránh mắc các loại lỗi này, chúng tôi cần đảm bảo rằng các biến chúng tôi đang cố đọc có giá trị chính xác. Điều này có thể được thực hiện theo nhiều cách khác nhau. Chúng ta có thể thực hiện kiểm tra

let user; // The variable is set to undefined

user = await getUser(id); // The request fails and returns `undefined`, but it is not handled

console.log(user.name); // You try to log the `name` property of the `user` object, that is still `undefined`

6 trước khi xử lý các đối tượng có giá trị nhất định thay đổi

if (user !== undefined) {
    // Here `user` is surely not `undefined`
}

if (typeof(user) !== 'undefined') {
    // We can also use the `typeof` operator
}

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

Tuy nhiên, một giải pháp rõ ràng hơn nhiều là sử dụng toán tử OR logic, khi bạn gán một giá trị cho một biến hoặc thậm chí tốt hơn, khi bạn trả về giá trị từ hàm

// Assign a fallback during declaration
user = getUser(id) || {};

// Assign a fallback during return
const getUser = id => {
    ...

    return userResponse || {};
};

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

Nếu

let user; // The variable is set to undefined

user = await getUser(id); // The request fails and returns `undefined`, but it is not handled

console.log(user.name); // You try to log the `name` property of the `user` object, that is still `undefined`

7 trả về

let user; // The variable is set to undefined

user = await getUser(id); // The request fails and returns `undefined`, but it is not handled

console.log(user.name); // You try to log the `name` property of the `user` object, that is still `undefined`

0 hoặc

let user; // The variable is set to undefined

user = await getUser(id); // The request fails and returns `undefined`, but it is not handled

console.log(user.name); // You try to log the `name` property of the `user` object, that is still `undefined`

1, thì chúng ta có thể chuyển về một đối tượng trống và gán đối tượng đó cho biến

let user; // The variable is set to undefined

user = await getUser(id); // The request fails and returns `undefined`, but it is not handled

console.log(user.name); // You try to log the `name` property of the `user` object, that is still `undefined`

3. Bằng cách này, nếu chúng tôi cố gắng truy cập vào

console.log(undefined.name); // This will throw "Cannot read property 'name' of undefined"

// Same as if the request returns with a `null` and you try to read properties from that
console.log(null.name); // This will throw "Cannot read property 'name' of null"

1, chúng tôi sẽ nhận được

let user; // The variable is set to undefined

user = await getUser(id); // The request fails and returns `undefined`, but it is not handled

console.log(user.name); // You try to log the `name` property of the `user` object, that is still `undefined`

0, vì chúng tôi không có thuộc tính đó trên đối tượng

let user; // The variable is set to undefined

user = await getUser(id); // The request fails and returns `undefined`, but it is not handled

console.log(user.name); // You try to log the `name` property of the `user` object, that is still `undefined`

3, nhưng chúng tôi vẫn có một đối tượng để làm việc, vì vậy chúng tôi không gặp lỗi. Chúng ta cũng có thể sử dụng TypeScript để dễ dàng phát hiện ra những loại lỗi này ngay trong IDE của mình

Nếu bạn muốn xem thêm mẹo web, hãy theo dõi @flowforfrank

---

50 câu hỏi phỏng vấn JavaScript

Và câu trả lời của họ giải thích

Dưới đây là 50 câu hỏi phỏng vấn JavaScript thường xuất hiện trong cuộc phỏng vấn kỹ thuật. Ở một nơi, một tài nguyên để học hỏi

Làm cách nào để giải quyết TypeError trong JavaScript?

Làm cách nào để tránh lỗi trong JavaScript?

TypeError có nghĩa là gì trong JavaScript?

Làm cách nào để xử lý lỗi không được xác định trong JavaScript?