Panduan JavaScript Bagian 5: Array dan Loop

Hari ini, di bagian kelima dari terjemahan kursus JavaScript, kita akan berbicara tentang array dan loop. Array digunakan untuk memecahkan banyak masalah. Seringkali bekerja dengan array menggunakan loop.

→ Bagian 1: program pertama, fitur bahasa, standar
→ Bagian 2: gaya kode dan struktur program
→ Bagian 3: variabel, tipe data, ekspresi, objek
→ Bagian 4: fitur
→ Bagian 5: array dan loop
→ Bagian 6: pengecualian, titik koma, literal wildcard
→ Bagian 7: mode ketat, kata kunci ini, acara, modul, perhitungan matematis
→ Bagian 8: Tinjauan Umum Fitur ES6
→ Bagian 9: Gambaran Umum Standar ES7, ES8, dan ES9

Array

Array, objek bertipe Array , berevolusi bersama dengan mekanisme bahasa lainnya. Mereka adalah daftar nilai bernomor.

Elemen pertama array memiliki indeks (kunci) 0, pendekatan ini digunakan dalam banyak bahasa pemrograman.

Pada bagian ini kita akan mempertimbangkan metode modern untuk bekerja dengan array.

▍Menginisialisasi Array

Berikut adalah beberapa cara untuk menginisialisasi array.

 const a = [] const a = [1, 2, 3] const a = Array.of(1, 2, 3) const a = Array(6).fill(1) //   ,   6 ,  1 

Untuk mengakses elemen individual array, gunakan konstruk yang terdiri dari tanda kurung siku yang berisi indeks elemen array. Elemen array dapat dibaca atau ditulis.

 const a = [1, 2, 3] console.log(a) //[ 1, 2, 3 ] const first = a[0] console.log(first) //1 a[0] = 4 console.log(a) //[ 4, 2, 3 ] 

Konstruktor Array untuk mendeklarasikan array tidak direkomendasikan.

 const a = new Array() //  const a = new Array(1, 2, 3) //  

Metode ini seharusnya hanya digunakan ketika mendeklarasikan array yang diketik .

▍Memperoleh panjang array

Untuk mengetahui panjang array, Anda perlu merujuk ke properti length .

 const l = a.length 

▍Periksa array menggunakan metode every ()

Metode every() array dapat digunakan untuk mengatur verifikasi semua elemen mereka menggunakan kondisi tertentu. Jika semua elemen array memenuhi syarat, fungsi akan mengembalikan true , jika tidak maka akan kembali false .

Metode ini meneruskan fungsi yang mengambil argumen currentValue (elemen array saat ini), index (indeks elemen array saat ini) dan array (array itu sendiri). Itu juga dapat mengambil nilai opsional, digunakan saat this ketika menjalankan fungsi yang diteruskan ke sana.
Misalnya, periksa apakah nilai semua elemen array lebih besar dari 10.

 const a = [11, 12, 13] const b = [5, 6, 25] const test = el => el > 10 console.log(a.every(test)) //true console.log(b.every(test)) //false 

Di sini, dalam fungsi test() , kami hanya tertarik pada argumen pertama yang diberikan padanya, jadi kami mendeklarasikannya, menetapkan hanya parameter el , di mana nilai yang sesuai akan jatuh.

▍Periksa array menggunakan metode some ()

Metode ini sangat mirip dengan metode every() , tetapi mengembalikan true jika setidaknya salah satu elemen array memenuhi kondisi yang ditentukan oleh fungsi yang diteruskan kepadanya.

▍Membuat array berdasarkan array yang ada menggunakan metode map ()

Metode array map() memungkinkan Anda untuk mengulangi array, menerapkan pada setiap elemen yang diteruskan ke metode ini fungsi yang mengubah elemen dan membuat array baru dari nilai yang diterima. Di sini, misalnya, adalah cara mendapatkan array baru, yang merupakan hasil dari mengalikan semua elemen dari array asli dengan 2.

 const a = [1, 2, 3] const double = el => el * 2 const doubleA = a.map(double) console.log(a) //[ 1, 2, 3 ] console.log(doubleA) //[ 2, 4, 6 ] 

