Bagaimana Anda akan menghapus properti objek dalam javascript?

Question

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

Table of Contents Show

Menggunakan operator delete
Menggunakan penghancuran objek
1. hapus operator
2. Penghancuran objek dengan sintaks istirahat
3. Kesimpulan
Posting berkualitas ke kotak masuk Anda
Bagaimana cara menghapus item dari objek di JavaScript?
Bagaimana cara menghapus properti?
Bagaimana Anda akan menghapus properti siswa objek?
Bagaimana cara menghapus properti objek dalam array JavaScript?

    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

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 digabungkan dengan sisa 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 yang sesuai 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 6926 pelanggan lainnya

Tentang Dmitri Pavlutin

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

Bagaimana cara menghapus item dari objek di JavaScript?

Menjawab. Gunakan operator hapus . Menghapus adalah satu-satunya cara untuk benar-benar menghapus properti dari objek

Bagaimana cara menghapus properti?

Di kolom PROPERTI, klik Pengaturan Properti. Klik Pindahkan ke Tempat Sampah. Pada layar konfirmasi, klik Pindahkan properti ke Tong Sampah .

Bagaimana Anda akan menghapus properti siswa objek?

Anda dapat menggunakan operator hapus dengan. atau [ ] untuk menghapus properti dari objek.

Bagaimana cara menghapus properti objek dalam array JavaScript?

Untuk menghapus properti dari semua objek dalam larik. Gunakan Larik. forEach() metode untuk mengulang array. Pada setiap iterasi, gunakan operator hapus untuk menghapus properti tertentu . Properti akan dihapus dari semua objek dalam array.

kode javascript