Xóa thuộc tính khỏi Object trong Javascript (2 cách)

Bởi

Làm việc với Javascript nhiều, bạn sẽ thấy rằng công việc chủ yếu là thao tác với các Object. Từ việc tạo mới, clone object hay cần cập nhật giá trị cho các thuộc tính trong Object.v.v…

Như chúng ta cũng biết, Object là một tập hợp các thuộc tính, trong đó mỗi thuộc tính là một cặp key – value

Ví dụ:

const employee = {
  name: 'Dương Anh Sơn',
  position: 'Quản trị viên',
  website: 'https://vntalking.com'
};

Đôi lúc bạn cần phải xóa một vài thuộc tính trong Object cho nó gọn, tránh dư thừa dữ liệu không cần thiết. Chẳng hạn như xóa thuộc tính position thì phải làm như thế nào?

Thế mạnh của Javascript đó chính là có rất nhiều công cụ hỗ trợ làm việc với Object. Thông qua bài viết tìm hiểu javascript cơ bản này, mình sẽ giới thiệu với các bạn 2 cách mà mình hay sử dụng.

Nội dung chính của bài viết

Sử dụng từ khóa delete
Sử dụng cú pháp Rest Parameters
Tạm kết

Sử dụng từ khóa delete

delete là một toán tử đặc biệt trong Javascript dùng để xóa bỏ một thuộc tính khỏi Object.

Cú pháp:

delete object.property;
// Hoặc
delete object["property"]
// Hoặc
const name = 'dynamicProperty';
delete object[name];

Giả sử tình huống, nhân viên “Dương Anh Sơn” không còn quản trị trang web học lập trình VNTALKING nữa, mà chuyển sang quản lý mảng khác. Do vậy, chúng ta sẽ thực hành xóa thuộc tính website trong đối tượng employee ở ví dụ trên.

const employee = {
  name: 'Dương Anh Sơn',
  position: 'Quản trị viên',
  website: 'https://vntalking.com'
};

delete employee.website;

console.log(employee); // output: {name: "Dương Anh Sơn", position: "Quản trị viên"}

Toán tử delete sẽ thực hiện trực tiếp trên đối tượng gốc chứ không có tạo một bản sao. Do đó, sau khi delete được thực thi, đối tượng employee đã không còn thuộc tính position nữa.

Trong trường hợp bạn muốn xóa động một thuộc tính thì phải dùng cú pháp dấu ngoặc vuông.

const employee = {
  name: 'Dương Anh Sơn',
  position: 'Quản trị viên',
  website: 'https://vntalking.com'
};

const propertyNeedDelete = 'website';
delete employee[propertyNeedDelete];

console.log(employee); // output: {name: "Dương Anh Sơn", position: "Quản trị viên"}

Bạn hay sử dụng cách làm này khi mà cần phải xóa nhiều thuộc tính trong object.

Sử dụng cú pháp Rest Parameters

Như mình đã đề cập ở trên, nếu dùng toán tử delete để xóa thuộc tính, nó sẽ thực hiện trực tiếp trên đối tượng gốc. Trong trường hợp bạn không muốn như vậy, bạn vẫn muốn giữ nguyên đối tượng gốc, mà chỉ cần một bản sao đối tượng sau khi xóa.

Với Javascript, không gì là không thể. Để giải quyết được yêu cầu trên, chúng ta có thể sử dụng Object Destructuring kết hợp với Rest parameters.

Ý tưởng thực hiện như sau: Từ đối tượng Object ban đầu, chúng ta sẽ destructing ra các thuộc tính, sau đó giữ lại các thuộc tính vào rest object.

Cú pháp như sau:

const { property, ...restObject } = object;

Hoặc nếu muốn xóa động các thuộc tính:

const propertyNeedDelete = 'property';
const { [propertyNeedDelete]: removedProperty, ...restObject } = object;

Sau khi thực thi destructing và rest parameter, rest object sẽ sao chép toàn bộ các thuộc tính giống với đối tượng gốc, chỉ trừ các thuộc tính được chỉ định xóa. Đây chính là lý do tạo sao cách làm này không chỉnh sửa trực tiếp đối tượng gốc.

Áp dụng vào ví dụ trên nhé:

const employee = {
  name: 'Dương Anh Sơn',
  position: 'Quản trị viên',
  website: 'https://vntalking.com'
};

const { website, ...employeeRest } = employee;
console.log(employeeRest); // {name: "Dương Anh Sơn", position: "Quản trị viên"}

console.log(employee); // {name: "Dương Anh Sơn", position: "Quản trị viên", website: "https://vntalking.com"}

Tương tự, nếu bạn muốn xóa động các thuộc tính thì dùng cú pháp dấu ngoặc vuông như sau:

const employee = {
  name: 'Dương Anh Sơn',
  position: 'Quản trị viên',
  website: 'https://vntalking.com'
};

const propertyNeedDelete = 'website';
const { [propertyNeedDelete]: removedProperty, ...employeeRest } = employee;

console.log(employeeRest); // {name: "Dương Anh Sơn", position: "Quản trị viên"}

Ví dụ trên chỉ là xóa một thuộc tính, còn trường hợp muốn xóa hàng loạt nhiều thuộc tính trong Object thì sao?

Đơn giản là cứ truyền nhiều thuộc tính cần xóa là xong.

const { website, position, ...employeeRest } = employee;
console.log(employeeRest); // {name: "Dương Anh Sơn"}

Cũng dễ phải không nhỉ?

Tạm kết

Trên đây là hai phương pháp xóa thuộc tính trong một Object. Tương ứng với hai trường phái là thao tác trực tiếp trên Object gốc hay tạo một bản sao khác.

Tùy vào từng tính huống mà bạn áp dụng cho hợp lý.

💦 Đọc thêm về Javascript: