Apa perbedaan antara “Array ()” dan “[]” saat mendeklarasikan array JavaScript?

Apa perbedaan nyata antara mendeklarasikan array seperti ini:

var myArray = new Array();

dan

var myArray = [];

Ada perbedaan, tetapi tidak ada perbedaan dalam contoh itu.

Menggunakan metode yang lebih verbose: new Array()memang memiliki satu opsi tambahan dalam parameter: jika Anda meneruskan angka ke konstruktor, Anda akan mendapatkan array dengan panjang itu:

x = new Array(5);
alert(x.length); // 5

Untuk mengilustrasikan berbagai cara membuat array:

var a = [],            // these are the same
    b = new Array(),   // a and b are arrays with length 0

    c = ['foo', 'bar'],           // these are the same
    d = new Array('foo', 'bar'),  // c and d are arrays with 2 strings

    // these are different:
    e = [3]             // e.length == 1, e[0] == 3
    f = new Array(3),   // f.length == 3, f[0] == undefined

;

Perbedaan lainnya adalah ketika menggunakan new Array()Anda dapat mengatur ukuran array, yang memengaruhi ukuran stack. Ini dapat berguna jika Anda mendapatkan stack overflows ( Performance of Array.push vs Array.unshift ) yang terjadi ketika ukuran array melebihi ukuran stack, dan harus dibuat ulang. Jadi sebenarnya bisa, tergantung pada kasus penggunaan, menjadi peningkatan kinerja saat menggunakan new Array()karena Anda dapat mencegah terjadinya overflow.

Seperti yang ditunjukkan dalam jawaban ini , new Array(5)tidak akan benar-benar menambahkan lima undefineditem ke array. Itu hanya menambah ruang untuk lima item. Sadarilah bahwa menggunakan Arraycara ini membuat sulit untuk mengandalkan array.lengthperhitungan.

Perbedaan antara membuat array dengan array implisit dan konstruktor array adalah halus tetapi penting.

Saat Anda membuat array menggunakan

var a = [];

Anda memberi tahu juru bahasa untuk membuat array runtime baru. Tidak perlu pemrosesan ekstra sama sekali. Selesai

Jika Anda menggunakan:

var a = new Array();

Anda memberi tahu penerjemah, saya ingin memanggil konstruktor "Array " dan menghasilkan sebuah objek. Kemudian mencari melalui konteks eksekusi Anda untuk menemukan konstruktor untuk memanggil, dan memanggilnya, membuat array Anda.

Anda mungkin berpikir, "Yah, ini tidak masalah sama sekali. Mereka sama!". Sayangnya Anda tidak bisa menjamin itu.

Ambil contoh berikut:

function Array() {
    this.is = 'SPARTA';
}

var a = new Array();
var b = [];

alert(a.is);  // => 'SPARTA'
alert(b.is);  // => undefined
a.push('Woa'); // => TypeError: a.push is not a function
b.push('Woa'); // => 1 (OK)

Pada contoh di atas, panggilan pertama akan mengingatkan 'SPARTA' seperti yang Anda harapkan. Yang kedua tidak. Anda akhirnya akan melihat tidak terdefinisi. Anda juga akan mencatat bahwa b berisi semua fungsi objek Array asli seperti push, di mana yang lain tidak.

Meskipun Anda mungkin berharap ini terjadi, itu hanya menggambarkan fakta itu [] tidak sama dengan new Array().

Mungkin lebih baik menggunakan saja []jika Anda tahu Anda hanya menginginkan sebuah array. Saya juga tidak menyarankan berkeliling dan mendefinisikan ulang Array ...

Ada perbedaan penting yang belum ada jawaban.

Dari ini:

new Array(2).length           // 2
new Array(2)[0] === undefined // true
new Array(2)[1] === undefined // true

Anda mungkin berpikir new Array(2)itu setara dengan [undefined, undefined], tapi BUKAN!

Mari kita coba dengan map():

[undefined, undefined].map(e => 1)  // [1, 1]
new Array(2).map(e => 1)            // "(2) [undefined × 2]" in Chrome

Lihat? Semantiknya benar-benar berbeda! Jadi mengapa demikian?

Menurut ES6 Spec 22.1.1.2, pekerjaan Array(len) hanya menciptakan array baru yang propertinya lengthdiatur ke argumen lendan hanya itu, artinya tidak ada elemen nyata di dalam array yang baru dibuat ini.