▍ Memfilter array menggunakan metode filter ()

Metode filter() mirip dengan metode map() , tetapi metode ini memungkinkan Anda untuk membuat array baru yang hanya berisi elemen-elemen dari array asli yang memenuhi kondisi yang ditentukan oleh metode filter() yang diteruskan ke fungsi.

▍ mengurangi () metode

Metode reduce() memungkinkan Anda untuk menerapkan fungsi yang diberikan ke akumulator dan untuk setiap nilai array, mengurangi array ke nilai tunggal (nilai ini dapat memiliki tipe objek primitif atau objek). Metode ini mengambil fungsi konversi dan nilai baterai awal opsional. Pertimbangkan sebuah contoh.

 const a = [1, 2, 3, 4].reduce((accumulator, currentValue, currentIndex, array) => { return accumulator * currentValue }, 1) console.log(a) //24 // 1: 1 * 1 = 1 // 2: 1 * 2 = 2 // 3: 2 * 3 = 6 // 4: 6 * 4 = 24 

Di sini kita mencari produk dari semua elemen array yang dijelaskan menggunakan literal, menetapkan nilai awal akumulator 1.

▍ Menghitung array menggunakan metode forEach ()

Metode array forEach() dapat digunakan untuk beralih pada nilai-nilai array dan untuk melakukan tindakan tertentu pada mereka, ditentukan oleh fungsi yang diteruskan ke metode. Misalnya, kami menampilkan, satu per satu, elemen array di konsol.

 const a = [1, 2, 3] a.forEach(el => console.log(el)) //1 //2 //3 

Jika Anda perlu menghentikan atau menyela loop ketika iterasi di atas array, maka ketika menggunakan forEach() harus membuang pengecualian. Oleh karena itu, jika dalam penyelesaian masalah tertentu mungkin diperlukan untuk menghentikan siklus, yang terbaik adalah memilih cara lain untuk beralih pada elemen-elemen array.

▍Pilih array menggunakan untuk ... operator

Untuk for...of operator muncul dalam standar ES6. Ini memungkinkan Anda untuk beralih pada objek yang dapat diubah (termasuk array). Inilah cara menggunakannya.

 const a = [1, 2, 3] for (let v of a) { console.log(v) } //1 //2 //3 

Pada setiap iterasi dari loop, elemen array selanjutnya masuk ke variabel v .

▍ Menghitung array menggunakan pernyataan for

Pernyataan for memungkinkan Anda untuk mengatur loop, yang, khususnya, juga dapat digunakan untuk mengulangi (atau menginisialisasi) array dengan mengakses elemen mereka dengan indeks. Biasanya, indeks elemen berikutnya diperoleh menggunakan penghitung lingkaran.

 const a = [1, 2, 3] for (let i = 0; i < a.length; i += 1) { console.log(a[i]) } //1 //2 //3 

Jika, selama eksekusi dari loop, Anda perlu melewati iterasinya, Anda dapat menggunakan perintah continue . Untuk mengakhiri siklus secara prematur, Anda dapat menggunakan perintah break . Jika Anda menggunakan perintah return dalam satu lingkaran, misalnya, terletak di fungsi tertentu, loop dan fungsi akan berakhir, dan nilai yang dikembalikan dengan return akan pergi ke tempat fungsi dipanggil.

▍ Metode @@ iterator

Metode ini muncul dalam standar ES6. Ini memungkinkan Anda untuk mendapatkan apa yang disebut "iterator objek" - objek yang dalam hal ini memungkinkan Anda untuk mengatur iterasi elemen array. Iterator array dapat diperoleh dengan menggunakan simbol (simbol tersebut disebut "simbol yang dikenal") Symbol.iterator . Setelah menerima iterator, Anda dapat mengakses metode next() , yang, dengan setiap panggilan, mengembalikan struktur data yang mengandung elemen array berikutnya.

 const a = [1, 2, 3] let it = a[Symbol.iterator]() console.log(it.next().value) //1 console.log(it.next().value) //2 console.log(it.next().value) //3 

