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

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.

Xem thêm: Tìm hiểu về toán tử mới optional chaining (?.) trong JavaScript và ứng dụng trong Vue.js

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!