Fungsinya map(), sesuai dengan spec 22.1.3.15 pertama-tama akan memeriksa HasPropertylalu memanggil callback, tetapi ternyata:

new Array(2).hasOwnProperty(0) // false
[undefined, undefined].hasOwnProperty(0) // true

Dan itu sebabnya Anda tidak bisa mengharapkan fungsi iterasi bekerja seperti biasa pada array yang dibuatnew Array(len) .

BTW, Safari dan Firefox memiliki "pencetakan" yang jauh lebih baik untuk situasi ini:

// Safari
new Array(2)             // [](2)
new Array(2).map(e => 1) // [](2) 
[undefined, undefined]   // [undefined, undefined] (2) 

// Firefox
new Array(2)             // Array [ <2 empty slots> ]
new Array(2).map(e => 1) // Array [ <2 empty slots> ]
[undefined, undefined]   // Array [ undefined, undefined ]

Saya telah mengirimkan masalah ke Chromium dan meminta mereka untuk memperbaiki pencetakan yang membingungkan ini: https://bugs.chromium.org/p/chromium/issues/detail?id=732021

PEMBARUAN: Sudah diperbaiki. Chrome sekarang dicetak sebagai:

new Array(2)             // (2) [empty × 2]

Anehnya, new Array(size)hampir 2x lebih cepat dari[] di Chrome, dan hampir sama di FF dan IE (diukur dengan membuat dan mengisi array). Itu hanya masalah jika Anda tahu perkiraan ukuran array. Jika Anda menambahkan lebih banyak item daripada panjang yang Anda berikan, peningkatan kinerja hilang.