Jika Anda memanggil metode next() setelah elemen terakhir array tercapai, ia akan kembali, sebagai nilai elemen, undefined . Objek yang dikembalikan oleh metode next() berisi value dan properti yang done . Properti yang done bernilai false sampai elemen terakhir array tercapai. Dalam kasus kami, jika kami memanggilnya.next it.next() untuk keempat kalinya, ia akan mengembalikan objek { value: undefined, done: true } , sedangkan pada tiga panggilan sebelumnya objek ini akan terlihat seperti { value: , done: false } .

entries() metode array mengembalikan iterator yang memungkinkan Anda untuk mengulangi pasangan kunci-nilai array.

 const a = [1, 2, 3] let it = a.entries() console.log(it.next().value) //[0, 1] console.log(it.next().value) //[1, 2] console.log(it.next().value) //[2, 3] 

Metode keys() memungkinkan Anda untuk mengulangi kunci array.

 const a = [1, 2, 3] let it = a.keys() console.log(it.next().value) //0 console.log(it.next().value) //1 console.log(it.next().value) //2 

▍Menambahkan Elemen ke Akhir Array

Untuk menambahkan elemen ke akhir array, gunakan metode push() .

 a.push(4) 

▍Menambahkan elemen ke awal array

Untuk menambahkan elemen ke awal array, gunakan metode unshift() .

 a.unshift(0) a.unshift(-2, -1) 

▍Menghapus elemen array

Anda dapat menghapus elemen dari ujung array sambil mengembalikan elemen ini menggunakan metode pop() .

 a.pop() 

Demikian pula, menggunakan metode shift() , Anda dapat menghapus elemen dari awal array.

 a.shift() 

Hal yang sama, tetapi sudah menunjukkan posisi penghapusan elemen dan jumlahnya, dilakukan dengan menggunakan metode splice() .

 a.splice(0, 2) //    2     a.splice(3, 2) //    2 ,    3 

▍Menghapus elemen array dan memasukkan elemen lain sebagai gantinya

Untuk menggunakan beberapa operasi untuk menghapus beberapa elemen array dan memasukkan elemen lain sebagai gantinya, metode splice() akrab digunakan.

Sebagai contoh, di sini kita menghapus 3 elemen array mulai dari indeks 2, setelah itu kita menambahkan dua elemen lainnya ke tempat yang sama:

 const a = [1, 2, 3, 4, 5, 6] a.splice(2, 3, 'a', 'b') console.log(a) //[ 1, 2, 'a', 'b', 6 ] 

Omb Menggabungkan banyak array

Untuk menggabungkan banyak array, Anda bisa menggunakan metode concat() , yang mengembalikan array baru.

 const a = [1, 2] const b = [3, 4] const c = a.concat(b) console.log(c) //[ 1, 2, 3, 4 ] 

▍Cari item dalam array

Dalam standar ES5, metode indexOf() telah muncul, yang mengembalikan indeks kemunculan pertama elemen array yang diinginkan. Jika elemen tidak dapat ditemukan dalam array, -1 dikembalikan.

 const a = [1, 2, 3, 4, 5, 6, 7, 5, 8] console.log(a.indexOf(5)) //4 console.log(a.indexOf(23)) //-1 

Metode lastIndexOf() mengembalikan indeks kemunculan terakhir elemen dalam array, atau -1 jika elemen tidak ditemukan.

 const a = [1, 2, 3, 4, 5, 6, 7, 5, 8] console.log(a.lastIndexOf(5)) //7 console.log(a.lastIndexOf(23)) //-1 

Di ES6, metode find() array telah muncul, yang melakukan pencarian array menggunakan fungsi yang diteruskan ke sana. Jika fungsi mengembalikan true , metode mengembalikan nilai elemen pertama yang ditemukan. Jika item tidak dapat ditemukan, fungsi akan kembali undefined .

