Bagaimana cara menginisialisasi panjang array dalam JavaScript?

Sebagian besar tutorial yang saya baca pada array dalam JavaScript (termasuk w3schools dan devguru ) menyarankan Anda untuk menginisialisasi array dengan panjang tertentu dengan mengirimkan integer ke konstruktor Array menggunakan var test = new Array(4);sintaks.

Setelah menggunakan sintaks ini secara bebas di file js saya, saya menjalankan salah satu file melalui jsLint , dan itu panik:

Kesalahan: Masalah pada karakter baris 1 22: Diharapkan ')' dan sebaliknya melihat '4'.
var test = new Array (4);
Masalah pada baris 1 karakter 23: Diharapkan ';' dan bukannya melihat ')'.
var test = new Array (4);
Masalah pada baris 1 karakter 23: Diharapkan pengidentifikasi dan bukannya melihat ')'.

Setelah membaca penjelasan jsLint tentang perilakunya , sepertinya jsLint tidak benar-benar menyukai new Array()sintaks, dan sebaliknya lebih suka []ketika mendeklarasikan array.

Jadi saya punya beberapa pertanyaan:

Pertama, mengapa? Apakah saya menjalankan risiko dengan menggunakan new Array()sintaks? Apakah ada ketidakcocokan browser yang harus saya ketahui?

Dan kedua, jika saya beralih ke sintaks braket persegi, apakah ada cara untuk mendeklarasikan array dan mengatur panjangnya semua pada satu baris, atau apakah saya harus melakukan sesuatu seperti ini:

var test = [];
test.length = 4;

1. Mengapa Anda ingin menginisialisasi panjangnya? Secara teoritis tidak perlu untuk ini. Itu bahkan dapat mengakibatkan perilaku membingungkan, karena semua tes yang menggunakan lengthuntuk mengetahui apakah array kosong atau tidak akan melaporkan bahwa array tidak kosong.
   Beberapa tes menunjukkan bahwa pengaturan panjang awal array besar bisa lebih efisien jika array diisi setelahnya, tetapi kinerja yang didapat (jika ada) tampaknya berbeda dari browser ke browser.

2. jsLint tidak suka new Array()karena konstruktornya ambigu.

   new Array(4);

   menciptakan array kosong dengan panjang 4. Tapi

   new Array('4');

   menciptakan array yang berisi nilai '4' .

Mengenai komentar Anda: Di JS Anda tidak perlu menginisialisasi panjang array. Itu tumbuh secara dinamis. Anda bisa menyimpan panjang dalam beberapa variabel, misalnya

var data = [];
var length = 5; // user defined length

for(var i = 0; i < length; i++) {
    data.push(createSomeObject());
}

• Array(5) memberi Anda sebuah array dengan panjang 5 tetapi tidak ada nilai, maka Anda tidak bisa mengulanginya.

• Array.apply(null, Array(5)).map(function () {}) memberi Anda sebuah array dengan panjang 5 dan tidak terdefinisi sebagai nilai, sekarang bisa diulangi.

• Array.apply(null, Array(5)).map(function (x, i) { return i; }) memberi Anda sebuah array dengan panjang 5 dan nilai 0,1,2,3,4.

• Array(5).forEach(alert)tidak melakukan apa-apa, Array.apply(null, Array(5)).forEach(alert)memberi Anda 5 peringatan

• ES6memberi kami Array.fromjadi sekarang Anda juga dapat menggunakanArray.from(Array(5)).forEach(alert)

• Jika Anda ingin menginisialisasi dengan nilai tertentu, ini bagus untuk diketahui ...
  Array.from('abcde'), Array.from('x'.repeat(5))
  atauArray.from({length: 5}, (v, i) => i) // gives [0, 1, 2, 3, 4]

Dengan ES2015.fill() sekarang Anda bisa melakukan:

