Bagaimana Anda menghapus properti dari objek javascript?

Anda memiliki objek dengan beberapa properti dan Anda ingin menghapus beberapa properti ini sebelum menggunakan objek lebih lanjut

let person = { firstName: "John", lastName: "Doe", gender: "Male", age: 34 }; const json = JSON.stringify(person); console.log(json); // => {"firstName":"John","lastName":"Doe","gender":"Male","age":34} // What can we do if we don't want the `age` property in the JSON string? -->

Di sini string JSON juga berisi properti age. Namun, Anda akan mengirimkan string melalui jaringan, dan server di ujung lainnya tidak akan menggunakan properti age. Jadi, Anda ingin menghapus properti age_ dari objek person sebelum mengubahnya menjadi string JSON

Solusinya

Anda dapat menggunakan operator delete, yang lebih sederhana, atau penghancuran objek, yang dapat menghapus lebih dari satu properti sekaligus

Menggunakan operator delete

Gunakan operator delete_ untuk menghapus properti dari objek

let person = { firstName: "John", lastName: "Doe", gender: "Male", age: 34 }; // Delete the age property first delete person.age; let json = JSON.stringify(person); console.log(json); _

Operator delete akan kembali jika berhasil dan selalu mengembalikan let person = { firstName: "John", lastName: "Doe", gender: "Male", age: 34 }; // Delete the age property first delete person.age; let json = JSON.stringify(person); console.log(json); 1 - bahkan ketika properti tidak ada. Panggilan hanya akan mengembalikan let person = { firstName: "John", lastName: "Doe", gender: "Male", age: 34 }; // Delete the age property first delete person.age; let json = JSON.stringify(person); console.log(json); 2 ketika properti tidak dapat dikonfigurasi - yang merupakan kasus untuk properti pada objek bawaan seperti let person = { firstName: "John", lastName: "Doe", gender: "Male", age: 34 }; // Delete the age property first delete person.age; let json = JSON.stringify(person); console.log(json); 3 dari let person = { firstName: "John", lastName: "Doe", gender: "Male", age: 34 }; // Delete the age property first delete person.age; let json = JSON.stringify(person); console.log(json); 4

Menggunakan penghancuran objek

Operator delete hanya dapat menghapus satu properti per panggilan. Jadi jika Anda ingin menghapus properti age dan let person = { firstName: "John", lastName: "Doe", gender: "Male", age: 34 }; // Delete the age property first delete person.age; let json = JSON.stringify(person); console.log(json); 7, maka Anda harus melakukan dua panggilan delete. Sebagai alternatif, Anda dapat menggunakan penghancuran objek untuk menghapus beberapa properti dengan satu panggilan

const person = { firstName: "John", lastName: "Doe", gender: "Male", age: 34 }; // Destructure the age and gender const {age, gender, ...personTrimmed} = person; const json = JSON.stringify(personTrimmed); console.log(json);

Perhatikan bahwa destrukturisasi secara signifikan lebih lambat daripada operator delete karena membuat salinan objek baru dari objek asli. Destrukturisasi juga tidak didukung oleh versi IE mana pun

Cara termudah untuk menghapus properti dari objek di JavaScript adalah dengan menggunakan operator delete person.age;2

delete objectName.propertyName;_

Misalnya, jika Anda memiliki objek bernama delete person.age;3 dengan properti delete person.age;4, Anda dapat menghapus delete person.age;4 seperti ini

delete person.age;_

Setelah Anda menjalankan kode ini, objek delete person.age;_3 tidak akan lagi memiliki properti delete person.age;4. Perhatikan bahwa ini hanya akan menghapus properti dari objek;

Anda juga dapat menggunakan operator akses tanda kurung siku untuk menghapus properti objek

delete obj[prop];

Panduan ini menunjukkan cara paling umum untuk menghapus properti dari objek. Jika jawaban di atas sudah cukup, jangan ragu untuk berhenti membaca. Tetapi untuk menjelajahi JavaScript dan mempelajari metode dan fitur yang berguna, saya sarankan Anda terus membaca postingannya. Di akhir panduan ini, Anda akan mempelajari cara mencegah properti dihapus juga

