Cara menggunakan parameter fungsi pilihan dalam JavaScript

WBOY
Lepaskan: 2023-09-03 21:29:13
asal
979 orang telah melayarinya

Cara menggunakan parameter fungsi pilihan dalam JavaScript

Dalam artikel pendek ini, kita akan membincangkan cara menggunakan parameter fungsi pilihan dalam JavaScript.

JavaScript ialah salah satu teknologi teras Internet. Ia digunakan oleh kebanyakan laman web dan disokong oleh semua pelayar web moden tanpa memerlukan pemalam. Dalam siri ini, kami akan membincangkan petua dan helah berbeza yang akan membantu anda dengan pembangunan JavaScript harian anda.

Dalam pengekodan JavaScript, anda selalunya perlu menjadikan parameter fungsi sebagai pilihan. Apabila anda menggunakan fungsi JavaScript, terdapat dua jenis parameter: parameter mandatori dan parameter pilihan. Dalam kes parameter mandatori, anda mesti melepasinya atau JavaScript akan membuang ralat. Walau bagaimanapun, untuk parameter pilihan, jika anda tidak melepasinya, ia akan dimulakan kepada nilai lalai.

Hari ini, kita akan membincangkan asas parameter fungsi pilihan dalam JavaScript dan cara menggunakannya.

Cara menggunakan parameter fungsi pilihan dalam ES5 dan versi sebelumnya

Dalam bahagian ini, kami akan membincangkan penyelesaian yang berfungsi walaupun pada pelayar lama. Ini kerap digunakan sehingga zaman JavaScript ES5, apabila tiada sokongan terbina dalam untuk menjadikan parameter fungsi sebagai pilihan.

Mari kita fahami cara ia berfungsi dengan contoh berikut.

