Bagaimana Anda membatalkan objek dalam javascript?

Question

Pada Artikel ini kita akan membahas cara menghapus semua properti null dan undefined dari objek hanya menggunakan satu baris kode dalam JavaScript. Ini adalah cuplikan kode JavaScript satu baris yang menggunakan salah satu fitur ES6 paling populer => Arrow Function

Table of Contents Show

Hapus Properti dari Objek JS dengan Operator Hapus
Hapus Properti dari Objek JS dengan Penghancuran Objek
1. hapus operator
2. Penghancuran objek dengan sintaks istirahat
3. Kesimpulan
Posting berkualitas ke kotak masuk Anda
Bagaimana Anda membatalkan objek?
Bagaimana cara membuat objek null JavaScript?
Bagaimana Anda menghapus objek dalam JavaScript?
Bagaimana cara menghapus nilai nol dari objek di JavaScript?

Mari kita definisikan fungsi singkat ini

const removeNullUndefined = obj => Object.entries(obj).reduce((a, [k, v]) => (v == null ? a : (a[k] = v, a)), {});

const removeNullUndefined = obj => Object.entries(obj).filter(([_, v]) => v != null).reduce((acc, [k, v]) => ({ ...acc, [k]: v }), {});

_

const removeNullUndefined = obj => Object.fromEntries(Object.entries(obj).filter(([_, v]) => v != null));

Ada dua cara untuk menghapus properti dari objek JavaScript. Ada cara yang dapat diubah untuk melakukannya menggunakan operator hapus, dan cara yang tidak dapat diubah untuk melakukannya dengan menggunakan restrukturisasi objek

Mari kita bahas masing-masing metode ini dalam tutorial ini

Hapus Properti dari Objek JS dengan Operator Hapus

delete adalah instruksi JavaScript yang memungkinkan kita untuk menghapus properti dari objek JavaScript. Ada beberapa cara untuk menggunakannya

delete object.property;
delete object[‘property’];

Operator menghapus properti yang sesuai dari objek

let blog = {name: 'Wisdom Geek', author: 'Saransh Kataria'};
const propToBeDeleted = 'author';
delete blog[propToBeDeleted];
console.log(blog); // {name: 'Wisdom Geek'}

Operasi hapus memodifikasi objek asli. Ini berarti bahwa ini adalah operasi yang bisa berubah

Hapus Properti dari Objek JS dengan Penghancuran Objek

Menggunakan restrukturisasi objek dan sintaks istirahat, kita dapat mendestruktur objek dengan properti yang akan dihapus dan membuat salinan baru darinya

Setelah penghancuran, salinan baru objek dibuat dan ditugaskan ke variabel baru tanpa properti yang kami pilih untuk dihapus

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

_

Sebagai contoh

let blog = {name: 'Wisdom Geek', author: 'Saransh Kataria'};
const { author, ...blogRest } = blog;
console.log(blogRest) // {name: 'Wisdom Geek'};
console.log(blog); // {name: 'Wisdom Geek', author: 'Saransh Kataria'}

Jika kita ingin melakukan ini secara dinamis, kita bisa melakukannya

const name = 'propertToBeRemoved';
const { [name]: removedProperty, ...remainingObject } = object;

_

Dimungkinkan juga untuk menghapus beberapa properti menggunakan sintaks yang sama

Membungkus

Dan itu adalah dua cara untuk menghapus properti dari objek JavaScript. Jika Anda memiliki pertanyaan, jangan ragu untuk menghubungi saya

Baca lebih banyak posting saya di. https. // www. wisdomgeek. com

Saransh Kataria

Baca lebih banyak posting

Jika Anda membaca sejauh ini, tweet ke penulis untuk menunjukkan bahwa Anda peduli. Tweet terima kasih

Belajar kode secara gratis. Kurikulum open source freeCodeCamp telah membantu lebih dari 40.000 orang mendapatkan pekerjaan sebagai pengembang. Memulai

Variabel

javascript
delete object.property;

_0 berisi objek yang menggambarkan seorang karyawan. Objek berisi 2 properti yang menggambarkan data karyawan.

javascript
delete object.property;

1 dan

javascript
delete object.property;

2

Namun, kadang-kadang, Anda perlu menghapus properti dari suatu objek. Misalnya, bagaimana Anda menghapus properti

javascript
delete object.property;

_2 dari objek

javascript
delete object.property;

4?

