Các cách xóa một property của Object trong Javascript

882

Bài viết được sự cho phép của tác giả Duy Phan

Mình sẽ giới thiệu 2 cách để xóa một property trong Javascript Object. Một cách sử dụng mutable – toán tử delete, một cách còn lại là immutable – tính năng Object Restructuring.

Sử dụng toán tử Delete

Toán tử delete trong Javascript giúp bạn xóa một property tương ứng trong một object. Nếu xóa thành công, nó sẽ trả về giá trị true, ngược lại sẽ trả về false.

2 cách sử dụng như sau đều hợp lệ:

delete object.property

delete object['property']

Hành động này thuộc kiểu mutable, điều đó có nghĩa khi sử dụng cách này sẽ làm thay đổi giá trị của object ban đầu.

Nếu property không tồn tại, toán tử này sẽ chẳng làm gì cả, đồng thời luôn luôn trả về true.
Toán tử delete chỉ có tác dụng với các properties của chính object đó. Nếu có một property cùng tên với một property trong prototype mặc định của object, thì sau khi xóa, object này sẽ sử dụng property trong prototype mặc định.

const Employee = {
  age: 28,
  name: 'abc',
  designation: 'developer'
}

console.log(delete Employee.name);   // true
console.log(delete Employee.age);    // true

// Property không tồn tại, luôn luôn trả về true
console.log(delete Employee.salary); // true

Bạn có thể đọc thêm chi tiết về toán tử delete này ở delete operator – JavaScript | MDN (mozilla.org).

Xem thêm nhiều việc làm JavaScript hấp dẫn trên TopDev

Sử dụng tính năng Object Restructuring

Bằng cách sử dụng object restructuring và rest syntax, chúng ta có thể tách bỏ thuộc tính tương ứng trong object và tạo ra một bản copy mới của đối tượng.

Sau quá trình restructuring, một bản copy mới của object được tạo ra và gán cho biến rest, và biến này sẽ không có property bạn chọn destructure trước đó.

const Employee = {
  age: 28,
  name: 'abc',
  designation: 'developer'
}

const { age, ...rest } = Employee
console.log(rest) // { name: 'abc', designation: 'developer' }

Nếu bạn muốn thực hiện nó một cách dynamic, bạn có thể sử dụng phương pháp sau đây:

const Employee = {
  age: 28,
  name: 'abc',
  designation: 'developer'
}

const ageName = 'age'

const { [name]: ageName, ...rest } = Employee
console.log(rest) // { name: 'abc', designation: 'developer' }

Cách này không làm thay đổi giá trị ban đầu của object, do đó nó là immutable.

Kết

Tùy vào yêu cầu của công việc mà bạn có thể chọn cách tương ứng.

Trong một số trường hợp, việc thay đổi giá trị ban đầu của object sẽ dẫn tới nhiều hệ quả không mong muốn (debug chết cmn luôn), nên mình hay sử dụng immutable.

Bài viết gốc được đăng tải tại duypt.dev

Xem thêm:

Xem thêm Việc làm IT hấp dẫn trên TopDev