Mari lompat ke dalamnya

1. Operator 'hapus'

Dalam JavaScript, operator delete person.age;_2 menghapus properti dari objek. Lebih khusus lagi, menghapus properti dan nilainya dan mengembalikan delete person.age;9 jika properti berhasil dihapus

Sebagai contoh

// Define an object with some properties var myObject = { property1: "Hello", property2: "World" }; // Delete the property2 property from the object delete myObject.property2; // Print the object to see the result console.log(myObject);

Keluaran

{ property1: 'Hello' }

Di sini operator delete person.age;_2 menghapus delete obj[prop];1 dari delete obj[prop];2. Setelah operator delete person.age;_2 selesai, objek tidak lagi memiliki properti delete obj[prop];1 dan nilainya akan menjadi delete obj[prop];5

Perhatikan bahwa cara lain untuk menghapus properti dengan operator hapus adalah dengan menggunakan tanda kurung siku untuk mengakses properti

Misalnya, mari kita ulangi contoh di atas tetapi gunakan delete obj[prop];6 alih-alih delete obj[prop];7

var myObject = { property1: "Hello", property2: "World" }; // Delete the property2 property from the object delete myObject['property2']; console.log(myObject);

2. .. Operator

Operator JavaScript populer lainnya yang mungkin Anda kenal disebut operator penyebaran atau operator "tiga titik" (delete obj[prop];8)

Dalam arti tertentu, Anda dapat menggunakan operator ini untuk menghapus properti dari objek. Pada kenyataannya, itu hanya membuat objek baru yang tidak memiliki properti yang Anda 'hapus'

Jadi untuk menghapus properti dari objek menggunakan operator spread, buat objek baru yang berisi semua properti dari objek asli kecuali properti yang ingin Anda hapus

Misalnya, mari kita hapus ________16______9 dari objek dengan tiga properti

const obj = { prop1: 'value1', prop2: 'value2', prop3: 'value3' }; // Create a new object with all of the properties of `obj` except `prop2` const newObj = { ...obj, prop2: undefined }; console.log(newObj); // Output: { prop1: 'value1', prop3: 'value3' }

Dalam kode ini

1. Anda membuat objek // Define an object with some properties var myObject = { property1: "Hello", property2: "World" }; // Delete the property2 property from the object delete myObject.property2; // Print the object to see the result console.log(myObject); _0 yang memiliki tiga properti. // Define an object with some properties var myObject = { property1: "Hello", property2: "World" }; // Delete the property2 property from the object delete myObject.property2; // Print the object to see the result console.log(myObject); 1, delete obj[prop];9, dan // Define an object with some properties var myObject = { property1: "Hello", property2: "World" }; // Delete the property2 property from the object delete myObject.property2; // Print the object to see the result console.log(myObject); 3
2. Anda kemudian membuat objek baru bernama // Define an object with some properties var myObject = { property1: "Hello", property2: "World" }; // Delete the property2 property from the object delete myObject.property2; // Print the object to see the result console.log(myObject); _4 yang berisi semua properti // Define an object with some properties var myObject = { property1: "Hello", property2: "World" }; // Delete the property2 property from the object delete myObject.property2; // Print the object to see the result console.log(myObject); 0 kecuali delete obj[prop];9