Mari kita lihat 2 cara umum tentang cara menghapus properti dari objek dalam JavaScript — menggunakan operator

javascript
delete object.property;

5 (cara yang dapat diubah) dan penghancuran objek yang dikombinasikan dengan istirahat objek (cara yang tidak dapat diubah)

1. hapus operator

javascript
delete object.property;

5 adalah operator khusus dalam JavaScript yang menghapus properti dari objek. Operan tunggalnya biasanya menerima pengakses properti untuk menunjukkan properti apa yang akan dihapus

A) Hapus menggunakan accessor properti dot

javascript
delete object.property;

B) Hapus menggunakan pengakses properti tanda kurung siku

javascript
delete object['property'];
// or
const name = 'dynamicProperty';
delete object[name];

Saat menerapkan operator

javascript
delete object.property;

_5 pada pengakses properti, operator menghapus properti terkait dari objek

javascript
const employee = {
  name: 'John Smith',
  position: 'Sales Manager'
};
delete employee.position;
console.log(employee); // { name: 'John Smith' }

Coba demonya

Awalnya,

javascript
delete object.property;

_4 memiliki 2 properti.

javascript
delete object.property;

1 dan

javascript
delete object.property;

2

Namun setelah menerapkan operator

javascript
delete object.property;

_5 pada properti

javascript
delete object.property;

2.

javascript
delete object['property'];
// or
const name = 'dynamicProperty';
delete object[name];

3, properti dihapus dari objek. Sederhana seperti itu

Penghapusan properti menggunakan operator

javascript
delete object.property;

5 dapat berubah karena bermutasi (alias mengubah, memodifikasi) objek asli

Jika nama properti yang akan dihapus ditentukan secara dinamis, maka Anda dapat menggunakan sintaks tanda kurung siku

javascript
const employee = {
  name: 'John Smith',
  position: 'Sales Manager'
};
const name = 'position';
delete employee[name];
console.log(employee); // { name: 'John Smith' }

Coba demonya

javascript
delete object['property'];
// or
const name = 'dynamicProperty';
delete object[name];

5 menghapus properti yang namanya terkandung di dalam variabel

javascript
delete object.property;

1

2. Penghancuran objek dengan sintaks istirahat

Pendekatan lain untuk menghapus properti, tetapi dengan cara yang tidak dapat diubah tanpa mengubah objek aslinya, adalah dengan menggunakan the

Idenya sederhana. destruktur objek ke properti yang ingin Anda hapus, dan properti yang tersisa dikumpulkan menjadi objek istirahat

A) Nama properti diketahui

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

B) Nama properti bersifat dinamis

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

Setelah menerapkan sintaks destrukturisasi dan istirahat,

javascript
delete object['property'];
// or
const name = 'dynamicProperty';
delete object[name];

7 akan berisi properti yang sama dengan

javascript
delete object['property'];
// or
const name = 'dynamicProperty';
delete object[name];

8, hanya tanpa properti yang dihapus

Misalnya, mari kita hapus properti

javascript
delete object.property;

2 dari objek

javascript
delete object.property;

4

javascript
const employee = {
  name: 'John Smith',
  position: 'Sales Manager'
};
const { position, ...employeeRest } = employee;
console.log(employeeRest); // { name: 'John Smith' }
console.log(employee); 
// { name: 'John Smith',position: 'Sales Manager' }

Coba demonya

Pernyataan

javascript
const employee = {
  name: 'John Smith',
  position: 'Sales Manager'
};
delete employee.position;
console.log(employee); // { name: 'John Smith' }

1 merusak

javascript
delete object.property;

4 objek dan mengumpulkan properti menjadi objek lainnya

javascript
const employee = {
  name: 'John Smith',
  position: 'Sales Manager'
};
delete employee.position;
console.log(employee); // { name: 'John Smith' }

3 tanpa menyertakan properti

javascript
delete object.property;

2

Penghancuran objek dengan sintaks istirahat adalah cara penghapusan properti yang tidak dapat diubah. objek

javascript
delete object.property;

_4 asli tidak dimutasi. Sebaliknya objek baru

javascript
const employee = {
  name: 'John Smith',
  position: 'Sales Manager'
};
delete employee.position;
console.log(employee); // { name: 'John Smith' }

3 dibuat yang berisi semua properti

javascript
delete object.property;

4 tetapi tanpa

javascript
delete object.property;

2 yang dihapus

