15 Kaedah Susunan JavaScript yang Harus Anda Kuasai Hari Ini

Pembangun laman web dari semua peringkat kemahiran, dari pemrogram pemula hingga pakar pengkodan, melihat pentingnya JavaScript dalam mengembangkan laman web moden. JavaScript begitu dominan sehingga kemahiran penting untuk mengetahui sama ada anda akan membuat aplikasi web.

Salah satu blok bangunan paling kuat yang terdapat dalam bahasa JavaScript ialah tatasusunan. Susunan biasanya terdapat dalam banyak bahasa pengaturcaraan dan berguna untuk menyimpan data.

JavaScript juga merangkumi ciri berguna yang dikenali sebagai kaedah larik. Berikut adalah lima belas yang perlu anda perhatikan untuk mengembangkan kemahiran anda sebagai pemaju.

Apakah Kaedah Array?

Kaedah susun atur adalah fungsi yang terdapat dalam JavaScript yang dapat anda gunakan untuk tatasusunan anda. Setiap kaedah mempunyai fungsi unik yang melakukan perubahan atau perhitungan pada susunan anda, sehingga Anda tidak perlu membuat kod fungsi umum dari awal.

Kaedah array dalam JavaScript dijalankan menggunakan notasi titik yang dilampirkan pada pemboleh ubah array anda. Oleh kerana mereka hanya fungsi JavaScript, mereka selalu berakhir dengan tanda kurung yang dapat menahan argumen pilihan. Inilah kaedah yang dilampirkan pada larik mudah yang dipanggil myArray .

let myArray = [1,2,3]; myArray.pop();

Kod ini akan menggunakan kaedah yang dipanggil pop ke tatasusunan.

Array Contoh

Untuk setiap contoh, gunakan susunan sampel yang akan kami panggil myArray , untuk menjalankan kaedah pada. Jangan ragu untuk menggunakan konsol dan kod anda.

let myArray = [2,4,5,7,9,12,14];

Contoh-contoh ini akan menganggap anda mengetahui asasnya apa itu JavaScript dan bagaimana ia berfungsi . Sekiranya anda tidak melakukannya, kami semua di sini untuk belajar dan berkembang.

Cari kaedah lima belas kaedah yang kuat ini!

1. Array.push ()

Apa ia lakukan: tolak () mengambil tatasusunan anda dan menambahkan satu atau lebih elemen pada akhir array, kemudian mengembalikan panjang array yang baru. Kaedah ini akan mengubah susunan sedia ada anda.

Tambahkan nombor 20 ke tatasusunan dengan menjalankan tolak () , menggunakan 20 sebagai hujah.

let myArray = [2,4,5,7,9,12,14];  
myArray.push(20);

Periksa sama ada ia berfungsi:

console.log(myArray); [2,4,5,7,9,12,14,20]

Menjalankan tolak () kaedah pada myArray menambahkan nilai yang diberikan dalam argumen ke dalam array. Dalam kes ini, 20. Semasa anda memeriksa myArray di konsol, anda akan melihat nilainya kini ditambahkan pada akhir array.

2. Array.concat ()

Apa ia lakukan: ringkas () dapat menggabungkan dua atau lebih tatasusunan menjadi tatasusunan baru. Ia tidak mengubah susunan yang ada tetapi membuat yang baru.

Ambil myArray dan menggabungkan tatasusunan yang dipanggil Array baru ke dalamnya.

let myArray = [2,4,5,7,9,12,14];  
let newArray = [1,2,3];  
let result = myArray.concat(newArray);

console.log(result); [2,4,5,7,9,12,14,1,2,3]

Kaedah ini memberikan keajaiban ketika menghadapi pelbagai tatasusunan atau nilai yang perlu anda gabungkan, semuanya dalam satu langkah yang cukup mudah ketika menggunakan pemboleh ubah.

3. Array.join ()

Apa ia lakukan: sertai () mengambil array dan menggabungkan isi array, dipisahkan dengan koma. Hasilnya diletakkan dalam tali. Anda boleh menentukan pemisah jika anda ingin menggunakan alternatif koma.

