Pada postingan sebelumnya kita telah membahas tentang fungsi JavaScript dan komponen-komponennya. Fungsi memiliki struktur yang berbeda seperti parameter atau tanpa parameter dan beberapa fungsi mengembalikan nilai dan beberapa tidak dalam JavaScript
Fungsi yang paling sederhana adalah fungsi tanpa parameter dan tanpa pengembalian. Fungsi menghitung pernyataannya dan kemudian langsung menampilkan hasilnya
Sintaksis
Berikut adalah sintaks untuk fungsi yang tidak memiliki parameter dan juga tidak mengembalikan nilai apapun
function <name>() { statements; output statement; }fungsi – Fungsi kata kunci mengidentifikasi blok sebagai objek fungsi
– adalah nama fungsi yang diberikan oleh pengguna
() – tanda kurung tidak mengandung argumen apapun
pernyataan;
pernyataan keluaran – tidak perlu bahwa fungsi yang tidak mengembalikan apa pun harus memberikan keluaran, tetapi sebagian besar waktu Anda akan menemukan pernyataan yang mencetak keluaran dalam jenis fungsi ini
Perhatikan contoh program berikut
Contoh 1
//variable declarations var side = 34; //function declaration function area_of_square() { var area = side * side; console.log("Area of the Square =" + " " + area); } //function call area_of_square();_Keluaran #1
Contoh di atas menggambarkan dua hal yang diberikan di bawah ini
(1) Sisi variabel tidak diberikan ke parameter, tetapi langsung diakses oleh fungsi yang dimungkinkan dalam JavaScript
(2) Fungsi tidak mengembalikan nilai apa pun tetapi mencetak output ke konsol browser
Pada pelajaran berikutnya, kita akan membahas lebih dalam tentang jenis-jenis fungsi lain seperti fungsi yang mengembalikan suatu nilai dan kelebihannya
Metode apply() memanggil fungsi yang ditentukan dengan nilai this yang diberikan, dan arguments disediakan sebagai larik (atau )
apply(thisArg) apply(thisArg, argsArray)
function wrapper() { return anotherFn.apply(null, arguments); } 0
Nilai this disediakan untuk panggilan ke function wrapper() { return anotherFn.apply(null, arguments); } 2. Jika fungsi tidak dalam mode ketat, function wrapper() { return anotherFn.apply(null, arguments); } 3 dan function wrapper() { return anotherFn.apply(null, arguments); } 4 akan diganti dengan objek global, dan nilai primitif akan diubah menjadi objek
function wrapper() { return anotherFn.apply(null, arguments); } 5 OpsionalObjek seperti array, menentukan argumen yang function wrapper() { return anotherFn.apply(null, arguments); } 2 harus dipanggil, atau function wrapper() { return anotherFn.apply(null, arguments); } 3 atau function wrapper() { return anotherFn.apply(null, arguments); } 4 jika tidak ada argumen yang harus diberikan ke fungsi
Hasil pemanggilan fungsi dengan nilai dan argumen ________42______ yang ditentukan
Catatan. Fungsi ini hampir identik dengan function wrapper(...args) { return anotherFn(...args); } _0, kecuali bahwa function wrapper(...args) { return anotherFn(...args); } 0 menerima daftar argumen, sementara apply() menerima satu larik argumen — misalnya, function wrapper(...args) { return anotherFn(...args); } 3 vs. function wrapper(...args) { return anotherFn(...args); } _4
Biasanya, saat memanggil suatu fungsi, nilai this di dalam fungsi adalah objek tempat fungsi itu diakses. Dengan apply(), Anda dapat menetapkan nilai arbitrer sebagai this saat memanggil fungsi yang ada, tanpa terlebih dahulu melampirkan fungsi ke objek sebagai properti. Ini memungkinkan Anda untuk menggunakan metode satu objek sebagai fungsi utilitas umum
Anda juga dapat menggunakan segala jenis objek yang mirip array sebagai parameter kedua. Dalam praktiknya, ini berarti bahwa ia harus memiliki properti function wrapper(...args) { return anotherFn(...args); } 8, dan properti integer ("indeks") dalam rentang function wrapper(...args) { return anotherFn(...args); } 9. Misalnya, Anda dapat menggunakan const array = ["a", "b"]; const elements = [0, 1, 2]; array.push.apply(array, elements); console.info(array); // ["a", "b", 0, 1, 2] _0, atau objek khusus seperti const array = ["a", "b"]; const elements = [0, 1, 2]; array.push.apply(array, elements); console.info(array); // ["a", "b", 0, 1, 2] 1. Anda juga dapat menggunakan arguments, misalnya
function wrapper() { return anotherFn.apply(null, arguments); }
Dengan parameter sisa dan sintaks penyebaran parameter, ini dapat ditulis ulang sebagai
function wrapper(...args) { return anotherFn(...args); }
Secara umum, const array = ["a", "b"]; const elements = [0, 1, 2]; array.push.apply(array, elements); console.info(array); // ["a", "b", 0, 1, 2] _3 setara dengan const array = ["a", "b"]; const elements = [0, 1, 2]; array.push.apply(array, elements); console.info(array); // ["a", "b", 0, 1, 2] 4 dengan sintaks penyebaran parameter, kecuali const array = ["a", "b"]; const elements = [0, 1, 2]; array.push.apply(array, elements); console.info(array); // ["a", "b", 0, 1, 2] 5 diharapkan berupa objek mirip-array dalam kasus sebelumnya dengan apply(), dan objek dalam kasus terakhir dengan sintaks penyebaran
Peringatan. Jangan gunakan apply() untuk merangkai konstruktor (misalnya, untuk mengimplementasikan pewarisan). Ini memanggil fungsi konstruktor sebagai fungsi biasa, yang berarti const array = ["a", "b"]; const elements = [0, 1, 2]; array.push.apply(array, elements); console.info(array); // ["a", "b", 0, 1, 2] 8 adalah function wrapper() { return anotherFn.apply(null, arguments); } 4, dan kelas melontarkan kesalahan karena tidak dapat dipanggil tanpa const array = ["a", "b"]; const elements = [0, 1, 2]; array.push(...elements); console.info(array); // ["a", "b", 0, 1, 2] 0. Gunakan const array = ["a", "b"]; const elements = [0, 1, 2]; array.push(...elements); console.info(array); // ["a", "b", 0, 1, 2] 1 atau const array = ["a", "b"]; const elements = [0, 1, 2]; array.push(...elements); console.info(array); // ["a", "b", 0, 1, 2] 2 sebagai gantinya
Anda dapat menggunakan const array = ["a", "b"]; const elements = [0, 1, 2]; array.push(...elements); console.info(array); // ["a", "b", 0, 1, 2] _3 untuk menambahkan elemen ke array. Karena const array = ["a", "b"]; const elements = [0, 1, 2]; array.push(...elements); console.info(array); // ["a", "b", 0, 1, 2] _4 menerima sejumlah variabel argumen, Anda juga dapat mendorong beberapa elemen sekaligus. Tetapi jika Anda meneruskan larik ke const array = ["a", "b"]; const elements = [0, 1, 2]; array.push(...elements); console.info(array); // ["a", "b", 0, 1, 2] _4, itu sebenarnya akan menambahkan larik itu sebagai elemen tunggal, alih-alih menambahkan elemen satu per satu, diakhiri dengan larik di dalam larik. Di sisi lain, const array = ["a", "b"]; const elements = [0, 1, 2]; array.push(...elements); console.info(array); // ["a", "b", 0, 1, 2] _6 memang memiliki perilaku yang diinginkan dalam kasus ini, tetapi tidak ditambahkan ke array yang ada — ia membuat dan mengembalikan array baru
Dalam hal ini, Anda dapat menggunakan const array = ["a", "b"]; const elements = [0, 1, 2]; array.push(...elements); console.info(array); // ["a", "b", 0, 1, 2] _7 untuk secara implisit "menyebarkan" array sebagai rangkaian argumen
const array = ["a", "b"]; const elements = [0, 1, 2]; array.push.apply(array, elements); console.info(array); // ["a", "b", 0, 1, 2]
Efek yang sama dapat dicapai dengan sintaks spread
const array = ["a", "b"]; const elements = [0, 1, 2]; array.push(...elements); console.info(array); // ["a", "b", 0, 1, 2]
Penggunaan cerdas apply() memungkinkan Anda untuk menggunakan fungsi bawaan untuk beberapa tugas yang mungkin memerlukan perulangan koleksi secara manual (atau menggunakan sintaks sebar)
Sebagai contoh, kita dapat menggunakan const array = ["a", "b"]; const elements = [0, 1, 2]; array.push(...elements); console.info(array); // ["a", "b", 0, 1, 2] _9 dan // min/max number in an array const numbers = [5, 6, 2, 3, 7]; // using Math.min/Math.max apply let max = Math.max.apply(null, numbers); // This about equal to Math.max(numbers[0], …) // or Math.max(5, 6, …) let min = Math.min.apply(null, numbers); // vs. simple loop based algorithm max = -Infinity; min = +Infinity; for (let i = 0; i < numbers.length; i++) { if (numbers[i] > max) { max = numbers[i]; } if (numbers[i] < min) { min = numbers[i]; } } 0 untuk mengetahui nilai maksimum dan minimum dalam sebuah array
// min/max number in an array const numbers = [5, 6, 2, 3, 7]; // using Math.min/Math.max apply let max = Math.max.apply(null, numbers); // This about equal to Math.max(numbers[0], …) // or Math.max(5, 6, …) let min = Math.min.apply(null, numbers); // vs. simple loop based algorithm max = -Infinity; min = +Infinity; for (let i = 0; i < numbers.length; i++) { if (numbers[i] > max) { max = numbers[i]; } if (numbers[i] < min) { min = numbers[i]; } }
Tapi berhati-hatilah. dengan menggunakan apply() (atau sintaks penyebaran) dengan daftar argumen panjang yang sewenang-wenang, Anda berisiko melebihi batas panjang argumen mesin JavaScript
Konsekuensi pemanggilan fungsi dengan terlalu banyak argumen (yaitu, lebih dari puluhan ribu argumen) tidak ditentukan dan bervariasi antar mesin. (Mesin JavaScriptCore memiliki batas argumen hard-coded 65536. ) Sebagian besar mesin memberikan pengecualian; . Untuk mengilustrasikan kasus terakhir ini. jika mesin seperti itu memiliki batas empat argumen (batas sebenarnya tentu saja jauh lebih tinggi), itu akan menjadi seolah-olah argumen // min/max number in an array const numbers = [5, 6, 2, 3, 7]; // using Math.min/Math.max apply let max = Math.max.apply(null, numbers); // This about equal to Math.max(numbers[0], …) // or Math.max(5, 6, …) let min = Math.min.apply(null, numbers); // vs. simple loop based algorithm max = -Infinity; min = +Infinity; for (let i = 0; i < numbers.length; i++) { if (numbers[i] > max) { max = numbers[i]; } if (numbers[i] < min) { min = numbers[i]; } } 2 telah diteruskan ke const array = ["a", "b"]; const elements = [0, 1, 2]; array.push(...elements); console.info(array); // ["a", "b", 0, 1, 2] 7 dalam contoh di atas, daripada array penuh
Jika susunan nilai Anda mungkin tumbuh menjadi puluhan ribu, gunakan strategi hibrid. terapkan fungsi Anda ke potongan array sekaligus