array JavaScript yang mendalam dan mudah difahami: Penjelasan terperinci Penciptaan dan Operasi
mata teras
length
push
dan unshift
; splice
pop
shift
Ketahui cara memanipulasi tatasusunan JavaScript. Kami akan merangkumi proses penciptaan array, menukar panjang array, dan menambah, mengeluarkan, dan menggantikan penyertaan. Atribut splice
objek adalah harta yang banyak pemula dalam JavaScript tidak faham. Ramai orang tersilap percaya bahawa berfungsi, mari kita lihat apa yang berlaku apabila kita mengubah nilainya atau menjalankan operasi yang juga menyebabkan perubahan panjang. Mari mulakan dari awal. Arus JavaScript mempunyai atribut bernama Array
dan boleh diberi pilihan atribut bernombor yang namanya antara 0 dan 4294967294 (termasuk). Ia juga mempunyai beberapa kaedah untuk memanipulasi sifat, beberapa di antaranya kita akan melihat ketika memeriksa bagaimana sifat length
berfungsi. Perhatikan bahawa JavaScript tidak menyokong array bersekutu, jadi semasa anda boleh menambah sifat bernama pada array, mereka tidak menjadi sebahagian daripada array dan akan diabaikan oleh semua kaedah array. Mereka juga tidak menjejaskan panjang. Untuk menjadikannya lebih mudah untuk menunjukkan apa yang berlaku kepada Array Properties apabila bekerja dengan pelbagai kenyataan, kami akan menjalankan fungsi berikut selepas setiap kod. Ini merekodkan panjang array dan semua sifat bernombor ke konsol penyemak imbas. length
length
length
length
Artikel ini dikaji semula oleh Chris Perry dan Marcello La Rocca. Terima kasih kepada semua pengulas rakan sebaya SitePoint untuk membuat kandungan SitePoint Perfect! length
var test = function(array) { console.log('length:'+ array.length); array.forEach(function(element, index, array) { console.log(index + ':' + element); }); };
kita akan melihat cara yang berbeza untuk membuat tatasusunan dalam JavaScript. Arahan yang dibuat oleh dua contoh pertama hanya ditetapkan panjang dan tidak mempunyai entri bernombor sama sekali. Dua contoh terakhir membuat entri bernombor dari 0 hingga minus panjang 1. Arahan dengan panjang yang lebih besar daripada atribut bernombor dipanggil array jarang, manakala array dengan panjang sama dengan atribut bernombor dipanggil array padat.
var test = function(array) { console.log('length:'+ array.length); array.forEach(function(element, index, array) { console.log(index + ':' + element); }); };
Perhatikan bahawa apabila membuat array baru, notasi literal array lebih disukai (menentukan array baru dengan kurungan kosong).
// 创建一个没有编号条目的数组 var arr = new Array(5); test(arr); // length: 5 var arr = []; arr.length = 5; test(arr); // length: 5
kaedah array yang mengendalikan atribut bernombor (dalam kes ini forEach
) hanya akan mengendalikan atribut sedia ada. Jika anda gelung sebaliknya dengan for
atau while
, gelung juga cuba memproses sifat-sifat yang tidak wujud, dan array mengenal pasti entri yang tidak wujud sebagai undefined
. Kod anda tidak akan dapat membezakan contoh terakhir di atas dari dua contoh pertama. Jika anda tidak pasti jika anda bekerja pada tatasusunan yang padat, anda harus sentiasa menggunakan kaedah array untuk memproses array.
Contoh berikut melihat apa yang berlaku jika kita menetapkan panjang baru untuk array yang lebih kecil daripada panjang semasa.
var arr = ['a', 'b', 'c', 'd', 'e']; test(arr); // length:5, 0:a, 1:b, 2:c, 3:d, 4:e var arr = [undefined, undefined, undefined, undefined, undefined]; test(arr); // length:5, 0:undefined, 1:undefined, 2:undefined, 3:undefined, 4:undefined
Perhatikan bahawa apabila membuat array menggunakan notasi []
, setiap entri terdiri daripada nilai yang diikuti oleh koma. Jika nilai ditinggalkan, tiada atribut dibuat untuk lokasi tersebut. Koma terakhir hanya boleh ditinggalkan apabila nilai disediakan untuk harta ini, jika tidak, panjang akan dikurangkan oleh satu.
JavaScript menyediakan tiga kaedah pop
, shift
dan splice
untuk menghapuskan penyertaan dari array, dengan itu mengurangkan panjang array. Dalam setiap kes, nilai yang dikeluarkan (atau nilai) dikembalikan oleh panggilan.
var arr = ['a', 'b', 'c', 'd', 'e', 'f']; test(arr); // length:6, 0:a, 1:b, 2:c, 3:d, 4:e, 5:f arr.length = 5; test(arr); // length:5, 0:a, 1:b, 2:c, 3:d, 4:e var arr = ['a','b','c','d','e','f',,,]; test(arr); // length:8, 0:a, 1:b, 2:c, 3:d, 4:e, 5:f arr.length = 7; test(arr); // length:7, 0:a, 1:b, 2:c, 3:d, 4:e, 5:f
kita boleh menambah entri baru ke array dengan hanya menyatakan di mana atribut bernombor belum wujud. Kami juga boleh menggunakan salah satu daripada tiga kaedah yang disediakan oleh JavaScript (push
, unshift
dan splice
) untuk memasukkan penyertaan baru dan memindahkan entri lama jika perlu.
// pop() 从数组中移除最后一个元素 var arr = ['a','b','c','d','e','f']; var el = arr.pop(); test(arr); // length:5, 0:a, 1:b, 2:c, 3:d, 4:e console.log(el); // f // shift() 从数组中移除第一个元素 var arr = ['a','b','c','d','e','f']; var el = arr.shift(); test(arr); // length:5, 0:b, 1:c, 2:d, 3:e, 4:f console.log(el); // a // splice() 可以移除现有元素 var arr1 = ['a','b','c','d','e','f']; var arr2 = arr1.splice(0,2); // 从索引0开始移除2个元素 test(arr1); // length:4, 0:c, 1:d, 2:e, 3:f test(arr2); // length:2, 0:a, 1:b var arr1 = ['a','b','c','d','e','f',,,'i']; var arr2 = arr1.splice(6,2); // 从索引6开始移除2个元素 test(arr1); // length:7, 0:a, 1:b, 2:c, 3:d, 4:e, 5:f, 6:i test(arr2); // length:2
Jika kita memberikan nilai baru kepada entri yang sedia ada, entri itu hanya akan mendapat nilai baru, dan seluruh array tidak akan terjejas. Begitu juga, dengan menggabungkan variasi kaedah splice()
yang telah kita pelajari, kita boleh menggantikan entri sedia ada atau mengisi kekosongan dalam array.
var arr = ['a','b','c','d','e','f',,,'i']; arr[11] = 'l'; test(arr); // length:12, 0:a, 1:b, 2:c, 3:d, 5:f, 8:i, 11:l // push() 将一个或多个元素添加到数组的末尾 var arr = ['a','b','c','d','e','f',,,,]; arr.push('j'); test(arr); // length:10, 0:a, 1:b, 2:c, 3:d, 5:f, 9:j // unshift() 将一个或多个元素添加到数组的开头 var arr = ['a','b','c','d','e','f',,,,]; arr.unshift('x'); test(arr); // length:10, 0:x, 1:a, 2:b, 3:c, 4:d, 5:e, 6:f arr1 = ['a','b','c','d','e','f',,,'i']; arr2 = arr1.splice(6,0,'g','h'); // 从索引6移除0个元素,并插入'g'、'h' test(arr1); // length:11, 0:a, 1:b, 2:c, 3:d, 5:f, 6:g, 7:h, 10:i test(arr2); // length:0
Contoh di atas harus memberi anda pemahaman yang lebih baik tentang bagaimana sifat -sifat length
kerja array. Ini boleh menjadi lebih besar daripada atau sama dengan bilangan penyertaan dalam array. Jika sama, kita mempunyai pelbagai padat; Peranan tepat kaedah array tertentu mungkin bergantung kepada sama ada terdapat sifat dalam array jarang yang sepadan dengan kedudukan tertentu. Jika kita menukar panjang array, ia menghilangkan sebarang atribut bernombor dalam array yang kedudukannya lebih besar daripada panjang baru. Jika panjangnya sama dengan bilangan atribut bernombor, dan kami meningkatkan panjang, maka kami menukar array padat ke array jarang. Kaedah array yang memadam dan menambah atribut dalam array akan memindahkan penyertaan sedia ada jika perlu dan juga akan memelihara dan memindahkan sebarang jurang antara atribut.
Dalam JavaScript, anda boleh menggunakan kaedah push()
untuk menambah elemen ke array. Kaedah ini menambah item baru ke hujung array dan mengembalikan panjang baru. Berikut adalah contoh:
var test = function(array) { console.log('length:'+ array.length); array.forEach(function(element, index, array) { console.log(index + ':' + element); }); };
JavaScript menyediakan beberapa cara untuk menghapuskan elemen dari array. Kaedah pop()
membuang elemen terakhir dari array dan mengembalikan elemen. Kaedah shift()
membuang elemen pertama dari array dan mengembalikan elemen. Berikut adalah cara menggunakan kaedah ini:
// 创建一个没有编号条目的数组 var arr = new Array(5); test(arr); // length: 5 var arr = []; arr.length = 5; test(arr); // length: 5
(kandungan FAQ berikutnya selaras dengan teks asal, ditinggalkan di sini untuk mengelakkan pertindihan)
Atas ialah kandungan terperinci Array JavaScript: Cara Membuat dan Memanipulasi. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!