Lebih akurat: Array(adalah operasi waktu konstan cepat yang tidak mengalokasikan memori, sedangkan []operasi waktu linier yang menetapkan jenis dan nilai.

Untuk informasi lebih lanjut, halaman berikut menjelaskan mengapa Anda tidak perlu menggunakannyanew Array()

Anda tidak perlu menggunakan new Object()JavaScript. Gunakan objek literal {} sebagai gantinya. Demikian pula, jangan gunakan new Array(), gunakan array literal [] saja. Array dalam JavaScript tidak berfungsi seperti array di Jawa, dan penggunaan sintaks mirip Java akan membingungkan Anda.

Jangan gunakan new Number, new Stringatau new Boolean. Bentuk-bentuk ini menghasilkan pembungkus objek yang tidak perlu. Cukup gunakan literal sederhana sebagai gantinya.

Lihat juga komentar - new Array(length)formulir tidak memiliki tujuan yang bermanfaat (setidaknya dalam implementasi JavaScript saat ini).

Untuk lebih memahami []dan new Array():

> []
  []
> new Array()
  []
> [] == []
  false
> [] === []
  false
> new Array() == new Array()
  false
> new Array() === new Array()
  false
> typeof ([])
  "object"
> typeof (new Array())
  "object"
> [] === new Array()
  false
> [] == new Array()
  false

Hasil di atas adalah dari konsol Google Chrome pada Windows 7.

Yang pertama adalah panggilan konstruktor objek default. Anda dapat menggunakan parameter itu jika Anda mau.

var array = new Array(5); //initialize with default length 5

Yang kedua memberi Anda kemampuan untuk membuat array tidak kosong:

var array = [1, 2, 3]; // this array will contain numbers 1, 2, 3.

Saya bisa menjelaskan dengan cara yang lebih spesifik dimulai dengan contoh ini yang didasarkan pada Fredrik yang bagus.

var test1 = [];
test1.push("value");
test1.push("value2");

var test2 = new Array();
test2.push("value");
test2.push("value2");

alert(test1);
alert(test2);
alert(test1 == test2);
alert(test1.value == test2.value);

Saya baru saja menambahkan nilai lain ke array, dan membuat empat peringatan: Yang pertama dan kedua adalah untuk memberi kita nilai yang disimpan dalam setiap array, untuk memastikan tentang nilai-nilai. Mereka akan mengembalikan yang sama! Sekarang coba yang ketiga, ini mengembalikan false, itu karena

JS memperlakukan test1 sebagai VARIABEL dengan tipe data array , dan memperlakukan test2 sebagai OBJECT dengan fungsi array , dan ada sedikit perbedaan di sini.

Perbedaan pertama adalah ketika kita memanggil test1 ia memanggil variabel tanpa berpikir, itu hanya mengembalikan nilai yang disimpan dalam variabel ini tanpa menghiraukan tipe datanya! Tetapi, ketika kita memanggil test2, ia memanggil fungsi Array () dan kemudian menyimpan nilai "Pushed" kami di properti "Value" -nya , dan hal yang sama terjadi ketika kita mengingatkan test2, ia mengembalikan "Value" dari objek array.

Jadi ketika kita memeriksa apakah test1 sama dengan test2 tentu saja mereka tidak akan pernah mengembalikan true, satu adalah fungsi dan yang lainnya adalah variabel (dengan jenis array), bahkan jika mereka memiliki nilai yang sama!

Untuk memastikannya, coba peringatan ke-4, dengan nilai. Ditambahkan ke dalamnya; itu akan mengembalikan true. Dalam hal ini kami memberi tahu JS "Mengabaikan jenis wadah, apakah itu berfungsi atau variabel, harap bandingkan nilai yang disimpan di setiap wadah dan beri tahu kami apa yang telah Anda lihat!" itulah yang terjadi.

Saya harap saya mengatakan ide di balik itu dengan jelas, dan maaf untuk bahasa Inggris saya yang buruk.

Tidak ada perbedaan ketika Anda menginisialisasi array tanpa panjang. Begitu var a = []& var b = new Array()sama.

Tetapi jika Anda menginisialisasi array dengan panjang seperti var b = new Array(1);, itu akan mengatur panjang objek array menjadi 1. Jadi setara dengan var b = []; b.length=1;.

Ini akan menjadi masalah setiap kali Anda melakukan array_object.push, itu menambah item setelah elemen terakhir & menambah panjang.

var b = new Array(1);
b.push("hello world");
console.log(b.length); // print 2

vs.

var v = [];
a.push("hello world");
console.log(b.length); // print 1

Yang pertama adalah panggilan konstruktor objek default. Kebanyakan digunakan untuk nilai dinamis.

var array = new Array(length); //initialize with default length

array kedua digunakan saat membuat nilai statis

var array = [red, green, blue, yellow, white]; // this array will contain values.

Tidak ada perbedaan besar, mereka pada dasarnya melakukan hal yang sama tetapi melakukannya dengan cara yang berbeda, tetapi baca terus, lihat pernyataan ini di W3C:

var cars = ["Saab", "Volvo","BMW"];

dan

var cars = new Array("Saab", "Volvo", "BMW");

Dua contoh di atas melakukan hal yang persis sama. Tidak perlu menggunakan Array baru ().
Untuk kesederhanaan, keterbacaan dan kecepatan eksekusi, gunakan yang pertama (metode literal array).

Tetapi pada saat yang sama, membuat array baru menggunakan new Arraysintaksis dianggap sebagai praktik yang buruk:

Hindari Array baru ()

Tidak perlu menggunakan konstruktor array bawaan JavaScript baru Array ().
Gunakan [] sebagai gantinya.
Kedua pernyataan berbeda ini membuat array kosong baru bernama poin:

var points = new Array();         // Bad
var points = [];                  // Good 

Kedua pernyataan berbeda ini membuat array baru yang berisi 6 angka:

var points = new Array(40, 100, 1, 5, 25, 10); // Bad    
var points = [40, 100, 1, 5, 25, 10];          // Good

Kata kunci baru hanya memperumit kode. Itu juga dapat menghasilkan beberapa hasil yang tidak terduga:

var points = new Array(40, 100);  // Creates an array with two elements (40 and 100)

Bagaimana jika saya menghapus salah satu elemen?

var points = new Array(40);       // Creates an array with 40 undefined elements !!!!!

Jadi pada dasarnya tidak dianggap sebagai praktik terbaik, juga ada satu perbedaan kecil di sana, Anda bisa melewati panjang new Array(length)seperti ini, yang juga bukan cara yang disarankan.

Perbedaan menggunakan

var arr = new Array(size);

Atau

arr = [];
arr.length = size;

Seperti yang sudah cukup dibahas dalam pertanyaan ini.

Saya ingin menambahkan masalah kecepatan - cara tercepat saat ini , padagoogle chrome adalah yang kedua.

Tetapi perhatikan, hal-hal ini cenderung banyak berubah dengan pembaruan. Juga waktu menjalankan akan berbeda antara browser yang berbeda.

Misalnya - opsi ke-2 yang saya sebutkan, berjalan pada 2 juta [ops / detik] aktif chrome, tetapi jika Anda ingin mencobanyamozilla dev. Anda akan mendapatkan tingkat yang mengejutkan lebih tinggi yaitu 23 juta.

Bagaimanapun, saya sarankan Anda memeriksanya, sesekali, pada browser yang berbeda (dan mesin), menggunakan situs seperti itu

Seperti yang saya tahu perbedaannya, Anda dapat menemukan slice (atau fungsi-fungsi lain dari Array) seperti code1. Dan code2 menunjukkan kepada Anda Array dan instance- nya :

kode1:

[].slice; // find slice here
var arr = new Array();
arr.slice // find slice here
Array.prototype.slice // find slice here

kode2:

[].__proto__ == Array.prototype; // true
var arr = new Array();
arr.__proto__ == Array.prototype; // true

kesimpulan:

seperti yang Anda lihat []dan new Array()buat contoh baru dari Array. Dan mereka semua mendapatkan fungsi prototipe dariArray.prototype

Mereka hanya contoh berbeda dari Array. Jadi ini menjelaskan mengapa [] != []

:)