// `n` is the size you want to initialize your array
// `0` is what the array will be filled with (can be any other value)
Array(n).fill(0)

Yang jauh lebih ringkas daripada Array.apply(0, new Array(n)).map(i => value)

Hal ini dimungkinkan untuk menjatuhkan 0di .fill()dan berjalan tanpa argumen, yang akan mengisi array dengan undefined. ( Namun, ini akan gagal di dalam Skrip )

[...Array(6)].map(x => 0);
// [0, 0, 0, 0, 0, 0]

ATAU

Array(6).fill(0);
// [0, 0, 0, 0, 0, 0]

Catatan: Anda tidak dapat mengulangi slot kosong yaitu Array(4).forEach(() => …)

ATAU

( naskah aman )

Array(6).fill(null).map((_, i) => i);
// [0, 1, 2, 3, 4, 5]

ATAU

Metode klasik menggunakan fungsi (berfungsi di browser apa saja)

function NewArray(size) {
    var x = [];
    for (var i = 0; i < size; ++i) {
        x[i] = i;
        return x;
    }
}

var a = NewArray(10);
// [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]

Membuat array bersarang

Saat membuat array 2D dengan fillintuitif harus membuat instance baru. Tetapi apa yang sebenarnya akan terjadi adalah array yang sama akan disimpan sebagai referensi.

var a = Array(3).fill([6]);
// [  [6], [6], [6]  ]

a[0].push(9);
// [  [6, 9], [6, 9], [6, 9]  ]

Larutan

var a = [...Array(3)].map(x => []);

a[0].push(4, 2);
// [  [4, 2], [], []  ]

Jadi Array 3x2 akan terlihat seperti ini:

[...Array(3)].map(x => Array(2).fill(0));
// [  [0, 0], [0, 0], [0, 0]  ]

Array N-dimensi

function NArray(...dimensions) {
    var index = 0;
    function NArrayRec(dims) {
        var first = dims[0], next = dims.slice().splice(1); 
        if(dims.length > 1) 
            return Array(dims[0]).fill(null).map((x, i) => NArrayRec(next ));
        return Array(dims[0]).fill(null).map((x, i) => (index++));
    }
    return NArrayRec(dimensions);
}

var arr = NArray(3, 2, 4);
// [   [  [ 0,  1,  2,  3 ] , [  4,  5,  6,  7]  ],
//     [  [ 8,  9,  10, 11] , [ 12, 13, 14, 15]  ],
//     [  [ 16, 17, 18, 19] , [ 20, 21, 22, 23]  ]   ]

Inisialisasi papan catur

var Chessboard = [...Array(8)].map((x, j) => {
    return Array(8).fill(null).map((y, i) => {
        return `${String.fromCharCode(65 + i)}${8 - j}`;
    });
});

// [ [A8, B8, C8, D8, E8, F8, G8, H8],
//   [A7, B7, C7, D7, E7, F7, G7, H7],
//   [A6, B6, C6, D6, E6, F6, G6, H6],
//   [A5, B5, C5, D5, E5, F5, G5, H5],
//   [A4, B4, C4, D4, E4, F4, G4, H4],
//   [A3, B3, C3, D3, E3, F3, G3, H3],
//   [A2, B2, C2, D2, E2, F2, G2, H2],
//   [A1, B1, C1, D1, E1, F1, G1, H1] ]

Terpendek:

[...Array(1000)]

Memperkenalkan ES6 Array.fromyang memungkinkan Anda membuat Arraydari setiap "array-seperti" atau iterables objek:

Array.from({length: 10}, (x, i) => i);
// [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]

Dalam hal ini {length: 10}mewakili definisi minimal objek "seperti array" : objek kosong dengan hanya lengthproperti yang ditentukan.

Array.from memungkinkan argumen kedua untuk memetakan di atas array yang dihasilkan.

Ini akan menginisialisasi properti panjang menjadi 4:

var x = [,,,,];