function getFullImagePath(imagePath, imageBaseUrl) { imageBaseUrl = imageBaseUrl || 'https://code.tutsplus.com/’; var fullImagePath = imageBaseUrl + imagePath; return fullImagePath; }
Salin selepas log masuk

Dalam contoh di atas, fungsigetFullImagePathmengambil dua parameter:imagePathdanimageBaseUrl. Kami mahu menjadikan parameterimageBaseUrlkedua sebagai pilihan, jadi anda boleh melangkau menghantarnya jika anda mahu menggunakan nilai parameter lalai. Untuk menjadikannya pilihan, kami menggunakan pernyataan berikut.getFullImagePath函数采用两个参数:imagePathimageBaseUrl。我们希望将第二个imageBaseUrl参数设为可选,因此如果您想使用默认参数值,可以跳过传递它。为了使其可选,我们使用了以下语句。

imageBaseUrl = imageBaseUrl || 'https://code.tutsplus.com/';
Salin selepas log masuk

基本上,我们检查imageBaseUrl变量是否已定义。如果它被定义并且计算结果为TRUE,我们假设第二个参数可用,并且我们将使用它。另一方面,如果imageBaseUrl参数未定义或计算结果为FALSE,我们将使用https://code.tutsplus.com/值作为该参数的默认值。重要的是,可选参数应始终出现在参数列表的末尾。

请注意,此方法不适用于数值,因为它将覆盖值0。同样,如果您希望能够将0null传递到函数中,则必须显式检查参数是否未定义。

function getFullImagePath(imagePath, imageBaseUrl) { imageBaseUrl = (typeof imageBaseUrl === 'undefined') ? 'https://code.tutsplus.com/' : imageBaseUrl; var fullImagePath = imageBaseUrl + imagePath; return fullImagePath; }
Salin selepas log masuk

在本例中,我们明确检查了imageBaseUrl参数的值是否为undefined来决定它是否是可选参数。这是确定参数是否可选的更简单的方法。

这就是在不支持 ES6+ 版本的浏览器中使函数参数可选的方法。在下一节中,我们将在现代浏览器的背景下讨论它。

如何在 JavaScript ES6 中使用可选函数参数

在本节中,我们将讨论可以在支持 ES6 版本 JavaScript 的现代浏览器中使用的方法。让我们通过以下示例来了解它是如何工作的。我们将用 ES6 版本重写上一节中讨论的示例。

function getFullImagePath(imagePath, imageBaseUrl = 'https://code.tutsplus.com/') { var fullImagePath = imageBaseUrl + imagePath; return fullImagePath; }
Salin selepas log masuk

如果您使用过其他编程语言,那么您可能会熟悉上述定义可选函数参数的方法。在这种情况下,可选参数在函数声明语句本身中被分配默认值。

此外,您还可以有多个可选参数,如以下代码片段所示,只要您在参数列表的末尾定义它们即可。

function foo(a, b=0, c=10) { //... }
Salin selepas log masuk

如您所见,JavaScript ES6 语法比旧方法更简单、更容易编写。

结论

今天,我们讨论了如何在 JavaScript 中使用可选函数参数,以及几个实际示例。

以下是 JavaScript 中可选函数参数编码的不同方法的比较:

imageBaseUrl TRUE imageBaseUrl FALSE https://code.tutsplus.com/ 0 0 null imageBaseUrl undefined Pada asasnya, kami menyemak sama ada pembolehubahditakrifkan. Jika ia ditakrifkan dan dinilai kepada, kami menganggap hujah kedua tersedia dan kami akan menggunakannya. Sebaliknya, jika parametertidak ditentukan atau dinilai kepada, kami akan menggunakannilai sebagai nilai lalai untuk parameter ini. Adalah penting bahawa parameter pilihan harus sentiasa muncul di penghujung senarai parameter. Sila ambil perhatian bahawa kaedah ini tidak akan berfungsi dengan nilai angka kerana ia akan menimpa nilai. Begitu juga, jika anda ingin dapat menghantaratauke dalam fungsi, anda mesti menyemak secara eksplisit sama ada hujah tidak ditentukan. rrreee Dalam contoh ini, kami menyemak secara eksplisit sama ada nilai parameteradalahuntuk menentukan sama ada ia adalah parameter pilihan. Ini adalah cara yang lebih mudah untuk menentukan sama ada parameter adalah pilihan.
方法 注释
arg = arg ||默认值 ES6之前的常见习惯用法,但0null将被默认值覆盖。
arg = (typeof arg === '未定义') ?默认值:arg ES6之前实现可选参数最简单的方式。
函数某事(arg=defaultValue) { }rrreee
Ini adalah cara untuk menjadikan parameter fungsi sebagai pilihan dalam penyemak imbas yang tidak menyokong versi ES6+. Dalam bahagian seterusnya, kita akan membincangkannya dalam konteks penyemak imbas moden. Cara menggunakan parameter fungsi pilihan dalam JavaScript ES6 Dalam bahagian ini, kita akan membincangkan kaedah yang boleh digunakan dalam penyemak imbas moden yang menyokong versi ES6 JavaScript. Mari kita fahami cara ia berfungsi dengan contoh berikut. Kami akan menulis semula contoh yang dibincangkan dalam bahagian sebelumnya dengan versi ES6. rrreee Jika anda telah menggunakan bahasa pengaturcaraan lain, maka anda mungkin biasa dengan kaedah di atas untuk menentukan parameter fungsi pilihan. Dalam kes ini, parameter pilihan diberikan nilai lalai dalam pernyataan pengisytiharan fungsi itu sendiri. Selain itu, anda boleh mempunyai berbilang parameter pilihan, seperti yang ditunjukkan dalam coretan kod berikut, asalkan anda mentakrifkannya di penghujung senarai parameter. rrreee Seperti yang anda lihat, sintaks JavaScript ES6 adalah lebih ringkas dan lebih mudah untuk ditulis berbanding cara lama. Kesimpulan Hari ini, kami membincangkan cara menggunakan parameter fungsi pilihan dalam JavaScript, bersama-sama dengan beberapa contoh praktikal. Berikut ialah perbandingan cara berbeza pengekodan parameter fungsi pilihan dalam JavaScript: KaedahUlasan arg = arg ||Nilai lalai Idiom biasa sebelum ES6, tetapi 0dan nullakan ditindih oleh nilai lalai. arg = (typeof arg === 'undefined') ?Nilai lalai: argCara paling mudah untuk melaksanakan parameter pilihan sebelum ES6. Fungsi sesuatu (arg=defaultValue) { }Pendekatan terbaik untuk ES6 dan versi JavaScript yang lebih baharu.

Atas ialah kandungan terperinci Cara menggunakan parameter fungsi pilihan dalam JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina:Latihan PHP dalam talian kebajikan awam,Bantu pelajar PHP berkembang dengan cepat!