Jika nama properti yang akan dihapus ditentukan secara dinamis, maka Anda dapat menggunakan sintaks destrukturisasi nama properti dinamis

javascript
const employee = {
  name: 'John Smith',
  position: 'Sales Manager'
};
const name = 'position';
const { [name]: removedProperty, ...employeeRest } = employee;
console.log(employeeRest); // { name: 'John Smith' }

Coba demonya

javascript
const employee = {
  name: 'John Smith',
  position: 'Sales Manager'
};
delete employee.position;
console.log(employee); // { name: 'John Smith' }

9 mari kita hapus properti dengan nama dinamis dengan mengumpulkan properti, tetapi menghapus satu, menjadi objek

javascript
const employee = {
  name: 'John Smith',
  position: 'Sales Manager'
};
delete employee.position;
console.log(employee); // { name: 'John Smith' }

3

Yang menarik adalah Anda dapat menghapus beberapa properti sekaligus menggunakan sintaks destrukturisasi dan istirahat

javascript
const employee = {
  name: 'John Smith',
  position: 'Sales Manager',
  experience: 6, // years
};
const { position, experience, ...employeeRest } = employee;
console.log(employeeRest); // { name: 'John Smith' }

Coba demonya

javascript
const employee = {
  name: 'John Smith',
  position: 'Sales Manager'
};
const name = 'position';



delete employee[name];
console.log(employee); // { name: 'John Smith' }

_1 telah menghapus 2 properti sekaligus.

javascript
delete object.property;

2 dan

javascript
const employee = {
  name: 'John Smith',
  position: 'Sales Manager'
};
const name = 'position';
delete employee[name];
console.log(employee); // { name: 'John Smith' }

3

3. Kesimpulan

Dalam JavaScript, ada 2 cara umum untuk menghapus properti dari suatu objek

Pendekatan pertama yang dapat diubah adalah menggunakan operator

javascript
const employee = {
  name: 'John Smith',
  position: 'Sales Manager'
};
const name = 'position';
delete employee[name];
console.log(employee); // { name: 'John Smith' }

4

Pendekatan kedua, yang tidak dapat diubah karena tidak mengubah objek aslinya, adalah dengan memanggil penghancuran objek dan menyebarkan sintaks.

javascript
const employee = {
  name: 'John Smith',
  position: 'Sales Manager'
};
const name = 'position';
delete employee[name];
console.log(employee); // { name: 'John Smith' }

_5

Tantangan sampingan. berapa kompleksitas waktu dari penghapusan properti menggunakan

javascript
delete object.property;

5 dan sintaks istirahat objek?

Suka postingannya?

Sarankan Perbaikan

Posting berkualitas ke kotak masuk Anda

Saya secara teratur menerbitkan posting yang berisi

Konsep penting JavaScript dijelaskan dengan kata-kata sederhana
Ikhtisar fitur JavaScript baru
Cara menggunakan TypeScript dan mengetik
Desain perangkat lunak dan praktik pengkodean yang baik

Berlangganan buletin saya untuk mengirimkannya langsung ke kotak masuk Anda

Langganan

Bergabunglah dengan 6887 pelanggan lainnya

Tentang Dmitri Pavlutin

Penulis dan pelatih teknologi. Rutinitas harian saya terdiri dari (namun tidak terbatas) minum kopi, coding, menulis, coaching, mengatasi kebosanan 😉

Sekarang bekerja sebagai pengembang open source penuh waktu pada proyek Readapt - bertujuan untuk membuat web dapat diakses oleh semua orang

Bagaimana Anda membatalkan objek?

Untuk menyetel nilai objek ke null, Anda perlu mendapatkan semua kunci dari objek dan perlu menyetel null . Anda dapat menggunakan for loop atau forEach() loop.

Bagaimana cara membuat objek null JavaScript?

Untuk menyetel semua nilai dalam objek ke null , teruskan objek ke Objek. keys() metode untuk mendapatkan larik kunci objek dan menggunakan metode forEach() untuk mengulangi larik, menyetel setiap nilai ke null . Setelah iterasi terakhir, objek hanya akan berisi nilai null.

Bagaimana Anda menghapus objek dalam JavaScript?

Ada tiga cara yang dapat digunakan untuk menghapus properti apa pun dari objek dengan mudah. Cara pertama adalah menggunakan operator khusus di JavaScript yang disebut operator delete , cara kedua menggunakan Object Destructuring dan yang ketiga menggunakan Reflect. metode deleteProperty().