Objek JavaScript adalah cara terbaik untuk menyimpan dan mengambil data dalam format properti kunci. Mereka memungkinkan Anda untuk menyimpan variabel, array, tanggal, fungsi, dan bahkan referensi di tempat. Terkadang Anda mungkin perlu menghapus kunci tertentu dari objek JS. Pada artikel ini, kita akan mempelajari cara menghapus kunci dari Objek JavaScript
Cara Menghapus Kunci dari Objek JavaScript
Anda dapat dengan mudah menghapus kunci dari Objek JavaScript menggunakan pernyataan hapus. Berikut adalah sintaks untuk itu
delete object.keyname; or delete object["keyname"];Katakanlah Anda memiliki objek berikut dalam JavaScript
var thisIsObject= { 'Cow' : 'Moo', 'Cat' : 'Meow', 'Dog' : 'Bark' };_Katakanlah Anda ingin menghapus kunci 'Sapi' dari objek JS Anda
Berikut adalah berbagai perintah untuk melakukan ini. Semuanya menghasilkan penghapusan kunci yang ditentukan serta nilai propertinya. Satu-satunya cara untuk menghapus kunci dari objek JS adalah menghapus propertinya menggunakan perintah hapus
// Example 1 var key = "Cow"; delete thisIsObject[key]; // Example 2 delete thisIsObject["Cow"]; // Example 3 delete thisIsObject.Cow;Pada contoh pertama, kami menetapkan kunci yang akan dihapus ke variabel, meneruskannya ke nama objek untuk mengambil propertinya. Kami menggunakan perintah delete untuk menghapusnya. Ini berguna jika nama kunci Anda ada dalam variabel. Ini juga berguna jika Anda ingin mengulang elemen objek dan menghapus beberapa kunci satu demi satu
Dalam contoh kedua, kami meneruskan nilai kunci literal untuk mengambil properti dan dalam contoh ketiga kami menggunakan notasi titik untuk mengakses dan menghapus propertinya
Pada artikel ini, kami telah mempelajari beberapa cara berbeda untuk menghapus kunci dari objek JS. Anda dapat menggunakan salah satu dari mereka sesuai kebutuhan Anda
Dengan mendestruktur objek dan menggunakan sintaks sisanya, objek baru dapat dibuat dengan semua properti dari objek asli kecuali beberapa. Ini adalah operasi yang tidak dapat diubah, dan objek aslinya dibiarkan tidak berubah
Operator delete identifier; delete object.#privateProperty; _1 menghapus properti dari objek. Jika nilai properti adalah objek dan tidak ada lagi referensi ke objek tersebut, objek yang dipegang oleh properti tersebut pada akhirnya akan dirilis secara otomatis
delete object.property delete object[property] _
Catatan. Sintaks memungkinkan rentang ekspresi yang lebih luas mengikuti operator delete identifier; delete object.#privateProperty; 1, tetapi hanya bentuk di atas yang mengarah ke perilaku yang bermakna
delete identifier; delete object.#privateProperty; _3
Nama objek, atau ekspresi yang mengevaluasi objek
delete identifier; delete object.#privateProperty; _4Properti yang akan dihapus
delete identifier; delete object.#privateProperty; 5 untuk semua kasus kecuali bila properti adalah properti sendiri, dalam hal ini delete identifier; delete object.#privateProperty; 6 dikembalikan dalam mode tidak ketat
delete identifier; delete object.#privateProperty; _7
Dilemparkan dalam mode ketat jika properti adalah properti yang tidak dapat dikonfigurasi sendiri
delete identifier; delete object.#privateProperty; 8Dilempar jika delete identifier; delete object.#privateProperty; 3 adalah delete console.log(1); // Logs 1, returns true, but nothing deleted 0
Operator delete identifier; delete object.#privateProperty; _1 memiliki prioritas yang sama dengan operator unary lainnya seperti delete console.log(1); // Logs 1, returns true, but nothing deleted 2. Oleh karena itu, ia menerima ekspresi apa pun yang dibentuk oleh operator dengan prioritas lebih tinggi. Namun, formulir berikut menyebabkan kesalahan sintaksis awal dalam mode ketat
delete identifier; delete object.#privateProperty;
Karena kelas secara otomatis dalam mode ketat, dan properti pribadi hanya dapat dirujuk secara legal di badan kelas, ini berarti properti pribadi tidak akan pernah bisa dihapus. Sementara delete console.log(1); // Logs 1, returns true, but nothing deleted _3 jika delete console.log(1); // Logs 1, returns true, but nothing deleted 4 mengacu pada properti yang dapat dikonfigurasi dari objek global, Anda harus menghindari formulir ini dan mengawalinya dengan delete console.log(1); // Logs 1, returns true, but nothing deleted 5 sebagai gantinya
Sementara ekspresi lain diterima, mereka tidak mengarah pada perilaku yang bermakna
delete console.log(1); // Logs 1, returns true, but nothing deleted
Operator delete identifier; delete object.#privateProperty; _1 menghapus properti tertentu dari objek. Jika penghapusan berhasil, itu akan mengembalikan delete identifier; delete object.#privateProperty; 5, jika tidak delete identifier; delete object.#privateProperty; 6 akan dikembalikan. Tidak seperti yang disarankan oleh kepercayaan umum (mungkin karena bahasa pemrograman lain seperti hapus di C++), operator delete identifier; delete object.#privateProperty; 1 tidak ada hubungannya dengan membebaskan memori secara langsung. Manajemen memori dilakukan secara tidak langsung melalui referensi pemutusan. Lihat halaman manajemen memori untuk detail lebih lanjut
Penting untuk mempertimbangkan skenario berikut
- Jika properti yang Anda coba hapus tidak ada, delete identifier; delete object.#privateProperty; 1 tidak akan berpengaruh dan akan mengembalikan delete identifier; delete object.#privateProperty; 5
- delete identifier; delete object.#privateProperty; 1 hanya berpengaruh pada properti sendiri. Jika properti dengan nama yang sama ada di rantai prototipe objek, maka setelah penghapusan, objek akan menggunakan properti dari rantai prototipe
- Properti yang tidak dapat dikonfigurasi tidak dapat dihapus. Ini termasuk properti dari objek bawaan seperti // Creates the property empCount on the global scope. // Since we are using var, this is marked as non-configurable. var empCount = 43; // Creates the property adminName on the global scope. // Since it was defined without "var", it is marked configurable. EmployeeDetails = { name: "xyz", age: 5, designation: "Developer", }; // delete can be used to remove properties from objects. delete EmployeeDetails.name; // returns true // Even when the property does not exist, delete returns "true". delete EmployeeDetails.salary; // returns true // EmployeeDetails is a property of the global scope. delete EmployeeDetails; // returns true // On the contrary, empCount is not configurable // since var was used. delete empCount; // returns false // delete also does not affect built-in static properties // that are non-configurable. delete Math.PI; // returns false function f() { var z = 44; // delete doesn't affect local variable names delete z; // returns false } 3, // Creates the property empCount on the global scope. // Since we are using var, this is marked as non-configurable. var empCount = 43; // Creates the property adminName on the global scope. // Since it was defined without "var", it is marked configurable. EmployeeDetails = { name: "xyz", age: 5, designation: "Developer", }; // delete can be used to remove properties from objects. delete EmployeeDetails.name; // returns true // Even when the property does not exist, delete returns "true". delete EmployeeDetails.salary; // returns true // EmployeeDetails is a property of the global scope. delete EmployeeDetails; // returns true // On the contrary, empCount is not configurable // since var was used. delete empCount; // returns false // delete also does not affect built-in static properties // that are non-configurable. delete Math.PI; // returns false function f() { var z = 44; // delete doesn't affect local variable names delete z; // returns false } 4, // Creates the property empCount on the global scope. // Since we are using var, this is marked as non-configurable. var empCount = 43; // Creates the property adminName on the global scope. // Since it was defined without "var", it is marked configurable. EmployeeDetails = { name: "xyz", age: 5, designation: "Developer", }; // delete can be used to remove properties from objects. delete EmployeeDetails.name; // returns true // Even when the property does not exist, delete returns "true". delete EmployeeDetails.salary; // returns true // EmployeeDetails is a property of the global scope. delete EmployeeDetails; // returns true // On the contrary, empCount is not configurable // since var was used. delete empCount; // returns false // delete also does not affect built-in static properties // that are non-configurable. delete Math.PI; // returns false function f() { var z = 44; // delete doesn't affect local variable names delete z; // returns false } 5 dan properti yang dibuat sebagai tidak dapat dikonfigurasi dengan metode seperti // Creates the property empCount on the global scope. // Since we are using var, this is marked as non-configurable. var empCount = 43; // Creates the property adminName on the global scope. // Since it was defined without "var", it is marked configurable. EmployeeDetails = { name: "xyz", age: 5, designation: "Developer", }; // delete can be used to remove properties from objects. delete EmployeeDetails.name; // returns true // Even when the property does not exist, delete returns "true". delete EmployeeDetails.salary; // returns true // EmployeeDetails is a property of the global scope. delete EmployeeDetails; // returns true // On the contrary, empCount is not configurable // since var was used. delete empCount; // returns false // delete also does not affect built-in static properties // that are non-configurable. delete Math.PI; // returns false function f() { var z = 44; // delete doesn't affect local variable names delete z; // returns false } 6
- Menghapus variabel, termasuk parameter fungsi, tidak pernah berhasil. // Creates the property empCount on the global scope.
// Since we are using var, this is marked as non-configurable.
var empCount = 43;
// Creates the property adminName on the global scope.
// Since it was defined without "var", it is marked configurable.
EmployeeDetails = {
name: "xyz",
age: 5,
designation: "Developer",
};
// delete can be used to remove properties from objects.
delete EmployeeDetails.name; // returns true
// Even when the property does not exist, delete returns "true".
delete EmployeeDetails.salary; // returns true
// EmployeeDetails is a property of the global scope.
delete EmployeeDetails; // returns true
// On the contrary, empCount is not configurable
// since var was used.
delete empCount; // returns false
// delete also does not affect built-in static properties
// that are non-configurable.
delete Math.PI; // returns false
function f() {
var z = 44;
// delete doesn't affect local variable names
delete z; // returns false
}
7 akan melempar // Creates the property empCount on the global scope.
// Since we are using var, this is marked as non-configurable.
var empCount = 43;
// Creates the property adminName on the global scope.
// Since it was defined without "var", it is marked configurable.
EmployeeDetails = {
name: "xyz",
age: 5,
designation: "Developer",
};
// delete can be used to remove properties from objects.
delete EmployeeDetails.name; // returns true
// Even when the property does not exist, delete returns "true".
delete EmployeeDetails.salary; // returns true
// EmployeeDetails is a property of the global scope.
delete EmployeeDetails; // returns true
// On the contrary, empCount is not configurable
// since var was used.
delete empCount; // returns false
// delete also does not affect built-in static properties
// that are non-configurable.
delete Math.PI; // returns false
function f() {
var z = 44;
// delete doesn't affect local variable names
delete z; // returns false
}
8 dalam mode ketat, dan tidak akan berpengaruh dalam mode non-ketat
- Variabel apa pun yang dideklarasikan dengan // Creates the property empCount on the global scope. // Since we are using var, this is marked as non-configurable. var empCount = 43; // Creates the property adminName on the global scope. // Since it was defined without "var", it is marked configurable. EmployeeDetails = { name: "xyz", age: 5, designation: "Developer", }; // delete can be used to remove properties from objects. delete EmployeeDetails.name; // returns true // Even when the property does not exist, delete returns "true". delete EmployeeDetails.salary; // returns true // EmployeeDetails is a property of the global scope. delete EmployeeDetails; // returns true // On the contrary, empCount is not configurable // since var was used. delete empCount; // returns false // delete also does not affect built-in static properties // that are non-configurable. delete Math.PI; // returns false function f() { var z = 44; // delete doesn't affect local variable names delete z; // returns false } _9 tidak dapat dihapus dari lingkup global atau dari lingkup fungsi, karena meskipun dapat dilampirkan ke objek global, variabel tersebut tidak dapat dikonfigurasi
- Variabel apa pun yang dideklarasikan dengan function Foo() { this.bar = 10; } Foo.prototype.bar = 42; const foo = new Foo(); // foo.bar is associated with the // own property. console.log(foo.bar); // 10 // Delete the own property within the // foo object. delete foo.bar; // returns true // foo.bar is still available in the // prototype chain. console.log(foo.bar); // 42 // Delete the property on the prototype. delete Foo.prototype.bar; // returns true // The "bar" property can no longer be // inherited from Foo since it has been // deleted. console.log(foo.bar); // undefined 0 atau function Foo() { this.bar = 10; } Foo.prototype.bar = 42; const foo = new Foo(); // foo.bar is associated with the // own property. console.log(foo.bar); // 10 // Delete the own property within the // foo object. delete foo.bar; // returns true // foo.bar is still available in the // prototype chain. console.log(foo.bar); // 42 // Delete the property on the prototype. delete Foo.prototype.bar; // returns true // The "bar" property can no longer be // inherited from Foo since it has been // deleted. console.log(foo.bar); // undefined 1 tidak dapat dihapus dari ruang lingkup di mana mereka didefinisikan, karena mereka tidak melekat pada suatu objek
Seperti spesifikasi ECMAScript modern, urutan traversal properti objek didefinisikan dengan baik dan stabil di seluruh implementasi. Namun, dalam kasus Internet Explorer, ketika seseorang menggunakan delete identifier; delete object.#privateProperty; 1 pada properti, beberapa hasil perilaku membingungkan, mencegah browser lain menggunakan objek sederhana seperti literal objek sebagai array asosiatif yang dipesan. Di Explorer, sementara nilai properti memang disetel ke function Foo() { this.bar = 10; } Foo.prototype.bar = 42; const foo = new Foo(); // foo.bar is associated with the // own property. console.log(foo.bar); // 10 // Delete the own property within the // foo object. delete foo.bar; // returns true // foo.bar is still available in the // prototype chain. console.log(foo.bar); // 42 // Delete the property on the prototype. delete Foo.prototype.bar; // returns true // The "bar" property can no longer be // inherited from Foo since it has been // deleted. console.log(foo.bar); // undefined 3, jika nanti menambahkan kembali properti dengan nama yang sama, properti akan diulang di posisi lamanya — bukan di akhir urutan iterasi seperti yang diharapkan setelah dihapus
Jika Anda ingin menggunakan larik asosiatif terurut dengan dukungan runtime lama, gunakan objek function Foo() { this.bar = 10; } Foo.prototype.bar = 42; const foo = new Foo(); // foo.bar is associated with the // own property. console.log(foo.bar); // 10 // Delete the own property within the // foo object. delete foo.bar; // returns true // foo.bar is still available in the // prototype chain. console.log(foo.bar); // 42 // Delete the property on the prototype. delete Foo.prototype.bar; // returns true // The "bar" property can no longer be // inherited from Foo since it has been // deleted. console.log(foo.bar); // undefined 4 jika tersedia (melalui polyfill, misalnya), atau simulasikan struktur ini dengan dua larik terpisah (satu untuk kunci dan yang lainnya untuk nilai)
Catatan. Contoh berikut menggunakan fitur mode non-ketat saja, seperti membuat variabel global secara implisit dan menghapus pengidentifikasi, yang dilarang dalam mode ketat
// Creates the property empCount on the global scope. // Since we are using var, this is marked as non-configurable. var empCount = 43; // Creates the property adminName on the global scope. // Since it was defined without "var", it is marked configurable. EmployeeDetails = { name: "xyz", age: 5, designation: "Developer", }; // delete can be used to remove properties from objects. delete EmployeeDetails.name; // returns true // Even when the property does not exist, delete returns "true". delete EmployeeDetails.salary; // returns true // EmployeeDetails is a property of the global scope. delete EmployeeDetails; // returns true // On the contrary, empCount is not configurable // since var was used. delete empCount; // returns false // delete also does not affect built-in static properties // that are non-configurable. delete Math.PI; // returns false function f() { var z = 44; // delete doesn't affect local variable names delete z; // returns false }
Dalam contoh berikut, kami menghapus properti objek sendiri sementara properti dengan nama yang sama tersedia di rantai prototipe
function Foo() { this.bar = 10; } Foo.prototype.bar = 42; const foo = new Foo(); // foo.bar is associated with the // own property. console.log(foo.bar); // 10 // Delete the own property within the // foo object. delete foo.bar; // returns true // foo.bar is still available in the // prototype chain. console.log(foo.bar); // 42 // Delete the property on the prototype. delete Foo.prototype.bar; // returns true // The "bar" property can no longer be // inherited from Foo since it has been // deleted. console.log(foo.bar); // undefined
Saat Anda menghapus elemen larik, larik function Foo() { this.bar = 10; } Foo.prototype.bar = 42; const foo = new Foo(); // foo.bar is associated with the // own property. console.log(foo.bar); // 10 // Delete the own property within the // foo object. delete foo.bar; // returns true // foo.bar is still available in the // prototype chain. console.log(foo.bar); // 42 // Delete the property on the prototype. delete Foo.prototype.bar; // returns true // The "bar" property can no longer be // inherited from Foo since it has been // deleted. console.log(foo.bar); // undefined 5 tidak terpengaruh. Ini berlaku bahkan jika Anda menghapus elemen terakhir dari array
Saat operator delete identifier; delete object.#privateProperty; _1 menghapus elemen larik, elemen tersebut tidak lagi ada dalam larik. Dalam contoh berikut, function Foo() { this.bar = 10; } Foo.prototype.bar = 42; const foo = new Foo(); // foo.bar is associated with the // own property. console.log(foo.bar); // 10 // Delete the own property within the // foo object. delete foo.bar; // returns true // foo.bar is still available in the // prototype chain. console.log(foo.bar); // 42 // Delete the property on the prototype. delete Foo.prototype.bar; // returns true // The "bar" property can no longer be // inherited from Foo since it has been // deleted. console.log(foo.bar); // undefined _7 dihapus dengan delete identifier; delete object.#privateProperty; 1
const trees = ["redwood", "bay", "cedar", "oak", "maple"]; delete trees[3]; console.log(3 in trees); // false
Ini menciptakan a dengan slot kosong. Jika Anda ingin elemen array ada tetapi memiliki nilai yang tidak ditentukan, gunakan nilai function Foo() { this.bar = 10; } Foo.prototype.bar = 42; const foo = new Foo(); // foo.bar is associated with the // own property. console.log(foo.bar); // 10 // Delete the own property within the // foo object. delete foo.bar; // returns true // foo.bar is still available in the // prototype chain. console.log(foo.bar); // 42 // Delete the property on the prototype. delete Foo.prototype.bar; // returns true // The "bar" property can no longer be // inherited from Foo since it has been // deleted. console.log(foo.bar); // undefined 3 alih-alih operator delete identifier; delete object.#privateProperty; 1. Dalam contoh berikut, function Foo() { this.bar = 10; } Foo.prototype.bar = 42; const foo = new Foo(); // foo.bar is associated with the // own property. console.log(foo.bar); // 10 // Delete the own property within the // foo object. delete foo.bar; // returns true // foo.bar is still available in the // prototype chain. console.log(foo.bar); // 42 // Delete the property on the prototype. delete Foo.prototype.bar; // returns true // The "bar" property can no longer be // inherited from Foo since it has been // deleted. console.log(foo.bar); // undefined _7 diberi nilai function Foo() { this.bar = 10; } Foo.prototype.bar = 42; const foo = new Foo(); // foo.bar is associated with the // own property. console.log(foo.bar); // 10 // Delete the own property within the // foo object. delete foo.bar; // returns true // foo.bar is still available in the // prototype chain. console.log(foo.bar); // 42 // Delete the property on the prototype. delete Foo.prototype.bar; // returns true // The "bar" property can no longer be // inherited from Foo since it has been // deleted. console.log(foo.bar); // undefined 3, tetapi elemen array masih ada
const trees = ["redwood", "bay", "cedar", "oak", "maple"]; trees[3] = undefined; console.log(3 in trees); // true
Jika sebaliknya, Anda ingin menghapus elemen array dengan mengubah isi array, gunakan metode const trees = ["redwood", "bay", "cedar", "oak", "maple"]; delete trees[3]; console.log(3 in trees); // false 3. Dalam contoh berikut, function Foo() { this.bar = 10; } Foo.prototype.bar = 42; const foo = new Foo(); // foo.bar is associated with the // own property. console.log(foo.bar); // 10 // Delete the own property within the // foo object. delete foo.bar; // returns true // foo.bar is still available in the // prototype chain. console.log(foo.bar); // 42 // Delete the property on the prototype. delete Foo.prototype.bar; // returns true // The "bar" property can no longer be // inherited from Foo since it has been // deleted. console.log(foo.bar); // undefined _7 dihapus sepenuhnya dari array menggunakan const trees = ["redwood", "bay", "cedar", "oak", "maple"]; delete trees[3]; console.log(3 in trees); // false 3
const trees = ["redwood", "bay", "cedar", "oak", "maple"]; trees.splice(3, 1); console.log(trees); // ["redwood", "bay", "cedar", "maple"]
Ketika properti ditandai sebagai tidak dapat dikonfigurasi, delete identifier; delete object.#privateProperty; 1 tidak akan berpengaruh, dan akan mengembalikan delete identifier; delete object.#privateProperty; 6. Dalam mode ketat, ini akan menaikkan delete identifier; delete object.#privateProperty; 7
const Employee = {}; Object.defineProperty(Employee, "name", { configurable: false }); console.log(delete Employee.name); // returns false
// Creates the property empCount on the global scope. // Since we are using var, this is marked as non-configurable. var empCount = 43; // Creates the property adminName on the global scope. // Since it was defined without "var", it is marked configurable. EmployeeDetails = { name: "xyz", age: 5, designation: "Developer", }; // delete can be used to remove properties from objects. delete EmployeeDetails.name; // returns true // Even when the property does not exist, delete returns "true". delete EmployeeDetails.salary; // returns true // EmployeeDetails is a property of the global scope. delete EmployeeDetails; // returns true // On the contrary, empCount is not configurable // since var was used. delete empCount; // returns false // delete also does not affect built-in static properties // that are non-configurable. delete Math.PI; // returns false function f() { var z = 44; // delete doesn't affect local variable names delete z; // returns false } 9 membuat properti yang tidak dapat dikonfigurasi yang tidak dapat dihapus dengan operator delete identifier; delete object.#privateProperty; 1
// Since "nameOther" is added using with the // var keyword, it is marked as non-configurable var nameOther = "XYZ"; // We can access this global property using: Object.getOwnPropertyDescriptor(globalThis, "nameOther"); // { // value: "XYZ", // writable: true, // enumerable: true, // configurable: false // } delete globalThis.nameOther; // return false
Dalam mode ketat, ini akan menimbulkan pengecualian
Jika properti global dapat dikonfigurasi (misalnya, melalui penugasan properti langsung), itu dapat dihapus, dan referensi selanjutnya sebagai variabel global akan menghasilkan delete identifier; delete object.#privateProperty; 8