Langkah terakhir terjadi dengan menggunakan sintaks spread (// Define an object with some properties var myObject = { property1: "Hello", property2: "World" }; // Delete the property2 property from the object delete myObject.property2; // Print the object to see the result console.log(myObject); 7). Saat digunakan dengan cara ini, itu hanya membuat ulang objek baru yang menyertakan semua properti asli // Define an object with some properties var myObject = { property1: "Hello", property2: "World" }; // Delete the property2 property from the object delete myObject.property2; // Print the object to see the result console.log(myObject); 0. Kemudian Anda mengatur delete obj[prop];_9 ke delete obj[prop];5 di objek baru yang secara efektif menghapusnya dari objek yang baru dibuat

Perhatikan bahwa metode ini hanya membuat objek baru dengan properti yang Anda inginkan. Itu tidak mengubah objek aslinya. Untuk benar-benar menghapus properti dari objek sehingga Anda memodifikasi objek aslinya, gunakan operator delete person.age;2

const obj = { prop1: 'value1', prop2: 'value2', prop3: 'value3' }; // Remove the `prop2` property from `obj` delete obj.prop2; console.log(obj); // Output: { prop1: 'value1', prop3: 'value3' }

3. Mencerminkan. metode deleteProperty()

Objek { property1: 'Hello' }_2 dalam JavaScript adalah objek bawaan yang menyediakan metode untuk operasi JavaScript yang dapat dicegat. Mirip dengan { property1: 'Hello' }_3, tetapi tidak memungkinkan Anda menentukan perilaku khusus untuk operasi individual

Untuk menghapus properti dari objek menggunakan metode { property1: 'Hello' }4, Anda dapat menggunakan sintaks berikut

Reflect.deleteProperty(object, propertyName);

Di sini, { property1: 'Hello' }5 adalah objek yang ingin Anda hapus propertinya, dan { property1: 'Hello' }6 adalah string yang menentukan nama properti yang akan dihapus. Metode ini mengembalikan delete person.age;9 jika properti berhasil dihapus, atau { property1: 'Hello' }8 jika properti tidak dapat dihapus (misalnya, jika tidak dapat dikonfigurasi)

Berikut adalah contoh bagaimana Anda dapat menggunakan metode ini untuk menghapus properti dari objek

// Define an object with a property that we want to delete const obj = { name: "John Doe", age: 15 }; // Delete the "name" property from the object const result = Reflect.deleteProperty(obj, "name"); // Print the result of the operation console.log(result); // true console.log(obj); // { age: 15 }

Dalam contoh ini, metode { property1: 'Hello' }_4 menghapus properti var myObject = { property1: "Hello", property2: "World" }; // Delete the property2 property from the object delete myObject['property2']; console.log(myObject);0 dari objek // Define an object with some properties var myObject = { property1: "Hello", property2: "World" }; // Delete the property2 property from the object delete myObject.property2; // Print the object to see the result console.log(myObject); 0, dan variabel var myObject = { property1: "Hello", property2: "World" }; // Delete the property2 property from the object delete myObject['property2']; console.log(myObject);2 diatur ke delete person.age;9 untuk menunjukkan bahwa properti berhasil dihapus

Bagaimana Mencegah Properti Dihapus?

Anda mungkin perlu mengetahui bahwa JavaScript juga memungkinkan Anda mengonfigurasi objek sedemikian rupa sehingga Anda tidak dapat menghapus properti tertentu

Untuk melakukan ini, gunakan metode var myObject = { property1: "Hello", property2: "World" }; // Delete the property2 property from the object delete myObject['property2']; console.log(myObject);_4, yang memungkinkan Anda untuk menentukan atau mengubah properti objek. Anda dapat menggunakan metode ini untuk menyetel properti var myObject = { property1: "Hello", property2: "World" }; // Delete the property2 property from the object delete myObject['property2']; console.log(myObject);5 dari properti ke { property1: 'Hello' }8, yang mencegah properti dihapus

Misalnya, mari kita mencegah properti var myObject = { property1: "Hello", property2: "World" }; // Delete the property2 property from the object delete myObject['property2']; console.log(myObject);_0 dihapus dari objek berikut

delete person.age;_0

Seperti yang Anda lihat, menghapus properti var myObject = { property1: "Hello", property2: "World" }; // Delete the property2 property from the object delete myObject['property2']; console.log(myObject);0 tidak mungkin lagi. Ini karena batasan yang kami tempatkan pada objek

Bagaimana cara menghapus properti dari objek?

Bagaimana cara menghapus kunci dari suatu objek di JavaScript?

Bagaimana cara menghapus properti?