Penggunaannya mungkin terlihat sebagai berikut.

 a.find(x => x.id === my_id) 

Di sini, dalam array yang berisi objek, elemen dicari, yang properti id sama dengan yang ditentukan.

Metode findIndex() mirip dengan find() , tetapi mengembalikan indeks elemen yang ditemukan atau undefined .

Di ES7, metode includes() telah muncul, yang memungkinkan Anda memeriksa keberadaan elemen tertentu dalam array. Ini mengembalikan true atau false , menemukan atau tidak menemukan elemen yang menarik bagi programmer.

 a.includes(value) 

Dengan menggunakan metode ini, dimungkinkan untuk memeriksa keberadaan beberapa elemen bukan seluruh array, tetapi hanya sebagian saja, dimulai dengan indeks yang ditentukan saat metode ini dipanggil. Indeks ditentukan menggunakan parameter kedua, opsional, dari metode ini.

 a.includes(value, i) 

▍Mendapatkan fragmen array

Untuk mendapatkan salinan beberapa fragmen dari array sebagai array baru, Anda bisa menggunakan metode slice() . Jika metode ini dipanggil tanpa argumen, maka array yang dikembalikan akan menjadi salinan asli dari yang asli. Dibutuhkan dua parameter opsional. Yang pertama menetapkan indeks awal fragmen, yang kedua menentukan akhir. Jika indeks akhir tidak ditentukan, maka array akan disalin dari indeks awal yang ditentukan ke akhir.

 const a = [1, 2, 3, 4, 5, 6, 7, 8, 9] console.log(a.slice(4)) //[ 5, 6, 7, 8, 9 ] console.log(a.slice(3,7)) //[ 4, 5, 6, 7 ] 

ArraySort array

Untuk mengatur pengurutan elemen array dalam urutan abjad ( 0-9A-Za-z ), metode sort() digunakan tanpa memberikan argumen padanya.

 const a = [1, 2, 3, 10, 11] a.sort() console.log(a) //[ 1, 10, 11, 2, 3 ] const b = [1, 'a', 'Z', 3, 2, 11] b.sort() console.log(b) //[ 1, 11, 2, 3, 'Z', 'a' ] 

Anda bisa meneruskan fungsi ke metode ini yang menetapkan urutan pengurutan. Fungsi menerima, untuk perbandingan dua elemen, parameter a dan b . Ini mengembalikan angka negatif jika a kurang dari b oleh beberapa kriteria, 0 jika mereka sama, dan angka positif jika a lebih besar dari b . Saat menulis fungsi serupa untuk mengurutkan array numerik, ia dapat mengembalikan hasil pengurangan a dan b . Jadi, mengembalikan hasil dari mengevaluasi ekspresi a - b berarti mengurutkan array dalam urutan naik, mengembalikan hasil mengevaluasi ekspresi b - a akan mengurutkan array dalam urutan menurun.

 const a = [1, 10, 3, 2, 11] console.log(a.sort((a, b) => a - b)) //[ 1, 2, 3, 10, 11 ] console.log(a.sort((a, b) => b - a)) //[ 11, 10, 3, 2, 1 ] 

Untuk membalik urutan elemen array, Anda dapat menggunakan metode reverse() . Ini, seperti sort() , memodifikasi array yang dipanggil.

▍Mendapatkan representasi string dari array

Untuk mendapatkan representasi string dari array, Anda bisa menggunakan metode toString() .

 a.toString() 

Hasil serupa diberikan oleh metode join() , dipanggil tanpa argumen.

 a.join() 

Untuk itu, sebagai argumen, Anda bisa melewati elemen pemisah.

 const a = [1, 10, 3, 2, 11] console.log(a.toString()) //1,10,3,2,11 console.log(a.join()) //1,10,3,2,11 console.log(a.join(', ')) //1, 10, 3, 2, 11 

▍Membuat salinan array

Untuk membuat salinan array dengan menyalin nilai-nilai array asli ke dalam array baru, Anda dapat menggunakan metode Array.from() . Ini juga cocok untuk membuat array dari objek mirip array (dari string, misalnya).

 const a = 'a string' const b = Array.from(a) console.log(b) //[ 'a', ' ', 's', 't', 'r', 'i', 'n', 'g' ] 

