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.
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; }
Dalam contoh di atas, fungsigetFullImagePath
mengambil dua parameter:imagePath
danimageBaseUrl
. Kami mahu menjadikan parameterimageBaseUrl
kedua sebagai pilihan, jadi anda boleh melangkau menghantarnya jika anda mahu menggunakan nilai parameter lalai. Untuk menjadikannya pilihan, kami menggunakan pernyataan berikut.getFullImagePath
函数采用两个参数:imagePath
和imageBaseUrl
。我们希望将第二个imageBaseUrl
参数设为可选,因此如果您想使用默认参数值,可以跳过传递它。为了使其可选,我们使用了以下语句。
imageBaseUrl = imageBaseUrl || 'https://code.tutsplus.com/';
基本上,我们检查imageBaseUrl
变量是否已定义。如果它被定义并且计算结果为TRUE
,我们假设第二个参数可用,并且我们将使用它。另一方面,如果imageBaseUrl
参数未定义或计算结果为FALSE
,我们将使用https://code.tutsplus.com/
值作为该参数的默认值。重要的是,可选参数应始终出现在参数列表的末尾。
请注意,此方法不适用于数值,因为它将覆盖值0
。同样,如果您希望能够将0
或null
传递到函数中,则必须显式检查参数是否未定义。
function getFullImagePath(imagePath, imageBaseUrl) { imageBaseUrl = (typeof imageBaseUrl === 'undefined') ? 'https://code.tutsplus.com/' : imageBaseUrl; var fullImagePath = imageBaseUrl + imagePath; return fullImagePath; }
在本例中,我们明确检查了imageBaseUrl
参数的值是否为undefined
来决定它是否是可选参数。这是确定参数是否可选的更简单的方法。
这就是在不支持 ES6+ 版本的浏览器中使函数参数可选的方法。在下一节中,我们将在现代浏览器的背景下讨论它。
在本节中,我们将讨论可以在支持 ES6 版本 JavaScript 的现代浏览器中使用的方法。让我们通过以下示例来了解它是如何工作的。我们将用 ES6 版本重写上一节中讨论的示例。
function getFullImagePath(imagePath, imageBaseUrl = 'https://code.tutsplus.com/') { var fullImagePath = imageBaseUrl + imagePath; return fullImagePath; }
如果您使用过其他编程语言,那么您可能会熟悉上述定义可选函数参数的方法。在这种情况下,可选参数在函数声明语句本身中被分配默认值。
此外,您还可以有多个可选参数,如以下代码片段所示,只要您在参数列表的末尾定义它们即可。
function foo(a, b=0, c=10) { //... }
如您所见,JavaScript ES6 语法比旧方法更简单、更容易编写。
今天,我们讨论了如何在 JavaScript 中使用可选函数参数,以及几个实际示例。
以下是 JavaScript 中可选函数参数编码的不同方法的比较:
imageBaseUrl
TRUE
imageBaseUrl
FALSE
https://code.tutsplus.com/
0
0
null
imageBaseUrl
undefined
方法 | 注释 |
---|---|
arg = arg ||默认值 |
ES6之前的常见习惯用法,但0 和null 将被默认值覆盖。 |
arg = (typeof arg === '未定义') ?默认值:arg |
ES6之前实现可选参数最简单的方式。 |
函数某事(arg=defaultValue) { } rrreee | 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. |
0
dan
null
akan ditindih oleh nilai lalai.
arg = (typeof arg === 'undefined') ?Nilai lalai: arg
Cara 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!