Saya terkejut belum ada solusi fungsional yang disarankan yang memungkinkan Anda untuk mengatur panjang dalam satu baris. Berikut ini didasarkan pada UnderscoreJS:

var test = _.map(_.range(4), function () { return undefined; });
console.log(test.length);

Untuk alasan yang disebutkan di atas, saya akan menghindari melakukan ini kecuali saya ingin menginisialisasi array ke nilai tertentu. Sangat menarik untuk dicatat ada perpustakaan lain yang mengimplementasikan jangkauan termasuk Lo-dash dan Lazy, yang mungkin memiliki karakteristik kinerja yang berbeda.

Tolonglah orang-orang tidak meninggalkan kebiasaan lama Anda dulu. Ada perbedaan besar dalam kecepatan antara mengalokasikan memori sekali kemudian bekerja dengan entri dalam array itu (seperti yang lama), dan mengalokasikannya berkali-kali ketika array tumbuh (yang tidak dapat dihindari apa yang dilakukan sistem di bawah tenda dengan metode yang disarankan lainnya) .

Tentu saja tidak ada yang penting, sampai Anda ingin melakukan sesuatu yang keren dengan array yang lebih besar. Lalu itu terjadi.

Melihat sepertinya masih ada opsi di JS saat ini untuk mengatur kapasitas awal array, saya menggunakan yang berikut ...

var newArrayWithSize = function(size) {
  this.standard = this.standard||[];
  for (var add = size-this.standard.length; add>0; add--) {
   this.standard.push(undefined);// or whatever
  }
  return this.standard.slice(0,size);
}

Ada pengorbanan yang terlibat:

• Metode ini memakan waktu selama yang lain untuk panggilan pertama ke fungsi, tetapi sangat sedikit waktu untuk panggilan kemudian (kecuali meminta array yang lebih besar).
• The standardArray tidak permanen cadangan ruang sebanyak array terbesar Anda minta.

Tetapi jika itu sesuai dengan apa yang Anda lakukan, mungkin ada hasilnya. Penempatan waktu yang tidak resmi

for (var n=10000;n>0;n--) {var b = newArrayWithSize(10000);b[0]=0;}

di cukup cepat (sekitar 50 ms untuk 10.000 mengingat bahwa dengan n = 1000000 butuh sekitar 5 detik), dan

for (var n=10000;n>0;n--) {
  var b = [];for (var add=10000;add>0;add--) {
    b.push(undefined);
  }
}

lebih dari satu menit (sekitar 90 detik untuk 10.000 pada konsol chrome yang sama, atau sekitar 2000 kali lebih lambat). Itu tidak hanya alokasi, tetapi juga 10.000 dorongan, untuk loop, dll.

(ini mungkin lebih baik sebagai komentar, tetapi terlalu lama)

Jadi, setelah membaca ini saya ingin tahu apakah pra-alokasi sebenarnya lebih cepat, karena secara teori seharusnya. Namun, blog ini memberikan beberapa saran untuk mencegahnya http://www.html5rocks.com/en/tutorials/speed/v8/ .

Jadi masih ragu, saya mengujinya. Dan ternyata itu ternyata lebih lambat.

var time = Date.now();
var temp = [];
for(var i=0;i<100000;i++){
    temp[i]=i;
}
console.log(Date.now()-time);


var time = Date.now();
var temp2 = new Array(100000);
for(var i=0;i<100000;i++){
    temp2[i] = i;
}
console.log(Date.now()-time); 

Kode ini menghasilkan yang berikut setelah beberapa santai berjalan:

$ node main.js 
9
16
$ node main.js 
8
14
$ node main.js 
7
20
$ node main.js 
9
14
$ node main.js 
9
19

var arr=[];
arr[5]=0;
alert("length="+arr.length); // gives 6

Ini solusi lain

var arr = Array.apply( null, { length: 4 } );
arr;  // [undefined, undefined, undefined, undefined] (in Chrome)
arr.length; // 4

