Buat objek kosong di JavaScript dengan {} atau Object baru ()?

370

Ada dua cara berbeda untuk membuat objek kosong di JavaScript:

var objectA = {}
var objectB = new Object()

Apakah ada perbedaan dalam cara mesin skrip menangani mereka? Apakah ada alasan untuk menggunakan salah satunya?

Demikian pula dimungkinkan untuk membuat array kosong menggunakan sintaks yang berbeda:

var arrayA = []
var arrayB = new Array()
Jonas Pegerfalk
sumber
6
Peringatan: ada perbedaan kecil yang dapat menyebabkan bug yang sangat menjengkelkan! Membuat objek kosong yang menugaskannya ke "{}" dalam prototipe Object akan menjadi instance Object yang sama di setiap instance Object yang dibuat oleh operator "baru". Saat Anda menggunakan "Objek baru ({})", Anda akan memiliki instance yang berbeda.
peterh
Layak untuk menyebutkan bahwa selain var objectA = {} var objectB = new Object()ada konstruksi ketiga yang akan menghasilkan hasil yang sama:var objectC = Object.create(Object.prototype);
kalitsov
{}dan [] Gunakan {}sebagai ganti new Object(). Gunakan []sebagai ganti new Array(). Gunakan array ketika nama anggota akan menjadi bilangan bulat berurutan. Gunakan objek ketika nama anggota adalah string atau nama yang berubah-ubah. sumber
ilgaar
new Object()dan {}bukan objek yang cukup kosong, mereka adalah objek yang memiliki Object.prototype. Anda dapat menggunakan Object.create(null)untuk objek yang benar-benar kosong (setidaknya sesuai dengan dokumen mozilla: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… )

Jawaban:

459

Benda

Tidak ada manfaatnya menggunakan new Object();- sedangkan {};dapat membuat kode Anda lebih kompak, dan lebih mudah dibaca.

Untuk mendefinisikan objek kosong mereka secara teknis sama. The {}sintaks yang lebih pendek, lebih rapi (kurang Java-ish), dan memungkinkan Anda untuk langsung mengisi objek inline - seperti:

var myObject = {
        title:  'Frog',
        url:    '/img/picture.jpg',
        width:  300,
        height: 200
      };

Array

Untuk array, hampir tidak ada manfaatnya menggunakan new Array();over [];- dengan satu pengecualian kecil:

var emptyArray = new Array(100);

menciptakan array panjang 100 item dengan semua slot yang berisi undefined- yang mungkin bagus / berguna dalam situasi tertentu (seperti (new Array(9)).join('Na-Na ') + 'Batman!').

Rekomendasi saya

  1. Jangan pernah gunakan new Object();- ini lebih clunkier daripada {};dan terlihat konyol.
  2. Selalu gunakan [];- kecuali ketika Anda perlu dengan cepat membuat array "kosong" dengan panjang yang telah ditentukan.
Már Örlygsson
sumber
22
Bahkan jika Anda menggunakan sintaks Array (100), array yang sama, pada posisi ke-101 telah ditentukan di dalamnya; satu-satunya hal yang benar-benar dilakukan angka adalah mengubah nilai properti panjang.
Jason Bunting
6
@Pablo tidak ada yang salah tentang new Array(100). Baca literatur: developer.mozilla.org/en/JavaScript/Reference/Global_Objects/…
Már Örlygsson
9
@Pablo Saya tidak tahu apa argumen Anda. Seperti Douglas Crockford, saya sarankan menggunakan []. Tidak ada argumen di sana. Anda, bagaimanapun, berpendapat bahwa new Array(100)entah bagaimana "tidak valid", yang tidak benar.
Már Örlygsson
10
Juga, harus menyadari bahwa new Array(1,2,3)hasil dalam [1,2,3], tapi new Array(1)tidak tidak menghasilkan [1]; dengan demikian, semantik dari Arraytidak konsisten dan tidak perlu membingungkan.
Dancrumb
3
Saya akan menambahkan yang Object.create(null)dapat berguna untuk membuat objek kosong, sedangkan { }mewarisi dari prototipe Obyek.
Meow
90