Lihat bagaimana ini berfungsi menggunakan myArray. Mula-mula menggunakan kaedah lalai tanpa argumen pemisah, yang akan menggunakan koma.

let myArray = [2,4,5,7,9,12,14];  
myArray.join();

'2,4,5,7,9,12,14'

JavaScript akan mengeluarkan rentetan, dengan setiap nilai dalam array dipisahkan dengan koma. Anda boleh menggunakan argumen dalam fungsi untuk menukar pemisah. Perhatikan dengan dua argumen: satu ruang dan rentetan.

myArray.join(' ');  
'2 4 5 7 9 12 14'

myArray.join(' and ');  
'2 and 4 and 5 and 7 and 9 and 12 and 14'

Contoh pertama adalah ruang, membuat rentetan yang anda boleh baca dengan mudah.

Contoh kedua menggunakan ('dan') , dan ada dua perkara yang perlu diketahui di sini.

Pertama, kita menggunakan perkataan 'dan' untuk memisahkan nilai. Kedua, terdapat ruang di kedua sisi perkataan 'dan'. Ini adalah perkara penting yang perlu diingat semasa menggunakan sertai () . JavaScript membaca hujah secara harfiah; jadi jika ruang ini ditinggalkan, semuanya akan dikumpulkan bersama (iaitu. '2and4and5 ...' dll.) Bukan output yang sangat mudah dibaca!

4. Array.forEach ()

Apa ia lakukan: untuk setiap() (peka huruf besar-kecil!) menjalankan fungsi pada setiap item dalam array anda. Fungsi ini adalah fungsi apa pun yang anda buat, mirip dengan menggunakan gelung 'untuk' untuk menerapkan fungsi pada array tetapi dengan lebih sedikit kerja untuk membuat kod.

Ada sedikit lagi untuk untuk setiap() ; lihat sintaks, kemudian lakukan fungsi sederhana untuk menunjukkan.

  
myArray.forEach(function(item){  
//code  
});

Kami menggunakan myArray , untuk setiap() digunakan dengan notasi titik. Anda meletakkan fungsi yang ingin anda gunakan di dalam kurungan argumen, iaitu fungsi (item) dalam contoh.

Lihatlah fungsi (item) . Ini adalah fungsi yang dijalankan di dalam forEach (), dan ia mempunyai argumen tersendiri. Kami memanggil hujah barang . Terdapat dua perkara yang perlu diketahui mengenai hujah ini:

Apabila forEach () melengkapkan array anda, ia menerapkan kod untuk argumen ini. Anggaplah ia sebagai pemboleh ubah sementara yang memegang elemen semasa.
Anda memilih nama argumen, ia boleh dinamakan apa sahaja yang anda mahukan. Biasanya ini akan dinamakan sesuatu yang menjadikannya lebih mudah difahami, seperti 'item' atau 'elemen'.

Dengan mempertimbangkan dua perkara itu, lihat contoh ringkas ini. Tambahkan 15 pada setiap nilai, dan minta konsol menunjukkan hasilnya.

  
myArray.forEach(function(item){  
 console.log(item + 15);  
});

Kami menggunakan barang dalam contoh ini sebagai pemboleh ubah, jadi fungsi ditulis untuk menambahkan 15 pada setiap nilai melalui barang . Konsol kemudian mencetak hasilnya. Inilah rupa dalam konsol Google Chrome.

Hasilnya adalah setiap nombor dalam array, tetapi dengan 15 yang ditambahkan!

5. Array.map ()

Apa ia lakukan: peta () melakukan fungsi pada setiap elemen dalam array anda dan meletakkan hasilnya dalam array baru.

Menjalankan fungsi pada setiap elemen terdengar seperti forEach (). Perbezaan di sini adalah peta () mencipta tatasusunan baru semasa dijalankan. forEach () tidak membuat array baru secara automatik, anda perlu membuat kod fungsi tertentu untuk melakukannya.

Gunakan peta () untuk menggandakan nilai setiap elemen dalam myArray, dan meletakkannya dalam susunan baru. Anda akan melihat perkara yang sama fungsi (item) sintaks untuk latihan yang lebih sedikit.