Argumen pertama apply()adalah objek yang mengikat ini, yang tidak kami pedulikan di sini, jadi kami atur null.

Array.apply(..)memanggil Array(..)fungsi dan menyebarkan nilai { length: 3 }objek sebagai argumennya.

Konstruktor array memiliki sintaks yang ambigu , dan JSLint hanya menyakiti perasaan Anda.

Juga, kode contoh Anda rusak, varpernyataan kedua akan memunculkan a SyntaxError. Anda sedang mengatur properti lengtharray test, jadi tidak perlu yang lain var.

Sejauh pilihan Anda, array.lengthadalah satu-satunya "bersih". Pertanyaannya adalah, mengapa Anda perlu mengatur ukuran di tempat pertama? Cobalah untuk memperbaiki kode Anda untuk menghilangkan ketergantungan itu.

Dengan asumsi bahwa panjang Array adalah konstan. Dalam Javascript, Ini yang kami lakukan:

const intialArray = new Array(specify the value);

Seperti dijelaskan di atas, menggunakan new Array(size)agak berbahaya. Alih-alih menggunakannya secara langsung, letakkan di dalam "fungsi pembuat array". Anda dapat dengan mudah memastikan bahwa fungsi ini bebas bug dan Anda terhindar dari bahaya menelepon new Array(size)langsung. Selain itu, Anda dapat memberikan nilai awal default opsional. createArrayFungsi ini melakukan hal itu:

function createArray(size, defaultVal) {
    var arr = new Array(size);
    if (arguments.length == 2) {
        // optional default value
        for (int i = 0; i < size; ++i) {
            arr[i] = defaultVal;
        }
    }
    return arr;
}

Dalam sebagian besar jawaban, disarankan ke fillarray karena jika tidak, "Anda tidak dapat mengulanginya" , tetapi ini tidak benar. Anda dapat mengulangi array yang kosong, hanya saja tidak dengan forEach. Sementara loop, untuk loop dan untuk loop saya bekerja dengan baik.

const count = Array(5);

Tidak bekerja.

console.log('---for each loop:---');
count.forEach((empty, index) => {
    console.log(`counting ${index}`);
});

Pekerjaan ini:

console.log('---for of loop:---');
for (let [index, empty] of count.entries()) {
  console.log(`counting for of loop ${index}`);
}

console.log('---for i loop:---');
for (let i = 0, il = count.length; i < il; ++i) {
  console.log(`counting for i loop ${i}`);
}

console.log('---while loop:---');
let index = 0;
while (index < count.length) { 
  console.log(`counting while loop ${index}`); 
  index++; 
}

Periksa biola ini dengan contoh di atas.

Juga angulars *ngForberfungsi dengan baik dengan array kosong:

<li *ngFor="let empty of count; let i = index" [ngClass]="
  <span>Counting with *ngFor {{i}}</span>
</li>

Anda dapat mengatur panjang array dengan menggunakan array.length = youValue

Jadi itu akan terjadi

var myArray = [];
myArray.length = yourValue;

Alasan Anda tidak boleh menggunakan new Arrayditunjukkan oleh kode ini:

var Array = function () {};

var x = new Array(4);

alert(x.length);  // undefined...

Beberapa kode lain dapat mengacaukan dengan variabel Array. Saya tahu ini agak terlalu jauh bahwa siapa pun akan menulis kode seperti itu, tetapi masih ...

Juga, seperti yang dikatakan Felix King, antarmuka sedikit tidak konsisten, dan dapat menyebabkan beberapa bug yang sangat sulit dilacak.

Jika Anda menginginkan array dengan length = x, diisi dengan undefined (seperti yang new Array(x)akan dilakukan), Anda bisa melakukan ini:

var x = 4;
var myArray = [];
myArray[x - 1] = undefined;

alert(myArray.length); // 4