• Privacy Policy
Chia sẻ kiến thức công nghệ
  • Home
  • Lập trình
  • Chia sẻ
  • Blog
No Result
View All Result
  • Home
  • Lập trình
  • Chia sẻ
  • Blog
No Result
View All Result
Duy PT Blog
No Result
View All Result
Home Lập trình

Xóa một property của Object trong Javascript

Duy Solo by Duy Solo
April 24, 2022
in Lập trình, NodeJS
Reading Time: 4 mins read
A A
Share on FacebookShare on Twitter

Mục lục

  1. Sử dụng toán tử Delete
  2. Sử dụng tính năng Object Restructuring
  3. Kết

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, một cách còn lại là immutable.

  • Mutable: sử dụng toán tử delete.
  • Immutable: sử dụng 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).

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.

Related Posts

Hướng dẫn cài đặt LEMP trên CentOS Stream 9
Lập trình

Hướng dẫn cài đặt LEMP trên CentOS Stream 9

by Duy Solo
May 24, 2022
0

Bài viết này sẽ hướng dẫn các bạn cài đặt LEMP stack trên CentOS Stream 9 mới nhất trên Vultr...

Read more
Higher order Functions là gì? Tại sao nên sử dụng chúng?
Lập trình

Higher order Functions là gì? Tại sao nên sử dụng chúng?

by Duy Solo
April 15, 2022
0

Đây là một khái niệm rất quan trọng trong Functional Programming. Ở đây mình sẽ cho ví dụ dựa trên...

Read more
NodeJS

NestJS – Providers

by Duy Solo
August 29, 2021
0

Providers là thành phần cơ bản và cực kỳ quan trọng trong Nest để thực hiện Dependency Injection.

Read more
NodeJS

Các design pattern cần biết khi làm việc với NestJS – phần 2

by Duy Solo
August 28, 2021
0

Một số design patterns chính đang được sử dụng bởi NestJS mà bạn cần nắm rõ để làm việc với...

Read more
Load More
Next Post
Hướng dẫn cài đặt LEMP trên CentOS Stream 9

Hướng dẫn cài đặt LEMP trên CentOS Stream 9

Discussion about this post

POPULAR POST

  • LocalStorage và Cookies – chọn cái nào để lưu JWT Tokens hiệu quả và an toàn?

    1065 shares
    Share 426 Tweet 266
  • Hướng dẫn reset trial cho các sản phẩm IntelliJ trên MacOS

    933 shares
    Share 373 Tweet 233
  • Repository Design Pattern và ứng dụng của nó trong Laravel

    919 shares
    Share 368 Tweet 230
  • Decorators trong Typescript

    848 shares
    Share 339 Tweet 212
  • Các thư viện Date Pickers tốt nhất cho React

    743 shares
    Share 297 Tweet 186
Duy PT Blog

© 2021 Duy PT Blog

Liên kết

  • Lập trình
  • Chia sẻ
  • Blog
  • Privacy Policy

Theo dõi

No Result
View All Result
  • Home

© 2021 Duy PT Blog