Hướng dẫn remove property object javascript - loại bỏ đối tượng thuộc tính javascript

Tìm hiểu cách xóa một thuộc tính khỏi đối tượng JavaScript.

Xóa thuộc tính khỏi một đối tượng

Toán tử xóa xóa một thuộc tính khỏi một đối tượng:delete operator deletes a property from an object:

Thí dụ

var person = {& nbsp; tên đầu tiên: "John", & nbsp; Tên cuối cùng: "doe", & nbsp; Tuổi: 50, & NBSP; Eyecolor: "màu xanh"};
firstName:"John",
lastName:"Doe",
age:50,
eyeColor:"blue"
};

xóa người.age; & nbsp; // hoặc xóa người ["Tuổi"];

// Trước khi xóa: person.age = 50, sau khi xóa, person.age = không xác định

Hãy tự mình thử »

Toán tử xóa xóa cả giá trị của thuộc tính và chính thuộc tính.

Sau khi xóa, tài sản không thể được sử dụng trước khi được thêm lại.

Toán tử xóa được thiết kế để sử dụng trên các thuộc tính đối tượng. Nó không có tác dụng đối với các biến hoặc chức năng.

Lưu ý: Không nên sử dụng toán tử xóa trên các thuộc tính đối tượng JavaScript được xác định trước. Nó có thể làm hỏng ứng dụng của bạn. The delete operator should not be used on predefined JavaScript object properties. It can crash your application.

🏠 Quay trở lại trang chủ

Có nhiều cách khác nhau để loại bỏ một thuộc tính khỏi đối tượng JavaScript. Tìm hiểu các lựa chọn thay thế và giải pháp được đề xuất

Ở đây, cách thức chúng ta sẽ làm điều này mà không bị phá hủy đối tượng hoặc cú pháp còn lại, nó rất tẻ nhạt hơn và không cho phép chúng ta tự động nhận được tất cả các thuộc tính còn lại:

Cho đối tượng

const car = {
  color: 'blue',
  brand: 'Ford'
}

Bạn có thể xóa một thuộc tính khỏi đối tượng này bằng cách sử dụng

Nó cũng hoạt động như:

delete car['brand']
delete car.brand
delete newCar['brand']

Đặt một tài sản thành không xác định

Nếu bạn cần thực hiện thao tác này theo cách rất tối ưu, ví dụ khi bạn hoạt động trên một số lượng lớn các đối tượng trong các vòng lặp, một tùy chọn khác là đặt thuộc tính thành undefined.

Do bản chất của nó, hiệu suất của delete chậm hơn rất nhiều so với việc phân công lại đơn giản thành undefined, chậm hơn hơn 50 lần.

Tuy nhiên, hãy nhớ rằng tài sản không bị xóa khỏi đối tượng. Giá trị của nó bị xóa, nhưng nó vẫn ở đó nếu bạn lặp lại đối tượng:

Sử dụng delete vẫn còn rất nhanh, bạn chỉ nên xem xét loại vấn đề hiệu suất này nếu bạn có lý do rất chính đáng để làm điều đó, nếu không, nó luôn luôn thích có ngữ nghĩa và chức năng rõ ràng hơn.

Xóa một thuộc tính mà không làm biến đổi đối tượng

Nếu khả năng đột biến là một mối quan tâm, bạn có thể tạo một đối tượng hoàn toàn mới bằng cách sao chép tất cả các thuộc tính từ cũ, ngoại trừ thị trường bạn muốn xóa:

const car = {
  color: 'blue',
  brand: 'Ford'
}
const prop = 'color'

const newCar = Object.keys[car].reduce[[object, key] => {
  if [key !== prop] {
    object[key] = car[key]
  }
  return object
}, {}]

