Làm chủ JavaScript: Xử lý Null, Undefined và Quản lý dữ liệu hiệu quả

0 0 0

Người đăng: Vinh Phạm

Theo Viblo Asia

Trong bài viết này, chúng ta sẽ khám phá cách ngăn ngừa lỗi khi cố gắng truy cập dữ liệu có thể không xác định hoặc null và chúng ta sẽ xem xét các phương pháp bạn có thể sử dụng để quản lý dữ liệu hiệu quả khi cần thiết .

Truy cập an toàn với chuỗi tùy chọn

Hãy tưởng tượng bạn đang xây dựng một ứng dụng web và cần truy cập thông tin từ một đối tượng phức tạp. Tuy nhiên, một số thuộc tính của đối tượng này có thể chưa được định nghĩa hoặc không tồn tại. Nếu không xử lý cẩn thận, ứng dụng của bạn có thể gặp lỗi và ngừng hoạt động. Để giải quyết vấn đề này, Javascript cung cấp cho chúng ta toán tử Optional Chaining (?.), cho phép truy cập thuộc tính một cách an toàn.

VD:

const person = { name: 'John', address: { city: 'New York' }
}; console.log(person.address?.city); // 'New York'
console.log(person.address?.country); // undefined, no error 

Ở ví dụ trên, toán tử ?. sẽ kiểm tra xem person.address có tồn tại hay không. Nếu tồn tại, nó sẽ tiếp tục truy cập thuộc tính city. Ngược lại, nếu person.address là undefined, toán tử ?. sẽ trả về undefined mà không gây ra lỗi.

Hợp nhất Nullish

Bên cạnh undefined, null cũng là một giá trị đặc biệt trong Javascript, thường được sử dụng để biểu thị sự vắng mặt của một giá trị có ý nghĩa. Khi một biến có giá trị là null hoặc undefined, việc sử dụng biến đó có thể dẫn đến lỗi. Javascript cung cấp toán tử Nullish Coalescing (??) giúp xử lý tình huống này.

VD:

function getconfig(config) { return config ?? { timeout: 1000, retries: 3 };
} let userConfig = null;
let finalConfig = getConfig(userConfig); // { timeout: 1000, retries: 3 } console.log(finalConfig);

Ở ví dụ trên, đoạn mã return config ?? { timeout: 1000, retries: 3 } sẽ trả về config nếu nó không phải là null hoặc undefined. Ngược lại, nếu config là null hoặc undefined, đoạn mã sẽ trả về đối tượng { timeout: 1000, retries: 3 }.

Quản lý các mục trùng lặp với Set và WeakSet

Ngoài ra, Javascript còn cung cấp các cấu trúc dữ liệu hữu ích giúp quản lý dữ liệu hiệu quả. Một trong số đó là Set, cho phép lưu trữ một tập hợp các giá trị duy nhất. Khi muốn loại bỏ các giá trị trùng lặp trong một mảng, bạn có thể sử dụng Set.

VD:

const letter= ["a","c", "b", "d" , "c" , "a" ,"d" ];
const result= [...new Set(letter)]; console.log(result) => ["a", "b" , "c" , "d"]

Tương tự Set, WeakSet cũng là một cấu trúc dữ liệu cho phép lưu trữ tập hợp các giá trị duy nhất. Tuy nhiên, WeakSet chỉ lưu trữ các đối tượng và không cho phép chứa các kiểu dữ liệu nguyên thủy.

VD:

// Creating a WeakSet
const weakset = new WeakSet(); // Defining objects
const personJane = { name: 'jane' };
const personMike = { name: 'mike' }; // Adding objects to the WeakSet
weakset.add(personJane);
weakset.add(personMike); console.log(weakset.has(obj1)); // true
console.log(weakset.has(obj2)); // true // Attempting to add the same object again
weakset.add(obj1); // obj1 is already present, won't be added again console.log(weakset.has(obj1)); // true
console.log(weakset.has(obj2)); // true // Removing an object from the WeakSet
weakset.delete(obj1);
console.log(weakset.has(obj1)); // false // Adding the object again
weakset.add(obj1);
console.log(weakset.has(obj1)); // true

Điểm đặc biệt của WeakSet là nó không ngăn chặn việc thu gom rác của các đối tượng được tham chiếu. Nói cách khác, nếu một đối tượng chỉ được tham chiếu bởi WeakSet và không còn được tham chiếu bởi bất kỳ biến nào khác, đối tượng đó sẽ được giải phóng khỏi bộ nhớ.

Hy vọng các bạn thấy các ví dụ trên hữu ích!

Bình luận

Bài viết tương tự

- vừa được xem lúc

Giới thiệu Typescript - Sự khác nhau giữa Typescript và Javascript

Typescript là gì. TypeScript là một ngôn ngữ giúp cung cấp quy mô lớn hơn so với JavaScript.

0 0 522

- vừa được xem lúc

Bạn đã biết các tips này khi làm việc với chuỗi trong JavaScript chưa ?

Hi xin chào các bạn, tiếp tục chuỗi chủ đề về cái thằng JavaScript này, hôm nay mình sẽ giới thiệu cho các bạn một số thủ thuật hay ho khi làm việc với chuỗi trong JavaScript có thể bạn đã hoặc chưa từng dùng. Cụ thể như nào thì hãy cùng mình tìm hiểu trong bài viết này nhé (go).

0 0 432

- vừa được xem lúc

Một số phương thức với object trong Javascript

Trong Javascript có hỗ trợ các loại dữ liệu cơ bản là giống với hầu hết những ngôn ngữ lập trình khác. Bài viết này mình sẽ giới thiệu về Object và một số phương thức thường dùng với nó.

0 0 153

- vừa được xem lúc

Tìm hiểu về thư viện axios

Giới thiệu. Axios là gì? Axios là một thư viện HTTP Client dựa trên Promise.

0 0 141

- vừa được xem lúc

Imports và Exports trong JavaScript ES6

. Giới thiệu. ES6 cung cấp cho chúng ta import (nhập), export (xuất) các functions, biến từ module này sang module khác và sử dụng nó trong các file khác.

0 0 110

- vừa được xem lúc

Bài toán đọc số thành chữ (phần 2) - Hoàn chỉnh chương trình dưới 100 dòng code

Tiếp tục bài viết còn dang dở ở phần trước Phân tích bài toán đọc số thành chữ (phần 1) - Phân tích đề và những mảnh ghép đầu tiên. Bạn nào chưa đọc thì có thể xem ở link trên trước nhé.

0 0 244