Ya, ada perbedaan, mereka tidak sama. Memang benar Anda akan mendapatkan hasil yang sama tetapi mesin bekerja dengan cara yang berbeda untuk keduanya. Salah satunya adalah objek literal, dan yang lainnya adalah konstruktor, dua cara berbeda untuk membuat objek dalam javascript.

var objectA = {} //This is an object literal

var objectB = new Object() //This is the object constructor

Di JS semuanya adalah objek, tetapi Anda harus mengetahui hal berikut dengan Objek baru (): Objek dapat menerima parameter, dan tergantung pada parameter itu, ia akan membuat string, angka, atau hanya objek kosong.

Misalnya:, new Object(1)akan mengembalikan Nomor. new Object("hello")akan mengembalikan string, artinya konstruktor objek dapat mendelegasikan - tergantung pada parameter - pembuatan objek ke konstruktor lain seperti string, angka, dll. Sangat penting untuk mengingat ini saat Anda mengelola data dinamis untuk buat objek ..

Banyak penulis merekomendasikan untuk tidak menggunakan konstruktor objek ketika Anda dapat menggunakan notasi literal tertentu, di mana Anda akan yakin bahwa apa yang Anda buat adalah apa yang Anda harapkan ada dalam kode Anda.

Saya menyarankan Anda untuk melakukan bacaan lebih lanjut tentang perbedaan antara notasi literal dan konstruktor pada javascript untuk menemukan rincian lebih lanjut.

Guillermo Snipe
sumber
Notasi literal sebenarnya lebih mudah dibaca dan ringkas untuk membuat objek data dinamis.
Sid
12

Ini memiliki hasil akhir yang sama, tetapi saya hanya akan menambahkan bahwa menggunakan sintaks literal dapat membantu seseorang menjadi terbiasa dengan sintaks JSON (subset string-ified dari sintaks objek JavaScript JavaScript), sehingga mungkin merupakan praktik yang baik untuk masuk ke dalam .

Satu hal lagi: Anda mungkin memiliki kesalahan kecil jika Anda lupa menggunakan newoperator. Jadi, menggunakan literal akan membantu Anda menghindari masalah itu.

Pada akhirnya, itu akan tergantung pada situasi dan juga preferensi.

Jason Bunting
sumber
8

Objek dan larik sintaks literal {} / [] diperkenalkan di JavaScript 1.2, jadi tidak tersedia (dan akan menghasilkan kesalahan sintaksis) dalam versi Netscape Navigator sebelum 4.0.

Jari-jariku masih default untuk mengatakan Array baru (), tapi aku sudah tua. Untungnya Netscape 3 bukan peramban yang harus dipertimbangkan banyak orang hari ini ...

bobince
sumber
11
Netscape 3? Sobat, itu ada di abad sebelumnya ! :-D
Tomalak
8
var objectA = {}

jauh lebih cepat dan, dalam pengalaman saya, lebih umum digunakan, jadi mungkin yang terbaik untuk mengadopsi 'standar' dan menyimpan beberapa pengetikan.

Bobby Jack
sumber
1
Lebih cepat dijalankan atau lebih cepat mengetik?
hippietrail
Yah, memang, saya bermaksud "mengetik" tetapi, mengingat waktu penguraian ekstra, mungkin juga eksekusi yang lebih cepat, juga :-)
Bobby Jack
2
Selanjutnya, literal biasanya dibuat pada waktu parse, sementara new Objectharus dieksekusi saat runtime.
Phrogz
8

Saya percaya {}direkomendasikan di salah satu vid Javascript di sini sebagai konvensi pengkodean yang baik. newdiperlukan untuk pewarisan pseudoklasik. yang var obj = {};cara membantu untuk mengingatkan Anda bahwa ini bukan bahasa berorientasi objek klasik tapi satu prototypal. Jadi, satu-satunya waktu yang Anda perlukan newadalah ketika Anda menggunakan fungsi konstruktor. Sebagai contoh:

var Mammal = function (name) {
  this.name = name;
};

Mammal.prototype.get_name = function () {
  return this.name;
}

Mammal.prototype.says = function() {
  return this.saying || '';
}

Kemudian digunakan seperti:

var aMammal = new Mammal('Me warm-blooded');
var name = aMammal.get_name();

Keuntungan lain untuk menggunakan {}sebagai lawan new Objectadalah Anda dapat menggunakannya untuk melakukan objek literal gaya JSON.

