Các cách xóa một property của Object trong Javascript
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:
- N Nâng tầm kỹ năng JavaScript: 6 khái niệm không thể bỏ qua
- J Jest là gì? Hướng dẫn thực hiện kiểm thử JavaScript với Jest
- S Strict Mode trong JavaScript – Sử dụng Strict Mode như thế nào cho tốt?
- T Tìm hiểu về Intl.RelativeTimeFormat trong JavaScript
- K Kinh nghiệm xử lý câu lệnh điều kiện trong JavaScript
- C Các cách xóa một property của Object trong Javascript
- K Kinh nghiệm truy xuất giá trị trong object lồng nhau trong Javascript
- H Hằng số và tính bất biến trong JavaScript
- T Thư viện Driver.js tạo hướng dẫn tương tác trang web
- C Các tips hiệu quả nhất khi làm việc với Javascript