let myArray = [2,4,5,7,9,12,14];

let doubleArray = myArray.map(function(item){  
return item * 2;  
});

Periksa hasilnya di konsol.

console.log(doubleArray); [4,8,10,14,18,24,28]

myArray tidak berubah:

console.log(myArray); [2,4,5,7,9,12,14]

6. Array.unshift ()

Apa yang dilakukannya: Sama seperti kaedah push () berfungsi, tidak beralih () kaedah mengambil susun atur anda dan menambahkan satu atau lebih elemen pada permulaan susunan dan bukannya akhir, dan mengembalikan panjang array yang baru. Kaedah ini akan mengubah susunan sedia ada anda.

let myArray = [2,4,5,7,9,12,14];  
myArray.unshift(0);

Semasa mencantumkan array ke konsol, anda akan melihat nombor 0 pada permulaan array.

console.log(myArray); [0, 2,4,5,7,9,12,14]

7. Array.sort ()

Apa yang dilakukannya: Menyusun adalah salah satu operasi yang paling biasa dilakukan pada array dan sangat berguna. JavaScript urutkan () kaedah array boleh digunakan untuk menyusun susunan nombor atau rentetan dengan hanya satu baris kod. Operasi ini dijalankan dan mengembalikan susunan yang disusun dengan mengubah susunan awal. Ambil satu set nombor yang berbeza untuk myArray kali ini.

let myArray = [12, 55, 34, 65, 10];  
myArray.sort((a,b) => a - b);

Oleh kerana penyortiran dilakukan di tempat, anda tidak perlu menyatakan pemboleh ubah terpisah untuk susunan yang disusun.

console.log(myArray); [10, 12, 34, 55, 65]

Secara lalai, susunan disusun dalam urutan menaik, tetapi anda boleh meneruskan fungsi khusus ke urutkan () kaedah untuk menyusun susunan dengan cara yang dikehendaki. Dalam kes ini, saya melewati kebiasaan fungsi anak panah untuk menyusun susunan secara berangka mengikut tertib menaik.

8. Array.reverse ()

Apa yang dilakukannya: Seperti namanya, terbalik () kaedah digunakan untuk membalikkan susunan elemen dalam larik. Perhatikan bahawa ini tidak membalikkan isi array tetapi hanya susunannya sendiri. Inilah contoh untuk memahami kaedah ini dengan lebih baik:

let myArray = [2,4,5,7,9,12,14];  
myArray.reverse()

Log output ke konsol untuk mengesahkan operasi.

console.log(myArray); [14, 12, 9, 7, 5, 4, 2]

Seperti yang anda lihat, susunan elemen telah diterbalikkan. Sebelum ini, elemen pada indeks terakhir (elemen 14 pada indeks 6) kini menjadi elemen pada indeks nol dan sebagainya.

9. Array.lice ()

Apa ia lakukan: kepingan () digunakan untuk mengambil salinan cetek bahagian array. Dalam istilah yang lebih mudah, kaedah ini membolehkan anda memilih elemen tertentu dari array mengikut indeksnya. Anda boleh melepasi indeks permulaan elemen dari mana anda ingin mengambil dan unsur-unsur dan pilihan indeks akhir juga.

Sekiranya anda tidak memberikan indeks akhir, semua elemen dari indeks permulaan hingga akhir array akan diambil. Kaedah ini mengembalikan array baru dan tidak mengubah yang sedia ada.

let myArray = [2,4,5,7,9,12,14];  
let slicedArray = myArray.slice(2);

Dalam kod di atas, semua elemen dari indeks kedua hingga indeks terakhir diambil kerana parameter indeks akhir tidak lulus. Log kedua array ke konsol.

console.log(myArray);  
console.log(slicedArray);

[2, 4, 5, 7, 9, 12, 14]  
[5, 7, 9, 12, 14]

Terbukti, array awal tidak diubah dengan kaedah slice () dan sebaliknya mengembalikan array baru yang disimpan di dihirisArray pemboleh ubah. Berikut adalah contoh di mana parameter indeks akhir juga diteruskan ke kepingan () kaedah.

