15 teknik javascript canggih yang harus diketahui setiap pengembang
- 1203
- 119
- Karl O'Connell DDS
JavaScript adalah bahasa pemrograman yang serba guna dan kuat yang telah digunakan secara luas dalam pengembangan aplikasi web. Sebagai pengembang, penting untuk memiliki pemahaman yang kuat tentang kemampuan bahasa dan teknik canggih untuk membuat aplikasi web yang kuat, efisien, dan terukur.
Berikut adalah 15 teknik javascript canggih yang harus diketahui setiap pengembang.
1. Penutupan
Penutupan adalah teknik yang kuat dalam javascript yang memungkinkan Anda membuat fungsi dengan keadaan persisten. Pada dasarnya, penutupan adalah fungsi yang “mengingat” lingkungan di mana ia dibuat. Ini dapat berguna untuk membuat variabel pribadi, serta untuk membuat fungsi yang dapat digunakan untuk menghasilkan fungsi lain.
Misalnya:
function counter () let count = 0; return function () return ++ count; const C = counter (); menghibur.log (c ()); // 1 konsol.log (c ()); // 2 konsol.log (c ()); // 3| 1234567891011 | function counter () let count = 0; return function () return ++ count; const C = counter (); konsol.log (c ()); // 1console.log (c ()); // 2Console.log (c ()); // 3 |
Dalam contoh di atas, fungsi penghitung mengembalikan fungsi yang memiliki akses ke variabel penghitungan dalam lingkup luarnya. Setiap kali fungsi yang dikembalikan dipanggil, itu menambah variabel penghitungan dan mengembalikan nilainya.
2. Kari
Currying adalah teknik di mana fungsi dengan beberapa argumen diubah menjadi serangkaian fungsi yang masing -masing mengambil satu argumen. Ini dapat berguna untuk membuat lebih banyak kode modular, serta untuk membuat fungsi yang dapat digunakan kembali dalam konteks yang berbeda.
Misalnya:
fungsi add (a, b) return a + b; function curryadd (a) return function (b) return add (a, b); const add5 = CurryAdd (5); menghibur.log (add5 (10)); // 15| 123456789101112 | fungsi add (a, b) return a + b; function curryadd (a) return function (b) return add (a, b); const add5 = curryadd (5); konsol.log (add5 (10)); // 15 |
Dalam contoh di atas, fungsi ADD diubah menjadi fungsi kari menggunakan fungsi CurryAdd. Fungsi CurryAdd mengambil argumen pertama A dan mengembalikan fungsi baru yang mengambil argumen kedua B dan memanggil fungsi tambahan asli dengan kedua argumen.
3. Memoisasi
Memoisasi adalah teknik untuk mengoptimalkan kinerja fungsi dengan caching hasil perhitungan yang mahal. Ini bisa berguna untuk fungsi yang sering disebut atau yang membutuhkan waktu lama untuk berlari.
Misalnya:
fungsi fibonacci (n) if (n <= 1) return n; return fibonacci(n - 1) + fibonacci(n - 2); function memoize(func) const cache = ; return function(… args) const key = JSON.stringify(args); if (cache[key]) return cache[key]; const result = func.apply(this, args); cache[key] = result; return result; const memoizedFibonacci = memoize(fibonacci); console.log(memoizedFibonacci(10)); // 55| 12345678910111213141516171819202122 | fungsi fibonacci (n) if (n <= 1) return n; return fibonacci(n - 1) + fibonacci(n - 2); function memoize(func) const cache = ; return function(...args) const key = JSON.stringify(args); if (cache[key]) return cache[key]; const result = func.apply(this, args); cache[key] = result; return result; const memoizedFibonacci = memoize(fibonacci);console.log(memoizedFibonacci(10)); // 55 |
Dalam contoh di atas, fungsi memoize mengambil fungsi fungsi dan mengembalikan fungsi baru yang menyimpan hasil panggilan fungsi asli berdasarkan parameter inputnya. Lain kali fungsi dipanggil dengan parameter input yang sama, ia mengembalikan hasil yang di -cache alih -alih menjalankan fungsi asli.
4. Pelambatan
Throttling adalah teknik di mana fungsi dieksekusi paling banyak sekali dalam interval waktu yang ditentukan. Ini dapat membantu membatasi berapa kali fungsi dipanggil dan meningkatkan kinerja aplikasi Anda.
Misalnya:
function throttle (func, delay) let lastcall = 0; return function (... args) const now = new date ().gettime (); if (sekarang - lastcall < delay) return; lastCall = now; func.apply(this, args); window.addEventListener('scroll', throttle(function() console.log('scrolling'); , 100));| 123456789101112131415 | function throttle (func, delay) let lastcall = 0; fungsi pengembalian (...args) const now = new date ().gettime (); if (sekarang - lastcall < delay) return; lastCall = now; func.apply(this, args); window.addEventListener('scroll', throttle(function() console.log('scrolling');, 100)); |
Dalam contoh di atas, fungsi throttle mengambil fungsi fungsi dan penundaan interval waktu sebagai argumen dan mengembalikan fungsi baru yang mengeksekusi func paling banyak sekali per penundaan milidetik.
Dalam contoh di atas, pendengar acara gulir dibungkus dengan fungsi throttle yang membatasi berapa kali konsol.Pernyataan log ('gulir') dieksekusi saat menggulir.
5. Debuncing
Debouncing adalah teknik di mana fungsi ditunda sampai interval waktu yang ditentukan telah berlalu setelah doa terakhir. Ini dapat membantu mengurangi berapa kali fungsi dipanggil dan meningkatkan kinerja aplikasi Anda.
Misalnya:
fungsi debounce (func, delay) let timerid; return function (... args) if (timerId) clearTimeout (timerId); timerId = setTimeOut (() => func.berlaku (ini, args); timerid = null; , menunda); jendela.addeventListener ('mengubah ukuran', debounce (function () konsol.log ('mengubah ukuran'); , 500));| 12345678910111213141516 | fungsi debounce (func, delay) let timerid; fungsi pengembalian (...args) if (timerId) clearTimeout (timerId); timerId = setTimeOut (() => func.berlaku (ini, args); timerid = null; , menunda); jendela.addeventListener ('mengubah ukuran', debounce (function () konsol.log ('mengubah ukuran');, 500)); |
Dalam contoh di atas, fungsi debounce mengambil fungsi fungsi dan penundaan interval waktu sebagai argumen dan mengembalikan fungsi baru yang menunda pelaksanaan func sampai penundaan milidetik telah berlalu sejak doa terakhir.
Dalam contoh di atas, pendengar acara mengubah ukuran dibungkus dengan fungsi debounce yang membatasi berapa kali konsol.Pernyataan log ('mengubah ukuran') dieksekusi saat mengubah ukuran jendela.
6. Janji
Janji adalah cara untuk mengelola kode asinkron dalam javascript. Mereka pada dasarnya adalah placeholder untuk nilai yang mungkin belum tersedia, tetapi akan di masa depan. Janji dapat digunakan untuk memastikan bahwa kode tertentu berjalan hanya setelah kode lain selesai dieksekusi, dan mereka juga dapat digunakan untuk menangani kesalahan dengan cara yang lebih elegan daripada penanganan kesalahan tradisional.
Misalnya:
function fetchData () return new janji ((resolve, reject) => fetch ('https: // contoh.com/data ') .Kemudian (respons => respons.json ()) .kemudian (data => resolve (data)) .catch (error => reject (error)); ); fetchData () .Kemudian (data => konsol.log (data)) .catch (error => console.error (error));| 123456789101112 | function fetchData () return new janji ((resolve, reject) => fetch ('https: // contoh.com/data ') .Kemudian (respons => respons.json ()) .kemudian (data => resolve (data)) .catch (error => reject (error)); ); fetchData () .Kemudian (data => konsol.log (data)) .catch (error => console.error (error)); |
Dalam contoh di atas, fungsi fetchData mengembalikan janji yang diselesaikan dengan data yang diambil dari https: // contoh.com/data. Janji tersebut kemudian dikonsumsi menggunakan metode saat itu dan menangkap untuk menangani data yang diselesaikan dan kesalahan apa pun yang terjadi.
7. Async/menunggu
Async/Await adalah gula sintaksis di atas janji yang memungkinkan Anda untuk menulis kode asinkron yang terlihat seperti kode sinkron. Ini dapat membuat kode asinkron lebih mudah dibaca dan lebih mudah dipertahankan.
Misalnya:
Fungsi async fetchData () coba const response = menunggu fetch ('https: // contoh.com/data '); data const = menunggu respons.json (); pengembalian data; catch (error) throw new error (error); fetchData () .Kemudian (data => konsol.log (data)) .catch (error => console.error (error));| 12345678910111213 | Fungsi async fetchData () coba const response = menunggu fetch ('https: // contoh.com/data '); data const = menunggu respons.json (); pengembalian data; catch (error) throw new error (error); fetchData () .Kemudian (data => konsol.log (data)) .catch (error => console.error (error)); |
Dalam contoh di atas, fungsi fetchData dinyatakan dengan kata kunci async dan menggunakan kata kunci menunggu untuk menunggu nilai janji yang diselesaikan yang dikembalikan oleh pengambilan dan respons.Metode JSON. Kesalahan apa pun ditangkap menggunakan blok coba/tangkap.
8. Generator
Generator adalah fitur yang kuat dalam JavaScript yang memungkinkan Anda untuk menjeda dan melanjutkan eksekusi fungsi, sambil mempertahankan keadaan internalnya. Ini bisa berguna untuk berbagai aplikasi, dari pemrograman asinkron hingga membangun iterator.
Berikut adalah contoh bagaimana Anda dapat menggunakan generator untuk membangun iterator yang menghasilkan urutan angka fibonacci yang tak terbatas:
fungsi* fibonacci () let [prev, curr] = [0, 1]; while (true) imbal hasil; [prev, curr] = [Curr, prev + Curr]; const fib = fibonacci (); menghibur.log (fib.Berikutnya().nilai); // log 1 konsol.log (fib.Berikutnya().nilai); // log 1 konsol.log (fib.Berikutnya().nilai); // log 2 konsol.log (fib.Berikutnya().nilai); // log 3 konsol.log (fib.Berikutnya().nilai); // log 5| 123456789101112131415 | fungsi* fibonacci () let [prev, curr] = [0, 1]; while (true) imbal hasil; [prev, curr] = [Curr, prev + Curr]; const fib = fibonacci (); menghibur.log (fib.Berikutnya().nilai); // log 1console.log (fib.Berikutnya().nilai); // log 1console.log (fib.Berikutnya().nilai); // log 2console.log (fib.Berikutnya().nilai); // log 3console.log (fib.Berikutnya().nilai); // log 5 |
Dalam contoh ini, fungsi fibonacci dinyatakan sebagai fungsi generator menggunakan sintaks* fungsi. Fungsi ini menggunakan loop sementara untuk menghasilkan urutan tak terbatas dari angka fibonacci, yang dihasilkan satu per satu menggunakan kata kunci hasil. Variabel FIB kemudian diinisialisasi sebagai objek iterator menggunakan fungsi fibonacci (), dan setiap panggilan berikutnya ke metode berikutnya () menghasilkan nomor berikutnya dalam urutan.
9. Operator sebaran
Operator penyebaran, dilambangkan dengan tiga titik (...), adalah fitur yang kuat di JavaScript yang memungkinkan Anda untuk memperluas objek yang dapat diulang (seperti array atau string) menjadi elemen individual. Ini dapat digunakan untuk menyederhanakan dan merampingkan kode Anda dalam beberapa cara.
Berikut adalah contoh bagaimana Anda dapat menggunakan operator penyebaran untuk menggabungkan dua array:
const arr1 = [1, 2, 3]; const arr2 = [4, 5, 6]; const arr3 = [... arr1, ... arr2]; menghibur.log (ARR3); // log [1, 2, 3, 4, 5, 6]| 12345 | const arr1 = [1, 2, 3]; const arr2 = [4, 5, 6]; const arr3 = [...arr1, ...arr2]; menghibur.log (ARR3); // log [1, 2, 3, 4, 5, 6] |
Dalam contoh ini, operator penyebaran digunakan untuk menggabungkan ARR1 dan ARR2 ke array baru ARR3. Sintaks ... ARR1 memperluas array ARR1 ke dalam elemen individual, yang kemudian digabungkan dengan sintaks ... ARR2.
10. Fungsi tingkat tinggi
Fungsi tingkat tinggi adalah fungsi yang mengambil fungsi lain sebagai argumen atau mengembalikan fungsi sebagai hasilnya. Ini dapat berguna untuk membuat kode yang dapat digunakan kembali yang dapat disesuaikan agar sesuai dengan kasus penggunaan yang berbeda.
fungsi multiplyby (factor) return function (angka) return number * factor; ; const double = multiplyby (2); const triple = multiplyby (3); menghibur.log (ganda (5)); // log 10 konsol.log (triple (5)); // log 15| 1234567891011 | fungsi multiplyby (factor) return function (angka) return number * factor; ; const double = multiplyby (2); const triple = multiplyby (3); menghibur.log (ganda (5)); // log 10console.log (triple (5)); // log 15 |
Dalam contoh ini, fungsi Multiplyby mengembalikan fungsi lain yang mengalikan angka yang diberikan dengan faktor yang ditentukan. Fungsi yang dikembalikan dapat digunakan untuk membuat fungsi lain yang berlipat ganda dengan faktor yang berbeda.
11. Merusak
Destrukturisasi adalah cara untuk mengekstraksi nilai dari objek atau array dengan cara yang lebih ringkas. Ini bisa sangat berguna saat berhadapan dengan struktur data yang kompleks, karena memungkinkan Anda untuk dengan cepat dan mudah mengekstrak nilai yang Anda butuhkan.
const person = name: 'John', usia: 30, alamat: street: '123 Main st', city: 'anytown', state: 'ca', zip: '12345'; const name, usia, alamat: city = orang; menghibur.log (nama); // konsol 'John'.log (usia); // 30 konsol.log (kota); // 'Anytown'| 12345678910111213141516 | const person = name: 'John', usia: 30, alamat: street: '123 Main st', city: 'anytown', state: 'ca', zip: '12345'; const name, usia, alamat: city = orang; menghibur.log (nama); // 'John'Console.log (usia); // 30console.log (kota); // 'Anytown' |
Dalam contoh ini, kita merusak objek orang untuk mengekstrak nama, usia, dan sifat kota dan menugaskannya ke variabel.
12. Delegasi Acara
Delegasi Acara adalah teknik untuk menangani acara di mana penangan acara tunggal melekat pada elemen induk, bukan pada masing -masing elemen anak individu. Ini dapat berguna untuk meningkatkan kinerja penanganan acara, serta untuk menangani acara pada konten yang dihasilkan secara dinamis.
- Barang 1
- Item 2
- Item 3
| 123456789101112131415 |
|
Dalam contoh ini, kami melampirkan pendengar acara klik ke elemen UL dan kemudian menggunakan acara tersebut.Properti target untuk menentukan elemen Li mana yang diklik. Ini berguna untuk menangani acara pada konten dinamis yang dapat ditambahkan atau dihapus dari halaman.
13. Penggunaan braket keriting
Dalam JavaScript, kurung keriting digunakan untuk membatasi blok kode. Namun, mereka juga dapat digunakan dengan cara yang lebih ringkas untuk membuat objek atau untuk merusak objek. Ini bisa sangat berguna saat bekerja dengan struktur data yang kompleks.
fungsi myfunction () const x = 1; const y = 2; if (x < y) console.log('x is less than y'); else console.log('x is greater than or equal to y');| 12345678910 | fungsi myfunction () const x = 1; const y = 2; if (x < y) console.log('x is less than y'); else console.log('x is greater than or equal to y'); |
Dalam contoh ini, kami menggunakan kurung keriting untuk menentukan tubuh fungsi myfunction dan pernyataan if.
14. Modul JavaScript
Modul JavaScript adalah cara untuk mengatur kode menjadi unit yang dapat digunakan kembali dan mandiri. Mereka dapat digunakan untuk merangkum fungsionalitas dan membuat kode yang lebih dapat dipelihara.
// modul 1.JS Fungsi Ekspor Tambah (a, b) return a + b; // module2.JS Impor add dari './modul 1.js '; const sum = add (2, 3); menghibur.log (jumlah); // 5| 1234567891011 | // modul 1.fungsi jsexport add (a, b) return a + b; // module2.jSimport add from './modul 1.js '; const sum = add (2, 3); menghibur.log (jumlah); // 5 |
Dalam contoh ini, kami mengekspor fungsi add dari modul1.js dan kemudian mengimpornya ke modul2.JS Menggunakan Pernyataan Impor. Ini memungkinkan kami untuk menggunakan kembali fungsi tambah di berbagai bagian kode kami.
15. Fungsi panah
Fungsi panah adalah cara singkat untuk mendefinisikan fungsi dalam javascript. Mereka sangat berguna untuk membuat fungsi anonim, serta untuk membuat fungsi yang mengambil satu argumen.
angka const = [1, 2, 3, 4, 5]; Const Evenumbers = angka.filter (num => num % 2 === 0); menghibur.log (lebih banyak nomor); // [2, 4]| 12345 | angka const = [1, 2, 3, 4, 5]; Const Evenumbers = angka.filter (num => num % 2 === 0); menghibur.log (lebih banyak nomor); // [2, 4] |
Dalam contoh ini, kami menggunakan fungsi panah untuk memfilter array angka dan hanya mengembalikan angka genap. Sintaks fungsi panah lebih pendek dan lebih ringkas daripada sintaks fungsi tradisional.
Kesimpulan
Sebagai kesimpulan, 15 teknik JavaScript canggih ini sangat penting untuk setiap pengembang yang ingin membawa keterampilan mereka ke tingkat berikutnya. Apakah Anda sedang mengerjakan proyek kecil atau aplikasi besar, teknik ini dapat membantu Anda menulis kode yang lebih efisien dan dapat dipelihara. Jadi, mulailah berlatih dan lihat bagaimana teknik ini dapat membantu Anda membawa keterampilan javascript Anda ke tingkat berikutnya!