Tatasusunan JavaScript
Peranan objek tatasusunan adalah untuk menyimpan satu siri nilai menggunakan nama pembolehubah yang berasingan.
Instance dalam talian
Buat tatasusunan dan tetapkan nilai kepadanya:
Instance
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> </head> <body> <script> var i; var mycars = new Array(); mycars[0] = "Saab"; mycars[1] = "Volvo"; mycars[2] = "BMW"; for (i=0;i<mycars.length;i++){ document.write(mycars[i] + "<br>"); } </script> </body> </html>
Jalankan Instance »
Klik butang "Run Instance" untuk melihat contoh dalam talian
Anda boleh menemui lebih banyak kejadian di bahagian bawah halaman.
Apakah tatasusunan?
Objek tatasusunan menggunakan nama pembolehubah yang berasingan untuk menyimpan satu siri nilai.
Jika anda mempunyai set data (contohnya: nama kereta), terdapat pembolehubah berasingan seperti berikut:
var car2="Volvo";
var car3="BMW";
Namun, bagaimana jika anda ingin mencari kereta tertentu? Dan bukan 3 kereta, tetapi 300 kereta? Ini tidak akan menjadi tugas yang mudah!
Cara terbaik ialah menggunakan tatasusunan.
Suatu tatasusunan boleh menyimpan semua nilai menggunakan nama pembolehubah, dan sebarang nilai boleh diakses menggunakan nama pembolehubah.
Setiap elemen dalam tatasusunan mempunyai ID sendiri supaya ia boleh diakses dengan mudah.
Buat tatasusunan
Terdapat tiga cara untuk mencipta tatasusunan.
Kod berikut mentakrifkan objek tatasusunan bernama myCars:
1: Cara konvensional:
myCars[0 ]="Saab";
myCars[1]="Volvo";
myCars[2]="BMW";
2: Cara mudah:
3: Literal:
Mengakses Tatasusunan
Anda boleh mengakses elemen tertentu dengan menyatakan nama tatasusunan dan nombor indeks.
Tokoh berikut boleh mengakses nilai pertama tatasusunan myCars:
Contoh berikut mengubah suai elemen pertama tatasusunan myCars:
[0] 是数组的第一个元素。[1] 是数组的第二个元素。 |
Dalam tatasusunan anda boleh mempunyai objek yang berbeza
Semua pembolehubah JavaScript ialah objek. Elemen tatasusunan ialah objek. Fungsi ialah objek.
Oleh itu, anda boleh mempunyai jenis pembolehubah yang berbeza dalam tatasusunan.
Anda boleh mengandungi elemen objek, fungsi dan tatasusunan dalam tatasusunan:
myArray[1]=myFunction;
myArray[2]=myCars;
Kaedah dan sifat tatasusunan
Sifat dan kaedah yang dipratentukan menggunakan objek tatasusunan:
var y=myCars.indexOf("Volvo") // Nilai indeks nilai "Volvo"
Lengkapkan tatasusunan Manual rujukan objek
Anda boleh merujuk tapak ini untuk mendapatkan manual rujukan lengkap tentang semua sifat dan kaedah tatasusunan.
Manual rujukan mengandungi penerangan tentang semua sifat dan kaedah (dan lebih banyak contoh).
Manual Rujukan Objek Tatasusunan Lengkap
Mencipta kaedah baharu
Prototaip ialah pembina global JavaScript. Ia boleh membina sifat dan kaedah objek Javascript baharu.
Instance
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> </head> <body> <p id="demo">单击按钮创建一个数组,调用ucase()方法, 并显示结果。</p> <button onclick="myFunction()">点我</button> <script> Array.prototype.myUcase=function(){ for (i=0;i<this.length;i++){ this[i]=this[i].toUpperCase(); } } function myFunction(){ var fruits = ["Banana", "Orange", "Apple", "Mango"]; fruits.myUcase(); var x=document.getElementById("demo"); x.innerHTML=fruits; } </script> </body> </html>
Run Instance»
Klik butang "Run Instance" untuk melihat contoh dalam talian
Contoh di atas mencipta kaedah tatasusunan baharu untuk menukar aksara huruf kecil tatasusunan kepada aksara huruf besar.
Lagi contoh
Gabung dua tatasusunan - concat()
Gabungkan tiga tatasusunan - concat()
Instance
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> </head> <body> <script> var hege = ["Cecilie", "Lone"]; var stale = ["Emil", "Tobias", "Linus"]; var kai = ["Robin"]; var children = hege.concat(stale,kai); document.write(children); </script> </body> </html>
Run Instance»
Klik butang "Run Instance" untuk melihat contoh dalam talian
Gunakan Elemen tatasusunan membentuk rentetan - join()
Instance
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> </head> <body> <script> var parents = ["Jani", "Tove"]; var brothers = ["Stale", "Kai Jim", "Borge"]; var children = ["Cecilie", "Lone"]; var family = parents.concat(brothers, children); document.write(family); </script> </body> </html>
Run Instance»
Klik Butang "Jalankan Instance" untuk melihat contoh dalam talian
Padam elemen terakhir tatasusunan - pop()
Instance
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> </head> <body> <p id="demo">点击按钮将数组作为字符串输出。</p> <button onclick="myFunction()">点我</button> <script> function myFunction(){ var fruits = ["Banana", "Orange", "Apple", "Mango"]; var x=document.getElementById("demo"); x.innerHTML=fruits.join(); } </script> </body> </html>
Jalankan Instance»
Klik butang "Run Instance" untuk melihat contoh dalam talian
Tambah elemen baharu pada penghujung tatasusunan - push( )
Terbalikkan susunan elemen dalam tatasusunan - reverse()
Instance
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> </head> <body> <p id="demo">单击按钮删除数组的最后一个元素。</p> <button onclick="myFunction()">点我</button> <script> var fruits = ["Banana", "Orange", "Apple", "Mango"]; function myFunction(){ fruits.pop(); var x=document.getElementById("demo"); x.innerHTML=fruits; } </script> </body> </html>
Run Instance»
Klik butang "Run Instance" untuk melihat contoh dalam talian
Alih keluar elemen pertama tatasusunan - shift()
Instance
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> </head> <body> <p id="demo">单击按钮给数组添加新的元素。</p> <button onclick="myFunction()">点我</button> <script> var fruits = ["Banana", "Orange", "Apple", "Mango"]; function myFunction(){ fruits.push("Kiwi") var x=document.getElementById("demo"); x.innerHTML=fruits; } </script> </body> </html>
Jalankan instance »
Klik butang "Jalankan" Contoh" untuk melihat contoh dalam talian
Pilih elemen daripada tatasusunan - slice()
Contoh
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> </head> <body> <p id="demo">单击按钮将数组反转排序。</p> <button onclick="myFunction()">点我</button> <script> var fruits = ["Banana", "Orange", "Apple", "Mango"]; function myFunction(){ fruits.reverse(); var x=document.getElementById("demo"); x.innerHTML=fruits; } </script> </body> </html>
Jalankan Instance»
Klik butang "Run Instance" untuk melihat contoh dalam talian
Isih tatasusunan (dalam susunan abjad menaik) - sort()
Instance
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> </head> <body> <p id="demo">单击按钮删除数组的第一个元素。</p> <button onclick="myFunction()">点我</button> <script> var fruits = ["Banana", "Orange", "Apple", "Mango"]; function myFunction(){ fruits.shift(); var x=document.getElementById("demo"); x.innerHTML=fruits; } </script> </body> </html>
Run Instance»
Klik butang "Run Instance" untuk melihat instance dalam talian
Isih berangka (dalam tertib berangka menaik ) - sort()
Instance
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> </head> <body> <p id="demo">点击按钮截取数组下标 1 到 2 的元素。</p> <button onclick="myFunction()">点我</button> <script> function myFunction(){ var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"]; var citrus = fruits.slice(1,3); var x=document.getElementById("demo"); x.innerHTML=citrus; } </script> </body> </html>
Jalankan Instance» Klik butang "Jalankan Instance" untuk melihat contoh dalam talian
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> </head> <body> <p id="demo">单击按钮升序排列数组。</p> <button onclick="myFunction()">点我</button> <script> function myFunction(){ var fruits = ["Banana", "Orange", "Apple", "Mango"]; fruits.sort(); var x=document.getElementById("demo"); x.innerHTML=fruits; } </script> </body> </html>
Jalankan instance »Klik butang "Run Instance" untuk melihat contoh dalam talian
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> </head> <body> <p id="demo">单击按钮升序排列数组。</p> <button onclick="myFunction()">点我</button> <script> function myFunction(){ var points = [40,100,1,5,25,10]; points.sort(function(a,b){return a-b}); var x=document.getElementById("demo"); x.innerHTML=points; } </script> </body> </html>
Run instance»Klik butang "Run instance" untuk melihat instance dalam talian
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> </head> <body> <p id="demo">单击按钮降序排列数组。</p> <button onclick="myFunction()">点我</button> <script> function myFunction(){ var points = [40,100,1,5,25,10]; points.sort(function(a,b){return b-a}); var x=document.getElementById("demo"); x.innerHTML=points; } </script> </body> </html>
Jalankan Instance»Klik butang "Jalankan Instance" untuk melihat contoh dalam talian
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> </head> <body> <p id="demo">点击按钮向数组添加元素。</p> <button onclick="myFunction()">点我</button> <script> function myFunction(){ var fruits = ["Banana", "Orange", "Apple", "Mango"]; fruits.splice(2,0,"Lemon","Kiwi"); var x=document.getElementById("demo"); x.innerHTML=fruits; } </script> </body> </html>
Jalankan instance »Klik butang "Run" Contoh" untuk melihat contoh dalam talian