Metode Array.of() juga dapat digunakan untuk menyalin array, serta untuk "merakit" array dari berbagai elemen. Misalnya, untuk menyalin elemen dari satu array ke array lainnya, Anda dapat menggunakan konstruksi berikut.

 const a = [1, 10, 3, 2, 11] const b = Array.of(...a) console.log(b) // [ 1, 10, 3, 2, 11 ] 

Metode copyWithin() digunakan untuk menyalin elemen-elemen array ke tempat tertentu dari array ini sendiri. Argumen pertama menentukan indeks awal posisi target, yang kedua indeks awal posisi sumber elemen, dan parameter ketiga, opsional, menunjukkan indeks akhir posisi sumber elemen. Jika Anda tidak menentukannya, semuanya akan disalin ke lokasi array yang ditentukan, mulai dari indeks awal posisi sumber hingga akhir array.

 const a = [1, 2, 3, 4, 5] a.copyWithin(0, 2) console.log(a) //[ 3, 4, 5, 4, 5 ] 

Siklus

Berbicara tentang array di atas, kami telah menemukan beberapa cara mengatur loop. Namun, loop dalam JavaScript digunakan tidak hanya untuk bekerja dengan array, dan kami telah mempertimbangkan jauh dari semua tipenya. Oleh karena itu, sekarang kita akan meluangkan waktu untuk membahas berbagai cara mengatur loop dalam JavaScript dan berbicara tentang fitur-fiturnya.

▍ untuk loop

