Video học lập trình mỗi ngày

Tình huống này xảy ra khá nhiều giữa backEnd và frontEnd khi gọi truy vấn thông qua API RESTful. Bởi vì quy định khi làm việc với API RESTful thì quan trọng phải giới hạn các trường trả về thông qua API, lý do là giảm thiểu lưu lượng mạng và tăng tốc độ sử dụng API của chính họ. Đây cũng là một Mẹo viết javascript trong lập trình.

Ví dụ, để lấy một thông tin cầu thủ bóng đá thì không nhất thiết lấy lương của họ show lên.

GET /players?fields=id,name,age,...

Mỗi trường phân tách bởi dấu , được quy định bởi các thành viên trong nhóm, từ đó sẽ lấy những gì được truyền vào và trả lại. Nhưng nếu như có một sự sai sót ở FrontEnd như name = null thì thế nào? Vì vậy chúng ta sẽ nói đến một thủ thuật nhỏ trong lập trình đó là cleanObject.

cleanObject

cleanObject là một helper function, giúp xoá những thuộc tính như '', null, undefined trong một Object. Ví dụ như dưới đây.

let player = cleanObject({
    name: '',
    age: 35,
    club: 'MU'
})
console.log("player:::", player);
//Output
{ age: 35, club: 'MU' } // name đã bị xoá bởi khi không tương thích

Vậy cleanObject được triển khai theo nhiều cách khác nhau ví dụ như bạn cũng có thể sử dụng lodash để làm việc này.

var cleanColors = _.without(colors, undefined, null, "", "crap");
//cleanColors is now ["red","blue"];

Và đây cũng là một phương pháp, nếu bạn có cách nào mới và nhanh hơn thì cứ giới thiệu giúp anh em nhé.

const cleanObject = (object) => {
  // Object.assign({}, object)
  if (!object) {
    return {};
  }
  const result = { ...object };
  Object.keys(result).forEach((key) => {
    const value = result[key];
    if ([undefined, null, ''].includes(value)) {
      delete result[key];
    }
  });
  return result;
};

Cách sử dụng thì cũng dê thôi:

let player = cleanObject({
    name: '',
    age: 35,
    club: 'MU'
})
console.log("player:::", player);

Một mẹo nhỏ trong thủ thuật viết javascript, có thể nhiều bạn sẽ thấy một điều gì mới mẻ trong đó. Thanks!