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;
}

Dalam contoh di atas, fungsi getFullImagePath mengambil dua parameter: imagePath dan imageBaseUrl. Kami mahu menjadikan parameter imageBaseUrl 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+ 版本的浏览器中使函数参数可选的方法。在下一节中，我们将在现代浏览器的背景下讨论它。

如何在 JavaScript 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 中可选函数参数编码的不同方法的比较：

Pada asasnya, kami menyemak sama ada pembolehubah imageBaseUrl ditakrifkan. Jika ia ditakrifkan dan dinilai kepada TRUE, kami menganggap hujah kedua tersedia dan kami akan menggunakannya. Sebaliknya, jika parameter imageBaseUrl tidak ditentukan atau dinilai kepada FALSE, kami akan menggunakan https://code.tutsplus.com/ nilai 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 0. Begitu juga, jika anda ingin dapat menghantar 0 atau null ke dalam fungsi, anda mesti menyemak secara eksplisit sama ada hujah tidak ditentukan. rrreee Dalam contoh ini, kami menyemak secara eksplisit sama ada nilai parameter imageBaseUrl adalah undefined untuk menentukan sama ada ia adalah parameter pilihan. Ini adalah cara yang lebih mudah untuk menentukan sama ada parameter adalah pilihan.

方法	注释
arg = arg ||默认值	ES6之前的常见习惯用法，但 0 和 null 将被默认值覆盖。
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: 🎜 Kaedah Ulasan 🎜 🎜 arg = arg ||Nilai lalai🎜 🎜Idiom biasa sebelum ES6, tetapi 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!