[回归基础] JavaScript 函数中默认参数

10年服务1亿Tian开发工程师

了解 JavaScript 中的默认参数以及如何使用它们。

默认参数定义

默认参数允许你设置参数的默认值。

默认情况下,JavaScript 函数的所有参数都是 undefined (未定义的)。默认参数允许你设置不同的默认值。

请考虑以下示例:


function logFirst(data){
  console.log(data[0]);
}

上面的例子是说,我们有一个简单的函数,打印数组中的第一个元素。该函数需要一个参数,data ,我们期望它是一个 Array 数组。但是如果没有数据传入,会发生什么?

logFirst();
// Uncaught TypeError: Cannot read property '0' of undefined  
// 未捕获的输入错误:无法读取 undefined 的 '0' 属性

呃哦, 我们收到一个错误。 因为 data 未被传递到我们的函数中,因此被默认为 undefined (未定义的)。

我们如何解决这个问题? 你可以实用默认参数。 要使用默认参数,只需传递 (parameter = defaultValue) 。 这里我们将参数的默认值设置为 ['cats'] 数组。

function logFirst(data = ['cats']){
  console.log(data[0]);
}

现在当我们运行没有任何传入的函数时,data 的值将默认为数组 ['cats']

logFirst();
// cats

它返回默认值 cats !最重要的是,如果我们提供一个参数,它将覆盖默认值:

logFirst(['dogs']);
// dogs

您还可以在单个函数中拥有多个默认参数:

function logFirst(num = 0, data = ['cats']){
  console.log(`I own ${num} ${data[0]}.`);
}
logFirst();
// I own 0 cats.
logFirst(2);
// I own 2 cats.
logFirst(undefined,['dogs']);
// I own 0 dogs.

PS:你如果不是用ES6语法,默认参数可以这样写:

function logNum(num){
  var num = num || 1 ; // 当参数 num 为 false 时,重新赋值 num  
  console.log( "默认参数 num : " + num );
}
logNum();
// 默认参数 num : 1

这里第2行的意思是,当参数 numfalse 时,重新赋值 num1

赞(1) 打赏
未经允许不得转载:WEBTian开发 » [回归基础] JavaScript 函数中默认参数

评论 1

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

Tian开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