Objek javascript literal menambahkan properti

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

Pembuatan Objek dalam JavaScript

Objek 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

1. Menggunakan objek literal
2. Menggunakan metode Object() baru /Dengan membuat instance Object secara langsung (menggunakan kata kunci baru)
3. Menggunakan konstruktor objek (menggunakan kata kunci baru)
4. Menggunakan Objek. buat() metode
5. Menggunakan Factory Pattern/Fungsi Bangunan Objek
6. Menggunakan Pola Prototipe

Kita dapat mengakses properti objek,

1. Oleh operator titik/ notasi titik (. ) Contoh. objectName. namaproperti
2. Dengan tanda kurung siku/ notasi tanda kurung/ notasi seperti Array ([]). Contoh. objectName['propertyName']

Membuat Objek JavaScript Menggunakan Objek Literal

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

Kurung 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

Saat 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 [ ]

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

Di mana menggunakan Objek Literal atau mengapa kita membutuhkannya?

1. Gunakan sintaks literal objek atau penginisialisasi untuk membuat objek tunggal
2. Sintaks literal objek dapat digunakan untuk menginisialisasi seluruh objek
3. Saat kita ingin membuat objek saat bepergian tanpa tujuan menyalin nilai ke objek lain atau mungkin memetakan satu objek ke objek lainnya
4. Untuk membuat kode yang mudah digunakan dan mudah dibaca
5. Lebih mudah dan lebih terstruktur untuk membuat objek dengan cepat
6. Saat kita ingin menggunakan simbol sebagai nama properti objek yang membuatnya membuat properti unik 100%.

Keuntungan dari Objek Literal

1. Ini memberikan sintaks yang lebih pendek untuk membuat/menginisialisasi properti dari variabel (Property Shorthand)
2. Ini memberikan sintaks yang lebih pendek untuk mendefinisikan metode fungsi
3. 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

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.

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

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?

Aturan jalan untuk membuat objek literal

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

Bisakah Anda menambahkan properti ke objek?

Bagaimana Anda menambahkan objek literal?

Bagaimana cara menambahkan properti ke objek dalam JavaScript secara kondisional?

Bagaimana Anda menambahkan properti ke kelas objek?