Thedric Walker
sumber
7

Array kinerja instantiation

Jika Anda ingin membuat array tanpa panjang:

var arr = []; lebih cepat dari var arr = new Array();

Jika Anda ingin membuat array kosong dengan panjang tertentu:

var arr = new Array(x);lebih cepat dari var arr = []; arr[x-1] = undefined;

Untuk tolok ukur klik yang berikut ini: https://jsfiddle.net/basickarl/ktbbry5b/

Namun saya tidak tahu jejak memori keduanya, saya bisa membayangkan bahwa ini new Array()membutuhkan lebih banyak ruang.

K - Toksisitas dalam SO meningkat.
sumber
arr = new Array(x)setara dengan arr = []; arr.length = x;, bukan untuk menugaskan x-1indeks dengan undefined.
Bergi
2

Ini pada dasarnya adalah hal yang sama. Gunakan apa pun yang Anda rasa lebih nyaman.

Tomalak
sumber
Mungkin saya mempelajari javascript terlalu dalam di sini, tetapi apakah mereka sama? Bukankah {proto} dari Objectadalah null, sedangkan {proto} dari {}adalah 'Object.prototype'?
Izhaki
@Izhaki Prototipe dari Objectadalah nol, itu benar. Itu karena Objectmengakhiri rantai prototipe. Contoh objek tidak memiliki prototipe, hanya konstruktor yang memilikinya. Dan (new Object()).constructor === ({}).constructor->true
Tomalak
Jadi ini salah?
Izhaki
Inilah poin saya: new Object()menghasilkan instance Obyek kosong. {}menghasilkan instance Obyek kosong. Kedua contoh ini benar-benar tidak bisa dibedakan. Contoh yang Anda tautkan untuk melakukan sesuatu yang lain (itu memodifikasi rantai prototipe) dan tidak benar-benar berlaku di sini - atau saya tidak mengerti argumen Anda.
Tomalak
1

OK , hanya ada 2 cara berbeda untuk melakukan hal yang sama! Yang satu dipanggil object literaldan yang lainnya adalah fungsi constructor!

Tapi baca terus, ada beberapa hal yang ingin saya bagikan:

Penggunaan {}membuat kode Anda lebih mudah dibaca, sambil membuat instance Objectatau fungsi bawaan lainnya tidak disarankan ...

Selain itu, fungsi Objek mendapat parameter karena fungsinya, seperti Object(params)... tetapi {}merupakan cara murni untuk memulai objek dalam JavaScript ...

Menggunakan objek literal membuat kode Anda terlihat jauh lebih bersih dan lebih mudah dibaca untuk pengembang lain dan sejalan dengan praktik terbaik dalam JavaScript ...

Meskipun Objek dalam Javascript bisa berupa hampir semua hal, {}hanya menunjuk ke objek javascript, untuk pengujian cara kerjanya, lakukan di bawah ini dalam kode atau konsol javascript Anda:

var n = new Object(1); //Number {[[PrimitiveValue]]: 1}

Anehnya, itu menciptakan Angka!

var a = new Object([1,2,3]); //[1, 2, 3]

Dan ini menciptakan Array!

var s = new Object('alireza'); //String {0: "a", 1: "l", 2: "i", 3: "r", 4: "e", 5: "z", 6: "a", length: 7, [[PrimitiveValue]]: "alireza"}

dan hasil aneh ini untuk String!

Jadi, jika Anda membuat objek, disarankan untuk menggunakan objek literal, untuk memiliki kode standar dan menghindari kecelakaan kode seperti di atas, juga penggunaan kinerja yang bijaksana {}lebih baik dalam pengalaman saya!

Alireza
sumber
Anda adalah Dezfooli? di Iran?
Ehsan
Hai Ehsan, ya, tapi saya tidak tinggal di Iran, Anda memiliki profil yang bagus di sini! Senang bertemu dengan Anda ...
Alireza
dapatkah saya menyimpan nomor ponsel Anda dan mendapatkan bantuan tentang pemrograman?
Ehsan
Saya melihat Anda menggunakan telegram.
Ehsan
Ya, tentu saja, kami dapat berbagi pengetahuan tentang telegram dengan pasti! ___
Alireza