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
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
IKLAN
IKLAN
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 danjavascript
delete object.property;
2Namun, kadang-kadang, Anda perlu menghapus properti dari suatu objek. Misalnya, bagaimana Anda menghapus properti
javascript
delete object.property;
_2 dari objekjavascript
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 dihapusA) 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 objekjavascript
const employee = {
name: 'John Smith',
position: 'Sales Manager'
};
delete employee.position;
console.log(employee); // { name: 'John Smith' }
Coba demonya
Awalnya,
javascript
delete object.property;
javascript
delete object.property;
1 danjavascript
delete object.property;
2Namun setelah menerapkan operator
javascript
delete object.property;
_5 pada propertijavascript
delete object.property;
2.javascript
delete object['property'];
// or
const name = 'dynamicProperty';
delete object[name];
3, properti dihapus dari objek. Sederhana seperti ituPenghapusan properti menggunakan operator
javascript
delete object.property;
5 dapat berubah karena bermutasi (alias mengubah, memodifikasi) objek asliJika 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 variabeljavascript
delete object.property;
12. 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 denganjavascript
delete object['property'];
// or
const name = 'dynamicProperty';
delete object[name];
8, hanya tanpa properti yang dihapusMisalnya, mari kita hapus properti
javascript
delete object.property;
2 dari objekjavascript
delete object.property;
4javascript
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 merusakjavascript
delete object.property;
4 objek dan mengumpulkan properti menjadi objek lainnyajavascript
const employee = {
name: 'John Smith',
position: 'Sales Manager'
};
delete employee.position;
console.log(employee); // { name: 'John Smith' }
3 tanpa menyertakan propertijavascript
delete object.property;
2Penghancuran objek dengan sintaks istirahat adalah cara penghapusan properti yang tidak dapat diubah. objek
javascript
delete object.property;
_4 asli tidak dimutasi. Sebaliknya objek barujavascript
const employee = {
name: 'John Smith',
position: 'Sales Manager'
};
delete employee.position;
console.log(employee); // { name: 'John Smith' }
3 dibuat yang berisi semua propertijavascript
delete object.property;
4 tetapi tanpajavascript
delete object.property;
2 yang dihapusJika 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 objekjavascript
const employee = {
name: 'John Smith',
position: 'Sales Manager'
};
delete employee.position;
console.log(employee); // { name: 'John Smith' }
3Yang 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 danjavascript
const employee = {
name: 'John Smith',
position: 'Sales Manager'
};
const name = 'position';
delete employee[name];
console.log(employee); // { name: 'John Smith' }
33. 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' }
4Pendekatan 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' }
_5Tantangan 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
LanggananBergabunglah 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