Rumah  >  Artikel  >  hujung hadapan web  >  Mencipta Tatasusunan dalam JavaScript: Panduan Komprehensif

Mencipta Tatasusunan dalam JavaScript: Panduan Komprehensif

WBOY
WBOYasal
2024-07-18 18:23:22984semak imbas

Creating Arrays in JavaScript: A Comprehensive Guide

Membuat tatasusunan dalam JavaScript ialah tugas asas, namun terdapat beberapa nuansa dan gotcha yang mungkin terlepas pandang oleh pembangun berpengalaman. Mari selami asasnya dan terokai beberapa aspek menarik dalam penciptaan tatasusunan dan manipulasi yang mungkin anda dapati mencerahkan.

Penciptaan Tatasusunan Asas

Cara paling mudah untuk mencipta tatasusunan ialah menggunakan literal tatasusunan:

let arr = [];

Anda kemudian boleh mengisi tatasusunan ini menggunakan gelung:

for (let i = 0; i < 5; i++) {
  arr.push(i);
}

Ini mencipta tatasusunan dengan elemen [0, 1, 2, 3, 4]. Walau bagaimanapun, jika anda mencipta tatasusunan kosong tanpa mengisinya, anda akan mendapat tatasusunan tanpa item dan tiada slot kosong.

Menggunakan Array Constructor

Cara lain untuk mencipta tatasusunan ialah menggunakan pembina Tatasusunan:

let arr = Array(5);

Apabila satu hujah berangka diluluskan, ia mencipta tatasusunan jarang dengan panjang yang ditentukan tetapi tiada unsur sebenar:

console.log(arr.length); // 5
console.log(arr); // [empty × 5]

Susunan Jarang

Tatasusunan jarang mempunyai "slot kosong", yang boleh membawa kepada tingkah laku yang tidak dijangka apabila menggunakan kaedah seperti peta, penapis atau forEach. Kaedah ini melangkau slot kosong:

let arr = Array(5);
arr = arr.map((x, i) => i); // Still [empty × 5]

Untuk mengisi tatasusunan sedemikian, anda perlu menetapkan nilai secara manual:

arr[0] = 2;
arr[4] = 3;
console.log(arr); // [2, empty × 3, 3]

Mengendalikan Tatasusunan Jarang

Untuk mengendalikan tatasusunan jarang dengan berkesan, anda boleh menggunakan kaedah seperti isian untuk memulakan nilai:

let arr = Array(5).fill(1);
console.log(arr); // [1, 1, 1, 1, 1]

Tetapi berhati-hati apabila mengisi dengan objek atau tatasusunan:

let arr = Array(5).fill({});
arr[0].name = 'John';
console.log(arr); // [{name: 'John'}, {name: 'John'}, {name: 'John'}, {name: 'John'}, {name: 'John'}]

Setiap elemen merujuk objek yang sama. Untuk mengelakkan perkara ini, gunakan peta:

let arr = Array(5).fill(0).map(() => ({}));
arr[0].name = 'John';
console.log(arr); // [{name: 'John'}, {}, {}, {}, {}]

Tatasusunan.daripada Kaedah

Array.from menyediakan cara serba boleh untuk mencipta tatasusunan daripada objek seperti tatasusunan atau boleh lelar:

let arr = Array.from({ length: 5 }, (_, i) => i);
console.log(arr); // [0, 1, 2, 3, 4]

Kaedah ini juga boleh membantu semasa mencipta tatasusunan dua dimensi:

let arr2D = Array.from({ length: 5 }, () => Array(5).fill(0));
arr2D[0][0] = 1;
console.log(arr2D); // [[1, 0, 0, 0, 0], [0, 0, 0, 0, 0], [0, 0, 0, 0, 0], [0, 0, 0, 0, 0], [0, 0, 0, 0, 0]]

Berulang Lebih Tatasusunan

JavaScript menyediakan beberapa cara untuk mengulangi tatasusunan, setiap satu memperlakukan tatasusunan jarang secara berbeza:

  • untuk gelung: Memproses setiap indeks, menganggap slot kosong sebagai tidak ditentukan.
  • for...in: Berulang ke atas indeks tatasusunan, melangkau slot kosong.
  • untuk...daripada: Mengulang nilai, menganggap slot kosong sebagai tidak ditentukan.

Kesimpulan

Memahami selok-belok penciptaan tatasusunan dan manipulasi dalam JavaScript boleh membantu anda mengelakkan perangkap biasa dan menulis kod yang lebih cekap. Sama ada anda menggunakan literal tatasusunan, pembina Tatasusunan atau kaedah seperti Array.from dan isi, mengetahui cara alatan ini berfungsi akan membolehkan anda mengendalikan tatasusunan dengan berkesan dalam projek anda.

Jika anda mendapati panduan ini membantu, beritahu saya. Saya sentiasa tidak sabar-sabar untuk mencipta lebih banyak kandungan yang menyelidiki masalah dan selak JavaScript. Terima kasih kerana membaca, dan selamat mengekod!

Atas ialah kandungan terperinci Mencipta Tatasusunan dalam JavaScript: Panduan Komprehensif. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn