Pada artikel ini, kami akan menunjukkan kepada Anda berbagai cara untuk menambahkan properti dinamis ke literal objek
Menggunakan Sintaks Nama Properti yang Dihitung
Mulai ES6+, kita dapat menentukan kunci objek dinamis secara langsung dalam literal objek dengan membungkusnya dalam tanda kurung siku. Sintaks ini sebagian besar berguna saat menambahkan properti dinamis ke literal objek pada waktu pembuatan objek. Sebagai contoh
// ES6+ const prop = 'foo'; const obj = { [prop]: 'bar', baz: 'qux', }; console.log[obj]; // { foo: 'bar', baz: 'qux' }
Menggunakan Penggabungan atau Interpolasi String
Dimungkinkan juga untuk menggunakan gabungan dan/atau interpolasi string untuk membuat kunci dinamis saat menggunakan sintaks nama properti yang dihitung. Sebagai contoh
// ES6+ const prop = 'foo'; const obj = { [`${prop}Bar`]: 'baz', ['wal' + 'do']: 'qux', }; console.log[obj]; // { fooBar: 'baz', waldo: 'qux' }_
Menggunakan Notasi Braket
Menambahkan properti dinamis ke literal objek menggunakan notasi braket didukung di browser lama dan baru. Sintaks ini sangat berguna saat Anda ingin menambahkan properti dinamis setelah objek dibuat atau saat Anda tidak menggunakan ES6. Sebagai contoh
const prop = 'foo'; const obj = { baz: 'qux' }; obj[prop] = 'bar'; console.log[obj]; // { baz: 'qux', foo: 'bar' }
Seperti yang Anda lihat dari contoh di atas, sintaks ini membuat penambahan properti dinamis menjadi proses dua langkah. Pertama, Anda harus membuat objek, lalu hanya Anda yang bisa menambahkan properti dinamis ke dalamnya
Menggunakan Penggabungan atau Interpolasi String
Dimungkinkan juga untuk menggunakan gabungan dan/atau interpolasi string untuk membuat kunci dinamis saat menggunakan sintaks notasi braket. Sebagai contoh
const prop = 'foo'; const obj = {}; obj[`${prop}Bar`] = 'baz'; obj['wal' + 'do'] = 'qux'; console.log[obj]; // { fooBar: 'baz', waldo: 'qux' }
Semoga postingan ini bermanfaat bagi Anda. Itu diterbitkan 24 Agustus 2020. Tolong tunjukkan cinta dan dukungan Anda dengan
Pada artikel ini, saya akan membahas Cara Membuat Objek JavaScript Menggunakan Objek Literal dengan Contoh. Silakan baca artikel kami sebelumnya di mana kami memberikan ikhtisar tentang Objek JavaScriptPembuatan Objek dalam JavaScriptObjek adalah salah satu konsep inti dalam JavaScript. Objek JavaScript adalah wadah untuk nilai bernama[kunci] yang disebut properti atau metode
Objek dapat dibuat dengan kurung kurawal {…} dengan daftar properti. Properti adalah “kunci. pasangan nilai", di mana kuncinya adalah string [juga disebut "nama properti"], dan nilai dapat berupa tipe data apa pun seperti string, angka, Boolean, atau tipe data kompleks seperti array, fungsi, dan objek lainnya. dengan nama[kunci] dan nilai yang dipisahkan oleh titik dua [. ]
Memahami penciptaan objek sangat penting. Objek JavaScript dapat dibuat dengan berbagai cara yaitu sebagai berikut
- Menggunakan objek literal
- Menggunakan metode Object[] baru /Dengan membuat instance Object secara langsung [menggunakan kata kunci baru]
- Menggunakan konstruktor objek [menggunakan kata kunci baru]
- Menggunakan Objek. buat[] metode
- Menggunakan Factory Pattern/Fungsi Bangunan Objek
- Menggunakan Pola Prototipe
Kita dapat mengakses properti objek,
- Oleh operator titik/ notasi titik [. ] Contoh. objectName. namaproperti
- Dengan tanda kurung siku/ notasi tanda kurung/ notasi seperti Array [[]]. Contoh. objectName['propertyName']
Objek berisi properti, yang digunakan untuk mendeskripsikan objek. Nilai properti objek dapat berisi tipe data primitif, seperti string, angka, Boolean, atau objek lain/tipe data kompleks seperti array, fungsi, dan objek lainnya. Kita mungkin bertanya-tanya, apa itu Object Literals, dan yang lebih penting, mengapa kita membutuhkannya?
Dalam bahasa Inggris biasa, literal objek JavaScript juga disebut penginisialisasi objek, adalah daftar pasangan kunci-nilai yang dipisahkan koma di dalam kurung kurawal {}, dengan kunci dan nilai dipisahkan oleh titik dua [. ]. Properti memiliki kunci [juga dikenal sebagai "nama" atau "pengidentifikasi"] yang ditempatkan sebelum titik dua ". ” dan nilai di sebelah kanannya
Pasangan kunci-nilai dari suatu objek juga disebut sebagai properti. Nilai tersebut dapat berupa properti dan fungsi. Semua kunci itu unik, tetapi nilainya tidak
Notasi literal objek terutama berupa larik kunci. pasangan nilai, dengan tanda titik dua [. ] memisahkan kunci dan nilai, dan koma [,] setelah setiap kunci. pasangan nilai, kecuali untuk item terakhir kita tidak perlu membubuhkan koma setelahnya, sama seperti array biasa. Nilai yang dibuat dengan fungsi anonim adalah metode objek dan nilai sederhana adalah properti
SintaksisKurung kurawal [{}] adalah objek. Kami baru saja membuat objek pertama kami. Kita juga dapat menginisialisasi objek dengan key-value pair dengan {key. nilai} sintaks
Properti objek JavaScript dapat diakses menggunakan notasi titik [. ] atau notasi braket [ ]. Misalnya, objectName. propertyName atau objectName['propertyName'] akan memberi kita nilai
Semua anggota literal objek dalam JavaScript, baik properti maupun fungsi, bersifat publik. Satu-satunya tempat kita dapat menempatkan anggota pribadi adalah di dalam suatu fungsi. Kita dapat mendeklarasikan properti dan metode yang terdaftar menggunakan sintaks Object Literal yang lebih bersih
SintaksisSaat kami menetapkan literal objek ke variabel lain, ia hanya melakukan salinan dangkal, yang berarti kami mendapatkan referensi objek alih-alih nilai sebenarnya
Spasi dan jeda baris tidak penting. Karenanya objek dapat ditulis seperti ini. biarkan kuliah = {kursus. 'JavaScript', versi. 'ES6', bahasa. ‘Membuat skrip’};
Definisi objek dapat menjangkau beberapa baris;
ayo kuliah = {
kursus. 'JavaScript',
Versi: kapan. 'ES6',
bahasa. 'Menulis'
};
Tidak peduli bagaimana objek dibuat, sintaks untuk mengakses properti dan metode tidak berubah. Mereka dapat diakses menggunakan notasi titik [. ] atau notasi braket [ ]
Contoh. Objek dalam JavaScript dengan Object literalObjects in JavaScript by Object literal example console.log['sample1 code with object literal syntax']; //sample1 code // "object literal" syntax, create an object let course = {}; course.name = "JavaScript";// by key "name" store value "JavaScript" course.language = 'scripting'; // by key "language" store value "scripting" console.log["Object Literal - Course object: ", course] console.log["Object Literal - with dot notation-->Property name value is: " + course.name]; console.log["Object Literal - with dot notation-->Property language value is: " + course.language]; console.log["Object Literal - with bracket notation-->Property name value is: " + course['name']]; console.log["Object Literal - with bracket notation-->Property language value is: " + course['language']]; console.log["Object Literal - Course object length: ", Object.getOwnPropertyNames[course].length] console.log["Course Object literal type? : ", typeof course];// object console.log['sample2 code with initialize an object with key-value pairs syntax']; //sample2 code //initialize an object with key-value pairs, create an object let lecture = { course: 'JavaScript', version: 'ES6', language: 'Scripting' } console.log["Object Literal - Lecture object: ", lecture] console.log["Object Literal - key course value: " + lecture.course + ", with key version value: " + lecture.version + " is a " + lecture.language]; console.log["Object Literal - key course value: " + lecture['course'] + ", with key version: " + lecture.version + " is a " + lecture.language]; console.log["Object Literal - lecture object length: ", Object.getOwnPropertyNames[lecture].length] console.log["lecture Object literal type? : ", typeof lecture];// objectOutput.
Kita dapat menambahkan properti secara dinamis pada suatu objek, termasuk setelah kita membuat objek tersebut. Di sini kami menambahkan kursus properti dinamis. nama untuk kursus objek. Setelah membuat objek, kita bisa mendapatkan properti objek dengan notasi titik atau notasi braket/array
Dalam contoh di atas, kode Sample1 berisi 2 properti untuk objek kursus, di nama properti pertama adalah kunci dan JavaScript adalah nilainya dan di properti kedua, bahasa adalah kunci dan skrip adalah nilainya. Kita bisa mendapatkan nilai properti nama dengan kursus. nama, kami juga dapat mengakses properti dengan kursus kurung siku['nama']
Demikian pula, dalam kode Sample2 ada 3 properti yang ditetapkan ke objek kuliah, pada kursus properti pertama adalah kunci dan JavaScript adalah nilainya, properti ke-2 memiliki versi sebagai kunci dan ES6 sebagai nilai. Nanti untuk properti ke-3, kami memiliki bahasa sebagai kunci dan Scripting sebagai nilainya
- Gunakan sintaks literal objek atau penginisialisasi untuk membuat objek tunggal
- Sintaks literal objek dapat digunakan untuk menginisialisasi seluruh objek
- Saat kita ingin membuat objek saat bepergian tanpa tujuan menyalin nilai ke objek lain atau mungkin memetakan satu objek ke objek lainnya
- Untuk membuat kode yang mudah digunakan dan mudah dibaca
- Lebih mudah dan lebih terstruktur untuk membuat objek dengan cepat
- Saat kita ingin menggunakan simbol sebagai nama properti objek yang membuatnya membuat properti unik 100%.
- Ini memberikan sintaks yang lebih pendek untuk membuat/menginisialisasi properti dari variabel [Property Shorthand]
- Ini memberikan sintaks yang lebih pendek untuk mendefinisikan metode fungsi
- Ini memungkinkan kemampuan untuk menghitung nama properti dalam definisi literal objek
Perhatikan bahwa semua kunci dalam objek JavaScript adalah string. Semua kunci dalam objek JavaScript adalah string dan hanya boleh berupa string. Jika itu bukan string. Itu dilemparkan/dikonversi menjadi string. Ini berarti bahwa meskipun kita dapat membuat objek {1. 'adalah bilangan real'}, kuncinya di sini, 1 diubah menjadi string '1'. Nilai bisa dari jenis apa pun.
Perhatikan bahwa kunci harus unik, tetapi nilainya tidak. Seperti yang kita ketahui bahwa Object seperti kamus dan berisi kunci unik dan nilai yang dipetakan ke kunci itu. Dan karena keunikan masing-masing kunci yang disimpan, tidak ada pasangan duplikat yang tersimpan. Jika kunci sudah ada di objek, itu tidak akan ditambahkan lagi, karena objek tersebut berisi kunci unik dan nilai yang dipetakan ke kunci itu.
Menyetel kunci berulang kali berarti menyetel kunci duplikat akan menimpa nilainya dengan yang baru. Jika kita menginisialisasi objek berikut
Dan kemudian memeriksa nilai kuliah, kita akan melihat
Apa yang kita bahas di atas diberikan dalam contoh di bawah ini
Contoh. Objek JavaScript dengan kunci unikJavaScript Object with unique key example let lecture = { course: 'JavaScript', course: 'TypeScript', version: 'ES6', language: 'Scripting' } console.log['JavaScript Simple Object with unique key: ', lecture]; console.log['Type of variable lecture: ', typeof lecture]Output.
Pada contoh di atas, pada objek kuliah, menyetel key course berulang-ulang artinya menyetel kunci duplikat akan menimpa nilainya dengan yang baru. Di sini, ini akan menimpa JavaScript nilai lama dengan yang baru TypeScript. Seperti yang telah kita pelajari, semua kunci adalah unik, tetapi Nilai tidak harus unik, meskipun kita dapat menetapkan nilai yang sama untuk semua kunci objek. Apa yang kita bahas di atas diberikan dalam contoh di bawah ini.
Contoh. Objek JavaScript, kuncinya unik tetapi nilainya tidak harusJavaScript Object, keys are unique but value don't have to be example let lecture = { course: 'JavaScript', version: 'JavaScript', language: 'JavaScript' } console.log["JavaScript Simple Object with keys are unique but value don't have to be:\n ", lecture]; console.log['Type of variable lecture: ', typeof lecture]Output.
Gunakan Variabel sebagai Kunci Objek/ Nama Properti yang Dihitung. Demikian pula, jika kita memiliki variabel const tutorial = 'kursus' dan mencoba membuat objek
Kunci objek kuliah adalah 'tutorial', bukan 'kursus'. Apa yang kita bahas di atas diberikan dalam contoh di bawah ini
Contoh. Objek JavaScript, menggunakan variabel sebagai kunci objekJavaScript Object, using a variable as object key example const tutorial = 'course'; let lecture = { tutorial: 'JavaScript', version: 'ES6', language: 'Scripting' } console.log['JavaScript Simple Object, using variable as object key:\n ', lecture]; console.log['Type of variable lecture: ', typeof lecture]Keluaran.
Kiat Terbaik. JavaScript ES6 menyediakan cara untuk menggunakan variabel sebagai kunci objek — kita harus membungkus kunci dalam tanda kurung siku [[]] juga disebut Computed property names. Dengan menggunakan contoh di atas, kita dapat menulis const tutorial = ‘course’
Cukup keren, bukan?
Contoh. Objek JavaScript, bungkus kunci dalam tanda kurung siku untuk menggunakan variabel sebagai kunci objekJavaScript Object, wrap the key in square brackets to use variable as object key [Computed property names] example const tutorial = 'course'; let lecture = { [tutorial]: 'JavaScript', version: 'ES6', language: 'Scripting' } console.log['JavaScript Simple Object, wrap the key in square brackets to use variable as object key:\n ', lecture]; console.log['Type of variable lecture: ', typeof lecture]Output.
1. Pastikan kita menyertakan objek kita dalam kurung kurawal
var mobil = {
model. 'BMW'
};
2. Pisahkan nama properti dan nilai properti dengan titik dua [. ]
var covid = {
tahun. 2020
};
3. Nama properti dapat berupa string apa pun, tetapi kami biasanya tetap menggunakan nama variabel yang valid
var widget = {
biaya$. 3. 14,
"di jual". BENAR
};
Perhatikan bahwa jika kita menggunakan string dengan spasi di dalamnya untuk nama properti, kita perlu menggunakan tanda kutip di sekitar nama tersebut. Itu hanya dapat diakses menggunakan notasi kurung siku [ ]
4. Tidak ada dua properti dalam sebuah objek yang dapat memiliki nama yang sama
var prakiraan cuaca = {
temperatur tinggi. 45,
Suhu tinggi. 40 //ini tidak akan berhasil
};
5. Pisahkan setiap pasangan nama dan nilai properti dengan koma
var sepeda = {
model. 'pulsar',
warna. 'hitam'
};
6. Jangan gunakan koma setelah nilai properti terakhir
var bulan = {
nama. 'April',
musim. 'musim panas' //tidak perlu koma di sini
};
Pada artikel selanjutnya, saya akan membahas cara membuat objek JavaScript menggunakan metode new Object[]. Di sini, pada artikel ini, saya mencoba menjelaskan Cara Membuat Objek JavaScript Menggunakan Objek Literal dengan Contoh dan saya harap Anda menikmati artikel Membuat Objek JavaScript Menggunakan objek literal ini