let myArray = [2,4,5,7,9,12,14];  
let slicedArray = myArray.slice(1, 3);  
console.log(slicedArray);

[4, 5]

10. Array.plice ()

Apa ia lakukan: sambatan () adalah kaedah larik berguna yang digunakan untuk membuang atau mengganti elemen dalam larik di tempatnya. Dengan menentukan indeks dan jumlah elemen yang akan dihapus, ia mengubah susunan.

let myArray = [2,4,5,7,9,12,14];  
myArray.splice(2, 3);  
console.log(myArray);

Dalam contoh di atas, myArray susunan disambung dari indeks 2 dan 3 elemen dikeluarkan daripadanya. Susunan kini terdiri daripada:

[2, 4, 12, 14]

Untuk mengganti elemen daripada menghapusnya, anda boleh meneruskan sebilangan parameter pilihan dengan elemen yang ingin anda ganti, seperti ini:

betapa panasnya cpu saya

let myArray = [2,4,5,7,9,12,14];  
myArray.splice(2, 3, 1, 2, 3);  
console.log(myArray);

[2, 4, 1, 2, 3, 12, 14]

11. Array.filter ()

Apa yang dilakukannya: The penapis () kaedah adalah kaedah larik berguna yang mengambil fungsi yang mengandungi ujian dan mengembalikan array baru dengan semua elemen yang lulus ujian itu. Sesuai dengan namanya, kaedah ini digunakan untuk menyaring elemen yang anda perlukan dari elemen lain. Penapisan dilakukan menggunakan fungsi yang mengembalikan nilai boolean.

Berikut adalah contoh penapis () kaedah yang digunakan untuk mendapatkan hanya elemen-elemen dari tatasusunan yang dapat dibahagi dengan 2.

let myArray = [2,4,5,7,9,12,14];  
let divisibleByTwo = myArray.filter((number) => number % 2 === 0);  
console.log(divisibleByTwo);

Dalam contoh di atas, fungsi anak panah diteruskan sebagai parameter yang mengambil setiap nombor dari array asal dan memeriksa apakah ia dapat dibahagikan dengan 2 menggunakan modulo ( % ) dan kesaksamaan ( === ) pengendali. Inilah rupa outputnya:

[2, 4, 12, 14]

12. Array. Mengurangkan ()

Apa ia lakukan: kurangkan () adalah kaedah array yang mengambil fungsi reducer dan melaksanakannya pada setiap elemen array untuk menghasilkan satu nilai semasa kembali. Ia memerlukan fungsi reducer dengan pemboleh ubah akumulator dan pemboleh ubah elemen semasa seperti parameter yang diperlukan. Nilai penumpuk dikenang di semua lelaran dan akhirnya dikembalikan setelah lelaran terakhir.

Kes penggunaan kaedah ini adalah untuk mengira jumlah semua elemen dalam larik. Pelaksanaan fungsi ini adalah seperti berikut:

let myArray = [2,4,5,7,9,12,14];  
let sumOfNums = myArray.reduce((sum, currentNum) => sum + currentNum, 0);

0 dilewatkan sebagai parameter kedua dalam contoh di atas, yang digunakan sebagai nilai awal pemboleh ubah penumpuk. The jumlahOfNum pemboleh ubah akan mengandungi nilai pulangan bagi kurangkan () kaedah yang diharapkan menjadi jumlah semua elemen dalam larik.

console.log(sumOfNums); 53

13. Array. Merangkumi ()

Apa yang dilakukannya: Mencari elemen dalam larik untuk memeriksa apakah ada adalah operasi yang sering digunakan dan oleh itu, JavaScript mempunyai kaedah bawaan untuk ini dalam bentuk merangkumi () kaedah larik. Inilah cara anda boleh menggunakannya:

let myArray = [2,4,5,7,9,12,14];  
console.log(myArray.includes(4));  
console.log(myArray.includes(2, 1));  
console.log(myArray.includes(12, 2));  
console.log(myArray.includes(18));

