Contoh ini merangkum teknik operasi umum untuk array JavaScript. Bagikan untuk referensi Anda. Dengan rincian sebagai berikut:
Kata pengantar
Saya percaya semua orang terbiasa menggunakan operasi terkait array yang biasa digunakan di perpustakaan kelas seperti jQuery atau garis bawah, seperti $ .isArray, _.some, _.find dan metode lainnya. Berikut ini tidak lebih dari sedikit pembungkus untuk operasi array JS asli.
Di sini kami terutama akan merangkum API umum untuk operasi array JavaScript. Saya percaya akan sangat membantu bagi semua orang untuk menyelesaikan masalah program.
1. Alam
Array dalam JavaScript adalah objek khusus, dan indeks yang digunakan untuk mewakili offset adalah properti dari objek, dan indeks mungkin bilangan bulat. Namun, indeks numerik ini dikonversi secara internal ke tipe string, karena nama atribut dalam objek JavaScript harus berupa string.
2. Operasi
1 Tentukan jenis array
Salin kode sebagai berikut: var array0 = []; // literal
var array1 = array baru (); // konstruktor
// Catatan: Metode array.isarray tidak didukung di bawah IE6/7/8
alert (array.isarray (array0));
// Pertimbangkan kompatibilitas, dapat digunakan
peringatan (array1 instance array);
// atau
alert (object.prototype.toString.call (array1) === '[objek array]');
2 array dan string
Sangat sederhana: Konversi dari array ke string, gunakan gabungan; Konversi dari string ke array, gunakan split.
Salin kode sebagai berikut: // gabungkan - konversi dari array ke string, gunakan gabungan
console.log (['hello', 'world']. gabung (',')); // halo, dunia
// split - konversi dari string ke array, menggunakan split
console.log ('halo world'.split (' ')); // ["halo", "dunia"]
3 Temukan elemen
Saya percaya bahwa semua orang sering menggunakan indeks tipe string, tetapi jarang tahu bahwa indeks dari suatu array juga dapat digunakan untuk menemukan elemen.
Salin kode sebagai berikut: // IndexOf - Temukan elemen
console.log (['abc', 'bcd', 'cde']. indexof ('bcd')); // 1
//
var objinarray = [
{
Nama: 'King',
Lulus: '123'
},
{
Nama: 'King1',
Lulus: '234'
}
];
console.log (objinarray.indexof ({
Nama: 'King',
Lulus: '123'
})); // -1
var elementofarray = objinarray [0];
console.log (objinarray.indexof (elementofarray)); // 0
Dari hal di atas, kita dapat melihat bahwa untuk array yang mengandung objek, metode indeks dari tidak memperoleh hasil pencarian yang sesuai melalui perbandingan yang mendalam, tetapi hanya membandingkan referensi dengan elemen yang sesuai.
4 koneksi array
Saat menggunakan concat, ketahuilah bahwa array baru akan dihasilkan setelah menggunakan concat.
Salinan kode adalah sebagai berikut: var array1 = [1, 2, 3];
var array2 = [4, 5, 6];
var array3 = array1.concat (array2); // Setelah menerapkan koneksi array, array baru akan dibuat
console.log (array3);
5 kategori operasi daftar
Untuk menambah elemen, Anda dapat menggunakan dorongan dan tidak ada masing -masing, dan untuk menghapus elemen, Anda dapat menggunakan POP dan bergeser masing -masing.
Salin kode sebagai berikut: // push/pop/shift/unshift
var array = [2, 3, 4, 5];
// Tambahkan ke akhir array
array.push (6);
console.log (array); // [2, 3, 4, 5, 6]
// Tambahkan ke header array
array.unshift (1);
console.log (array); // [1, 2, 3, 4, 5, 6]
// Hapus elemen terakhir
var elementofpop = array.pop ();
console.log (elementofpop); // 6
console.log (array); // [1, 2, 3, 4, 5]
// Hapus elemen pertama
var elementofshift = array.shift ();
console.log (elementofshift); // 1
console.log (array); // [2, 3, 4, 5]
6 Metode sambungan
Dua Kegunaan Utama:
① Tambahkan dan hapus elemen dari tengah array
② Dapatkan array baru dari array asli
Tentu saja, kedua kegunaan disintesis dalam satu gas. Beberapa skenario fokus pada tujuan satu, sementara yang lain fokus pada tujuan dua.
Tambahkan dan hapus elemen dari posisi tengah array. Metode sambungan menambahkan elemen ke array. Parameter berikut diperlukan.
① Mulai indeks (yaitu, di mana Anda ingin mulai menambahkan elemen)
② Jumlah elemen yang perlu dihapus atau jumlah elemen yang diekstraksi (parameter diatur ke 0 saat menambahkan elemen)
③ Elemen yang ingin Anda tambahkan ke array
Salinan kode adalah sebagai berikut: var nums = [1, 2, 3, 7, 8, 9];
nums.splice (3, 0, 4, 5, 6);
console.log (nums); // [1, 2, 3, 4, 5, 6, 7, 8, 9]
// Kemudian lakukan operasi hapus atau ekstrak array baru
var newnums = nums.splice (3, 4);
console.log (nums); // [1, 2, 3, 8, 9]
console.log (newnums); // [4, 5, 6, 7]
7 Sort
Pengantar utama untuk Metode Terbalik dan Sortir. Array Inversion menggunakan Reverse, metode sortir dapat digunakan tidak hanya untuk penyortiran sederhana, tetapi juga untuk penyortiran yang kompleks.
Salin kode sebagai berikut:/ Balikkan array
var array = [1, 2, 3, 4, 5];
array.reverse ();
console.log (array); // [5, 4, 3, 2, 1]
Kami pertama -tama mengurutkan array elemen string
var arrayofnames = ["David", "Mike", "Cynthia", "Clayton", "Bryan", "Raymond"];
arrayofnames.sort ();
console.log (arrayofnames); // ["Bryan", "Clayton", "Cynthia", "David", "Mike", "Raymond"]
Kami mengurutkan serangkaian elemen numerik
Salin kode sebagai berikut:/ Jika elemen array adalah tipe numerik, hasil penyortiran metode sort () tidak akan memuaskan.
var nums = [3, 1, 2, 100, 4, 200];
nums.sort ();
console.log (nums); // [1, 100, 2, 200, 3, 4]
Metode sortir mengurutkan elemen dalam urutan kamus, sehingga ia mengasumsikan bahwa semua elemen adalah tipe string, jadi bahkan jika elemen adalah tipe numerik, mereka dianggap tipe string. Pada saat ini, Anda dapat melewati fungsi perbandingan ukuran saat memanggil metode ini. Saat menyortir, metode sort () akan membandingkan ukuran dua elemen dalam array berdasarkan fungsi, dengan demikian menentukan urutan seluruh array.
Salin kode sebagai berikut: var perbandingan = fungsi (num1, num2) {
mengembalikan num1> num2;
};
nums.sort (bandingkan);
console.log (nums); // [1, 2, 3, 4, 100, 200]
var objinarray = [
{
Nama: 'King',
Lulus: '123',
Indeks: 2
},
{
Nama: 'King1',
Lulus: '234',
Indeks: 1
}
];
// Urutan naik sesuai dengan indeks untuk elemen objek dalam array
var compare = function (o1, o2) {
return o1.index> o2.index;
};
objinarray.sort (bandingkan);
console.log (objinarray [0] .Index <Objinarray [1] .index); // BENAR
8 Metode Iterator
Terutama termasuk foreach dan setiap, beberapa dan peta, filter
Saya percaya semua orang dapat melakukannya, dan saya terutama akan memperkenalkan empat metode lainnya.
Metode Every menerima fungsi dengan nilai pengembalian boolean, yang digunakan untuk setiap elemen dalam array. Jika fungsi kembali benar untuk semua elemen, metode ini mengembalikan true.
Salinan kode adalah sebagai berikut: var nums = [2, 4, 6, 8];
// metode iterator yang tidak menghasilkan array baru
var isEven = function (num) {
pengembalian num % 2 === 0;
};
// jika semuanya adalah angka, kembalikan true
console.log (nums.every (isEven)); // BENAR
Beberapa metode juga menerima fungsi dengan nilai pengembalian boolean. Selama ada elemen yang menyebabkan fungsi mengembalikan true, metode ini mengembalikan true.
var isEven = function (num) {
pengembalian num % 2 === 0;
};
var nums1 = [1, 2, 3, 4];
console.log (nums1.some (isEven)); // BENAR
Baik metode peta dan filter dapat menghasilkan array baru. Array baru yang dikembalikan oleh peta adalah hasil dari menerapkan fungsi ke elemen asli. menyukai:
Salin kode sebagai berikut: var up = function (grade) {
Kelas pengembalian += 5;
}
nilai var = [72, 65, 81, 92, 85];
var newgrades = nilai.ma
Metode filter sangat mirip dengan setiap metode, melewati fungsi dengan nilai pengembalian boolean. Berbeda dengan metode Every (), ketika fungsi diterapkan untuk semua elemen dalam array dan hasilnya benar, metode ini tidak mengembalikan true, tetapi mengembalikan array baru yang berisi elemen yang hasilnya benar setelah fungsi diterapkan.
Salin kode sebagai berikut: var isEven = function (num) {
pengembalian num % 2 === 0;
};
var isodd = function (num) {
pengembalian num % 2! == 0;
};
var nums = [];
untuk (var i = 0; i <20; i ++) {
num [i] = i + 1;
}
var evens = nums.filter (isEven);
Console.log (Evens); // [2, 4, 6, 8, 10, 12, 14, 16, 18, 20]
var odds = nums.filter (isodd);
Console.log (Odds); // [1, 3, 5, 7, 9, 11, 13, 15, 17, 19]
3. Ringkasan
Di atas juga memiliki masalah bahwa beberapa metode tidak didukung di browser tingkat rendah, dan metode lain perlu digunakan untuk implementasi yang kompatibel.
Ini adalah metode umum yang mungkin tidak mudah bagi semua orang untuk dipikirkan. Semua orang mungkin lebih memperhatikan lebih banyak.
Saya harap artikel ini akan membantu pemrograman JavaScript semua orang.