Pertimbangkan contoh penerapan siklus ini.

 const list = ['a', 'b', 'c'] for (let i = 0; i < list.length; i++) { console.log(list[i]) //,     console.log(i) // } 

Seperti yang telah disebutkan, Anda dapat menghentikan eksekusi loop seperti itu menggunakan perintah break , dan Anda dapat melewatkan iterasi saat ini dan langsung menuju ke berikutnya menggunakan perintah continue .

▍ untuk setiap siklus

Kami juga membahas siklus ini. Berikut adalah contoh iterasi dari array yang menggunakannya.

 const list = ['a', 'b', 'c'] list.forEach((item, index) => { console.log(item) // console.log(index) // }) //     ,      list.forEach(item => console.log(item)) 

Ingatlah bahwa untuk menghentikan siklus seperti itu, perlu untuk melemparkan pengecualian, yaitu, jika Anda mungkin perlu menghentikannya saat menggunakan siklus, lebih baik memilih beberapa siklus lainnya.

▍ Lakukan ... sambil memutar

Inilah yang disebut "siklus pascakondisi". Loop seperti itu akan dieksekusi setidaknya sekali sebelum memeriksa kondisi untuk mengakhiri loop.

 const list = ['a', 'b', 'c'] let i = 0 do { console.log(list[i]) // console.log(i) // i = i + 1 } while (i < list.length) 

Itu dapat terganggu menggunakan perintah break , Anda dapat melanjutkan ke iterasi berikutnya dengan continue perintah.

▍ sambil loop

Inilah yang disebut "siklus prakondisi". Jika, di pintu masuk ke siklus, kondisi untuk melanjutkan siklus itu salah, itu tidak akan dijalankan sekali pun.

 const list = ['a', 'b', 'c'] let i = 0 while (i < list.length) { console.log(list[i]) // console.log(i) // i = i + 1 } 

▍ for ... in loop

Loop ini memungkinkan Anda untuk mengulangi semua properti enumerasi suatu objek dengan namanya.

 let object = {a: 1, b: 2, c: 'three'} for (let property in object) { console.log(property) //  console.log(object[property]) //  } 

▍ Siklus untuk ... dari

Untuk for...of siklus menggabungkan kenyamanan siklus forEach dan kemampuan untuk mengganggu operasinya menggunakan alat biasa.

 //  for (const value of ['a', 'b', 'c']) { console.log(value) // } //       `entries()` for (const [index, value] of ['a', 'b', 'c'].entries()) { console.log(index) // console.log(value) // } 

Perhatikan bahwa di sini, di header loop, kata kunci const digunakan, dan tidak, seperti yang Anda harapkan, let . Jika variabel di dalam blok loop tidak perlu dipindahkan, maka const cukup cocok untuk kita.
Jika kita membandingkan for...in dan for...of loop, ternyata for...in iterates atas nama properti, dan for...of - nilai properti.

Lingkaran dan Lingkup

Dengan loop dan cakupan variabel, ada satu fitur JavaScript yang dapat menyebabkan masalah pada pengembang. Untuk mengatasi masalah ini, let bicara tentang loop, tentang cakupan, dan tentang var dan let kata kunci.

Pertimbangkan sebuah contoh.

 const operations = [] for (var i = 0; i < 5; i++) { operations.push(() => {   console.log(i) }) } for (const operation of operations) { operation() } 

Loop melakukan 5 iterasi, di mana masing-masing fungsi baru ditambahkan ke array operations . Fungsi ini menampilkan nilai penghitung loop di konsol - i . Setelah fungsi ditambahkan ke array, kita beralih ke array ini dan memanggil fungsi yang merupakan elemen-elemennya.

Dengan mengeksekusi kode tersebut, Anda dapat mengharapkan hasil yang ditunjukkan di bawah ini.

 0 1 2 3 4 

Namun faktanya, dia menyimpulkan hal-hal berikut.

 5 5 5 5 5 

Kenapa begitu? Masalahnya adalah sebagai penghitung lingkaran kita menggunakan variabel yang dideklarasikan menggunakan kata kunci var .

Karena deklarasi variabel tersebut naik ke atas lingkup, kode di atas mirip dengan yang berikut ini.

 var i; const operations = [] for (i = 0; i < 5; i++) { operations.push(() => {   console.log(i) }) } for (const operation of operations) { operation() } 

Hasilnya, ternyata dalam for...of loop, di mana kita mengulangi array, variabel i masih terlihat, hasilnya 5, sebagai hasilnya, merujuk pada i dalam semua fungsi, kita mencetak angka 5.

Bagaimana cara mengubah perilaku program sehingga akan melakukan apa yang diharapkan darinya?

Solusi paling sederhana untuk masalah ini adalah dengan menggunakan kata kunci let . Itu, seperti yang telah kami katakan, muncul di ES6, penggunaannya memungkinkan Anda untuk menyingkirkan beberapa keanehan karakteristik var .

Secara khusus, dalam contoh di atas, cukup mengubah var untuk let dan semuanya akan berfungsi sebagaimana mestinya.

 const operations = [] for (let i = 0; i < 5; i++) { operations.push(() => {   console.log(i) }) } for (const operation of operations) { operation() } 

Sekarang, pada setiap iterasi dari loop, setiap fungsi yang ditambahkan ke array operations mendapatkan salinan i . Ingatlah bahwa dalam situasi ini Anda tidak dapat menggunakan kata kunci const , karena nilai i dalam loop berubah.

Cara lain untuk mengatasi masalah ini, yang sering digunakan sebelum standar ES6, ketika kata kunci let tidak ada, adalah menggunakan IIFE.

Dengan pendekatan ini, nilai i disimpan dalam closure, dan fungsi dikembalikan oleh IIFE dan memiliki akses ke closure masuk ke array. Fungsi ini dapat dilakukan ketika diperlukan. Ini tampilannya.

 const operations = [] for (var i = 0; i < 5; i++) { operations.push(((j) => {   return () => console.log(j) })(i)) } for (const operation of operations) { operation() } 

Ringkasan

Hari ini kita berbicara tentang array dan loop dalam JavaScript. Topik artikel kami berikutnya adalah penanganan pengecualian, pola penggunaan titik koma, dan literal templat.

Pembaca yang budiman! Metode apa untuk bekerja dengan array dalam JavaScript yang paling sering Anda gunakan?