Saya mengalami perilaku aneh menggunakan [].

Kami memiliki "kelas" Model dengan bidang yang diinisialisasi ke beberapa nilai. Misalnya:

require([
  "dojo/_base/declare",
  "dijit/_WidgetBase",
], function(declare, parser, ready, _WidgetBase){

   declare("MyWidget", [_WidgetBase], {
     field1: [],
     field2: "",
     function1: function(),
     function2: function()
   });    
});

Saya menemukan bahwa ketika bidang diinisialisasi dengan []maka akan dibagikan oleh semua objek Model. Membuat perubahan pada satu mempengaruhi semua yang lain.

Ini tidak terjadi dengan menginisialisasi mereka new Array(). Sama untuk inisialisasi Objek ( {}vs baru Object())

TBH Saya tidak yakin apakah ini masalah dengan kerangka kerja yang kami gunakan ( Dojo )

Ada lebih dari ini yang bisa dilihat mata. Sebagian besar jawaban lain benar, TAPI JUGA ..

new Array(n)

• Mengizinkan engine merealokasi ruang untuk nelemen
• Dioptimalkan untuk pembuatan array
• Array yang dibuat ditandai jarang yang memiliki operasi array yang paling sedikit performanya, itu karena setiap akses indeks harus memeriksa batas, melihat apakah ada nilai dan berjalan di rantai prototipe
• Jika array ditandai sebagai jarang, tidak ada jalan kembali (setidaknya dalam V8), itu akan selalu lebih lambat selama masa pakainya, bahkan jika Anda mengisinya dengan konten (array yang dikemas) 1 ms atau 2 jam kemudian, tidak masalah

[1, 2, 3] || []

• Array yang dibuat ditandai dikemas (kecuali jika Anda menggunakan deleteatau [1,,3]sintaksis)
• Dioptimalkan untuk array operasi ( for .., forEach, map, dll)
• Engine perlu merealokasi ruang saat array bertambah

Ini mungkin tidak berlaku untuk versi / browser lama.

Saya telah menemukan satu perbedaan antara dua konstruksi yang menggigit saya cukup sulit.

Katakanlah saya punya:

function MyClass(){
  this.property1=[];
  this.property2=new Array();
};
var MyObject1=new MyClass();
var MyObject2=new MyClass();

Dalam kehidupan nyata, jika saya melakukan ini:

MyObject1.property1.push('a');
MyObject1.property2.push('b');
MyObject2.property1.push('c');
MyObject2.property2.push('d');

Yang akhirnya saya dapatkan adalah ini:

MyObject1.property1=['a','c']
MyObject1.property2=['b']
MyObject2.property1=['a','c']
MyObject2.property2=['d']

Saya tidak tahu spesifikasi bahasa apa yang seharusnya terjadi, tetapi jika saya ingin dua objek saya memiliki array properti unik di objek saya, saya harus menggunakan new Array().

Menggunakan konstruktor Array membuat array baru dengan panjang yang diinginkan dan mengisi masing-masing indeks dengan tidak terdefinisi, array yang ditetapkan ke variabel membuat indeks yang Anda berikan info untuknya.