[Xem

delete car['brand']
delete car.brand
delete newCar['brand']

Trong bài đăng này, bạn sẽ học cách loại bỏ các thuộc tính khỏi một đối tượng trong JavaScript bằng cách sử dụng phá hủy và cú pháp

delete car['brand']
delete car.brand
delete newCar['brand']

Nội phân chính

Phá hủy đối tượng là gì?
“Nghỉ ngơi trong quá trình phá hủy đối tượng
Ebook miễn phí
Tự động xóa một thuộc tính bằng khóa
Ebook miễn phí
Chỉ thị, đơn giản phải không? Sai! Ở bên ngoài, chúng trông đơn giản, nhưng ngay cả những người phát triển góc cạnh lành nghề đã nắm bắt mọi khái niệm trong ebook này.
Để loại bỏ một thuộc tính khỏi một đối tượng, bạn có thể sử dụng kết hợp các tham số phá hủy đối tượng và phần còn lại trong JavaScript. Đó là một trong những cách thực hiện bạn có thể loại bỏ một thuộc tính khỏi một đối tượng.
Cách chính xác về mặt ngữ nghĩa để loại bỏ một thuộc tính khỏi một đối tượng là sử dụng từ khóa xóa.
Sử dụng một vòng lặp cho..in để xóa một đối tượng và xóa tất cả các thuộc tính của nó. Vòng lặp sẽ lặp lại trên tất cả các thuộc tính có thể suy nghĩ trong đối tượng. Trên mỗi lần lặp, sử dụng toán tử xóa để xóa thuộc tính hiện tại.

Trong bài đăng này, bạn sẽ học cách loại bỏ các thuộc tính khỏi một đối tượng trong JavaScript bằng cách sử dụng phá hủy và cú pháp

delete car['brand']
delete car.brand
delete newCar['brand']

Nội phân chính

Phá hủy đối tượng là gì?

“Nghỉ ngơi trong quá trình phá hủy đối tượng

const data = { a: 1, b: 2, c: 3 };

const { a, b, c } = data;

console.log[a, b, c]; // 1, 2, 3

Bằng cách sử dụng

delete car['brand']
delete car.brand
delete newCar['brand']

8, chúng tôi đang khai báo 3 biến mới [

delete car['brand']
delete car.brand
delete newCar['brand']

const car = {
  color: 'blue',
  brand: 'Ford'
}
const prop = 'color'

const newCar = Object.keys[car].reduce[[object, key] => {
  if [key !== prop] {
    object[key] = car[key]
  }
  return object
}, {}]

0 và

const car = {
  color: 'blue',
  brand: 'Ford'
}
const prop = 'color'

const newCar = Object.keys[car].reduce[[object, key] => {
  if [key !== prop] {
    object[key] = car[key]
  }
  return object
}, {}]

1].

Nếu

delete car['brand']
delete car.brand
delete newCar['brand']

const car = {
  color: 'blue',
  brand: 'Ford'
}
const prop = 'color'

const newCar = Object.keys[car].reduce[[object, key] => {
  if [key !== prop] {
    object[key] = car[key]
  }
  return object
}, {}]

0 và

const car = {
  color: 'blue',
  brand: 'Ford'
}
const prop = 'color'

const newCar = Object.keys[car].reduce[[object, key] => {
  if [key !== prop] {
    object[key] = car[key]
  }
  return object
}, {}]

1 tồn tại dưới dạng tên thuộc tính trên

const car = {
  color: 'blue',
  brand: 'Ford'
}
const prop = 'color'

const newCar = Object.keys[car].reduce[[object, key] => {
  if [key !== prop] {
    object[key] = car[key]
  }
  return object
}, {}]

5, thì các biến sẽ được tạo chứa các giá trị của các thuộc tính đối tượng. Nếu tên tài sản không tồn tại, bạn sẽ nhận được undefined.

“Nghỉ ngơi trong quá trình phá hủy đối tượng

Đầu tiên đến các tham số nghỉ ngơi, sau đó đến các thuộc tính nghỉ ngơi!

Đã thêm vào Ecmascript 2015 và bây giờ ở Giai đoạn 4 - họ đã ở đây để ở lại và sử dụng ngày hôm nay.

Với suy nghĩ này, làm thế nào để

delete car['brand']
delete car.brand
delete newCar['brand']

7 giúp chúng tôi loại bỏ một tài sản khỏi một đối tượng thông qua phá hủy?

Ebook miễn phí

Chỉ thị, đơn giản phải không? Sai! Ở bên ngoài, chúng trông đơn giản, nhưng ngay cả những người phát triển góc cạnh lành nghề đã nắm bắt mọi khái niệm trong ebook này.

Hãy cùng lấy ví dụ trước đó của chúng tôi và sử dụng cú pháp

delete car['brand']
delete car.brand
delete newCar['brand']

7 để xem điều gì sẽ xảy ra:

const data = { a: 1, b: 2, c: 3 };

const { a, ...rest } = data;

console.log[a]; // 1
console.log[rest]; // { b: 2, c: 3 }

Sử dụng

delete car['brand']
delete car.brand
delete newCar['brand']

7 ở đây [và bạn có thể gọi

const data = { a: 1, b: 2, c: 3 };

const { a, b, c } = data;

console.log[a, b, c]; // 1, 2, 3

0 bất cứ thứ gì bạn thích] cung cấp cho chúng tôi mọi thứ còn lại, phần còn lại của Urmm, các thuộc tính nếu bạn muốn.

Vì vậy, thiên đường, chúng tôi chỉ học cách loại bỏ một tài sản khỏi một đối tượng? Tôi không thấy

const data = { a: 1, b: 2, c: 3 };

const { a, b, c } = data;

console.log[a, b, c]; // 1, 2, 3

1 bên trong

const data = { a: 1, b: 2, c: 3 };

const { a, b, c } = data;

console.log[a, b, c]; // 1, 2, 3

0 - nó đã bị xóa!

Về mặt kỹ thuật, nó đã bị loại trừ chứ không phải về mặt vật lý đã loại bỏ khỏi đối tượng - và nó tuân theo một mô hình bất biến để viết JavaScript và quản lý trạng thái [trạng thái là

const car = {
  color: 'blue',
  brand: 'Ford'
}
const prop = 'color'

const newCar = Object.keys[car].reduce[[object, key] => {
  if [key !== prop] {
    object[key] = car[key]
  }
  return object
}, {}]

5 của chúng tôi].

const data = { a: 1, b: 2, c: 3 };

const a = data.a;
const rest = { b: data.b, c: data.c };

console.log[a]; // 1
console.log[rest]; // { b: 2, c: 3 }

Tự động xóa một thuộc tính bằng khóa

Hãy nói rằng chúng tôi có một chìa khóa mà có lẽ người dùng đã cung cấp mà họ muốn xóa. Đối với điều này, chúng tôi sẽ sử dụng

const car = {
  color: 'blue',
  brand: 'Ford'
}
const prop = 'color'

const newCar = Object.keys[car].reduce[[object, key] => {
  if [key !== prop] {
    object[key] = car[key]
  }
  return object
}, {}]

0. Làm thế nào để chúng ta loại bỏ mục cụ thể đó? Tất cả các ví dụ cho đến nay đã được mã hóa cứng.

Hãy giả sử rằng chúng tôi có

const data = { a: 1, b: 2, c: 3 };

const { a, b, c } = data;

console.log[a, b, c]; // 1, 2, 3

5 như một giá trị ở đâu đó, chúng tôi có thể tự động chuyển điều này vào cú pháp phá hủy của chúng tôi bằng cách sử dụng cú pháp của dấu ngoặc vuông

const data = { a: 1, b: 2, c: 3 };

const { a, b, c } = data;

console.log[a, b, c]; // 1, 2, 3

6, giống như tra cứu đối tượng [thay vào đó, điều này tạo ra một biến mới dựa trên giá trị được truyền động]:

const data = { a: 1, b: 2, c: 3 };

const removeProp = 'b';

const { [removeProp]: remove } = data;

console.log[remove]; // 2

Điều đó đúng, bởi vì chúng tôi tự động xây dựng một biến mới, chúng tôi cần sử dụng

const data = { a: 1, b: 2, c: 3 };

const { a, b, c } = data;

console.log[a, b, c]; // 1, 2, 3

7 để gán lại một tên mới. Nếu không, chúng ta sẽ tham khảo nó như thế nào? Chúng tôi có thể tham khảo

const data = { a: 1, b: 2, c: 3 };

const { a, b, c } = data;

console.log[a, b, c]; // 1, 2, 3

6 vì vậy chúng tôi sẽ cần phải nhớ điều này.

Tuy nhiên, tại thời điểm này, chúng tôi có thể giới thiệu một cú pháp còn lại để xóa thuộc tính khỏi đối tượng:

const data = { a: 1, b: 2, c: 3 };

const removeProp = 'b';

const { [removeProp]: remove, ...rest } = data;

console.log[remove]; // 2
console.log[rest]; // { a: 1, c: 3 }

Ở đó, bạn có nó, chúng tôi đã xóa thành công một thuộc tính động trong JavaScript bằng cách sử dụng phá hủy đối tượng và cú pháp còn lại!

Kiểm tra ví dụ trực tiếp trong Stackblitz, chơi xung quanh và cảm thấy thoải mái với nó:

Bản tóm tắt

Chúng tôi đã đi một chặng đường dài! Kỹ thuật này giúp chúng tôi tránh các hoạt động có thể thay đổi và từ khóa delete, cung cấp cho chúng tôi một mô hình bất biến để loại bỏ các thuộc tính khỏi các đối tượng trong JavaScript.

Chúng tôi đã sử dụng phá hủy đối tượng và xem xét cách kết hợp nó với cú pháp còn lại để cung cấp cho chúng tôi một giải pháp sạch để loại bỏ các thuộc tính đối tượng.

Kiểm tra các khóa học JavaScript của tôi để tìm hiểu đầy đủ các điều cơ bản về ngôn ngữ sâu, các mẫu nâng cao, mô hình lập trình chức năng và hướng đối tượng và mọi thứ liên quan đến DOM. Một loạt các khóa học bắt buộc phải có cho mọi nhà phát triển JavaScript nghiêm túc.

Mã hóa hạnh phúc!

P.S. Bài đăng trên blog này đã được nhắc nhở bởi một cuộc thảo luận gọn gàng trên Twitter tôi đã có với Mauricio Correa! Anh ấy là một chàng trai và nhà phát triển tuyệt vời từ Brazil.

Ebook miễn phí

Hãy cùng lấy ví dụ trước đó của chúng tôi và sử dụng cú pháp

delete car['brand']
delete car.brand
delete newCar['brand']

7 để xem điều gì sẽ xảy ra:. It is one of the performant ways you could remove a property from an object.

Cách chính xác về mặt ngữ nghĩa để loại bỏ một thuộc tính khỏi một đối tượng là sử dụng từ khóa xóa.use the delete keyword.

Sử dụng một vòng lặp cho..in để xóa một đối tượng và xóa tất cả các thuộc tính của nó.Vòng lặp sẽ lặp lại trên tất cả các thuộc tính có thể suy nghĩ trong đối tượng.Trên mỗi lần lặp, sử dụng toán tử xóa để xóa thuộc tính hiện tại.. The loop will iterate over all the enumerable properties in the object. On each iteration, use the delete operator to delete the current property.

Trả lời: Sử dụng toán tử xóa Bạn có thể sử dụng toán tử xóa để xóa hoàn toàn các thuộc tính khỏi đối tượng JavaScript.Xóa là cách duy nhất để thực sự loại bỏ một thuộc tính khỏi một đối tượng.Use the delete Operator You can use the delete operator to completely remove the properties from the JavaScript object. Deleting is the only way to actually remove a property from an object.

Xóa thuộc tính khỏi một đối tượng

Thí dụ

Có nhiều cách khác nhau để loại bỏ một thuộc tính khỏi đối tượng JavaScript. Tìm hiểu các lựa chọn thay thế và giải pháp được đề xuất

Đặt một tài sản thành không xác định

Xóa một thuộc tính mà không làm biến đổi đối tượng

Phá hủy đối tượng là gì?

“Nghỉ ngơi trong quá trình phá hủy đối tượng

Ebook miễn phí

Tự động xóa một thuộc tính bằng khóa

Bản tóm tắt

Ebook miễn phí

Bài Viết Liên Quan

Toplist mới

Bài mới nhất

Chủ Đề