Kaedah ini mengambil parameter yang diperlukan, elemen untuk dicari, dan parameter pilihan, indeks array dari mana untuk mulai mencari. Bergantung pada sama ada elemen itu ada atau tidak, ia akan kembali benar atau salah masing-masing. Oleh itu, outputnya adalah:

true  
false  
true  
false

14. Array.indexOf ()

Apa ia lakukan: Indeks() kaedah digunakan untuk mengetahui indeks di mana kejadian pertama unsur tertentu dapat dijumpai dalam larik. Walaupun serupa dengan metode include (), kaedah ini mengembalikan indeks berangka atau -1 jika elemen tidak ada dalam array.

let myArray = [2,4,5,7,9,12,14];  
console.log(myArray.indexOf(4));  
console.log(myArray.indexOf('4'));  
console.log(myArray.indexOf(9, 2));

Indeks() kaedah menggunakan persamaan yang ketat untuk memeriksa sama ada unsur ada, yang bermaksud bahawa nilainya, serta jenis data, harus sama. Parameter kedua pilihan mengambil indeks untuk mula mencari dari. Berdasarkan kriteria ini, output akan kelihatan seperti ini:

1  
-1  
4

15. Array.fill ()

Apa yang dilakukannya: Sering kali, anda mungkin perlu menetapkan semua nilai dalam larik ke nilai statik seperti 0. Daripada menggunakan gelung, anda boleh mencuba isi () kaedah untuk tujuan yang sama. Anda boleh memanggil kaedah ini pada array dengan 1 parameter yang diperlukan: nilai untuk mengisi array dengan dan 2 parameter pilihan: indeks permulaan dan akhir untuk mengisi antara. Kaedah ini mengubah susunan keluar.

let myArray = [2,4,5,7,9,12,14];  
let array1 = myArray.fill(0);  
myArray = [2,4,5,7,9,12,14];  
let array2 = myArray.fill(0, 2);  
myArray = [2,4,5,7,9,12,14];  
let array3 = myArray.fill(0, 1, 3);

Semasa mencatat output ke konsol, anda akan melihat:

console.log(array1);  
console.log(array2);  
console.log(array3);

[0, 0, 0, 0, 0, 0, 0]  
[2, 4, 0, 0, 0, 0, 0]  
[2, 0, 0, 7, 9, 12, 14]

Langkah Seterusnya dalam Perjalanan JavaScript Anda

Susun atur adalah bahagian yang kuat dalam bahasa JavaScript, itulah sebabnya terdapat begitu banyak kaedah yang dibina untuk menjadikan hidup anda lebih mudah sebagai pembangun. Kaedah terbaik untuk menguasai lima belas kaedah ini adalah dengan berlatih.

Semasa anda terus belajar JavaScript, MDN adalah sumber yang hebat untuk dokumentasi terperinci. Selesa di konsol, kemudian tingkatkan kemahiran anda dengan editor JavaScript terbaik untuk pengaturcara. Bersedia membina laman web anda dengan JavaScript? Mengapa tidak melihat beberapa kerangka kerja yang boleh anda pertimbangkan.

Berkongsi Berkongsi Tweet E-mel 6 Kerangka JavaScript yang Perlu Dipelajari

Terdapat banyak kerangka kerja JavaScript di luar sana untuk membantu pembangunan. Berikut adalah beberapa yang mesti anda ketahui.

Baca Seterusnya Topik-topik yang berkaitan

Pengaturcaraan
JavaScript
Petua Pengekodan

Mengenai Pengarang Nitin Ranganath(31 Artikel Diterbitkan)

Nitin adalah pemaju perisian yang gemar dan pelajar kejuruteraan komputer yang mengembangkan aplikasi web menggunakan teknologi JavaScript. Dia bekerja sebagai pembangun web bebas dan suka menulis untuk Linux dan Pengaturcaraan pada masa lapang.

Lagi Dari Nitin Ranganath

Langgan buletin kami

Sertailah buletin kami untuk mendapatkan petua, ulasan, ebook percuma, dan tawaran eksklusif!

Klik di sini untuk melanggan