Bagaimana untuk menambah atribut secara dinamik dalam javascript

Dalam Javascript, kita selalunya perlu menambahkan atribut pada objek secara dinamik. Secara umumnya, kita boleh menggunakan pengendali titik atau pengendali kurungan untuk menambah atribut pada objek.

Sebagai contoh, kita boleh menambah nama atribut kepada orang objek dengan cara berikut:

let person = {};

// 使用点操作符
person.name = "Tom";

// 使用中括号操作符
person["name"] = "Tom";

Namun, untuk sesetengah senario yang memerlukan penambahan atribut secara dinamik, cara penulisan ini tidak cukup fleksibel. Sebagai contoh, kita perlu menambah atribut secara dinamik berdasarkan data input pengguna. Pada masa ini, kita boleh menggunakan kaedah Object.defineProperty() yang disediakan oleh Javascript untuk menambah sifat secara dinamik.

Object.defineProperty() ialah API yang disertakan dengan Javascript dan boleh digunakan untuk menentukan sifat sesuatu objek. Ia menerima tiga parameter: objek untuk mentakrifkan atribut, nama atribut dan objek penerangan. Antaranya, objek penerangan mengandungi beberapa sifat tambahan untuk mengawal kelakuan sifat tersebut.

Secara khusus, objek perihalan boleh mengandungi atribut berikut:

1. nilai: nilai atribut
2. boleh dikira: menunjukkan sama ada atribut itu boleh dikira. Jika atribut ini palsu, atribut tidak akan muncul dalam gelung untuk...dalam dan kaedah JSON.stringify() tidak akan mensiri atribut
3. boleh ditulis: menunjukkan sama ada atribut boleh ditulis. Jika atribut palsu, nilai atribut tidak boleh diubah suai
4. boleh dikonfigurasikan: menunjukkan sama ada atribut boleh dikonfigurasikan. Jika harta ini palsu, harta itu tidak boleh dipadamkan dan tidak boleh diubah suai sebagai harta pelengkap.

Sekarang, mari lihat contoh khusus. Katakan kita perlu menambah sifat secara dinamik berdasarkan data input pengguna Kita boleh mentakrifkan pengguna objek dan kemudian menggunakan Object.defineProperty() untuk menambah sifat secara dinamik.

let user = {};

// 使用Object.defineProperty()动态增加属性
Object.defineProperty(user, "name", {
  value: "Tom",
  enumerable: true,
  writable: true,
  configurable: true
});

// 输出属性值
console.log(user.name); // Tom

Dalam contoh di atas, kami menggunakan Object.defineProperty() untuk mentakrifkan nama harta benda dan menetapkan nilai harta kepada Tom. Pada masa yang sama, kami menetapkan kebolehhitungan, kebolehtulisan dan kebolehkonfigurasian sifat kepada benar.

Perlu diambil perhatian bahawa sebaik sahaja sesuatu sifat ditakrifkan menggunakan Object.defineProperty(), jika sifat boleh dikonfigurasikan harta itu ditetapkan kepada palsu, kebolehkiraan dan kebolehtulisan harta itu tidak akan diubah suai dan kebolehkonfigurasian lagi . Oleh itu, apabila menggunakan Object.defineProperty() untuk menambah sifat secara dinamik, anda perlu mempertimbangkan dengan teliti ciri sifat dan sama ada pengubahsuaian berikutnya dibenarkan.

Selain menggunakan Object.defineProperty(), kita juga boleh menggunakan kaedah Object.defineProperties() untuk menambah berbilang sifat secara dinamik. Sintaks kaedah ini adalah serupa dengan Object.defineProperty(), kecuali parameter kedua bukan lagi objek perihalan, tetapi objek, dan setiap sifatnya mewakili sifat yang akan ditambah. Contohnya:

let user = {};

// 使用Object.defineProperties()动态增加多个属性
Object.defineProperties(user, {
  name: {
    value: "Tom",
    enumerable: true,
    writable: true,
    configurable: true
  },
  age: {
    value: 18,
    enumerable: true,
    writable: false,
    configurable: false
  }
});

// 输出属性值
console.log(user.name); // Tom
console.log(user.age); // 18

Dalam contoh di atas, kami menggunakan Object.defineProperties() untuk mentakrifkan dua nama dan umur sifat, dan menetapkan sifatnya masing-masing.

Ringkasnya, Javascript menyediakan pelbagai cara untuk menambah atribut secara dinamik. Menggunakan pengendali titik atau pengendali kurungan boleh memenuhi beberapa senario mudah, manakala menggunakan Object.defineProperty() dan Object.defineProperties() boleh menyediakan cara yang lebih fleksibel untuk menentukan sifat, sesuai untuk beberapa senario khas. Apabila kita perlu menambah atribut secara dinamik berdasarkan data input pengguna, kita boleh memilih untuk menggunakan kedua-dua API ini untuk mencapainya.

Atas ialah kandungan terperinci Bagaimana untuk menambah atribut secara dinamik dalam javascript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!