您的位置:首页 » 分类: JavaScript » 文章: [回归基础] JavaScript 函数中默认参数

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

小编推荐:掘金是一个高质量的技术社区,从 ECMAScript 6 到 Vue.js,性能优化到开源类库,让你不错过前端开发的每一个技术干货。各大应用市场搜索「掘金」即可下载APP,技术干货尽在掌握..

了解 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

正文完。下面还有一个推广让最好的人才遇见更好的机会!

互联网行业的年轻人,他们面对着怎样的职业瓶颈、困惑与未来选择?过去,这鲜有人关心。资深的职场人,也多半优先选择熟人去推荐机会。

100offer致力于改变现状,帮互联网行业最好的人才发现更好的机会。使用 100offer.com 或 100offer App ,可以一周内获得中国、美国等数千家优质企业的工作机会。

马上去遇见更好的机会
推广结束

关注WEB前端开发官方公众号

关注国内外最新最好的前端开发技术干货,获取最新前端开发资讯,致力于打造高质量的前端技术分享公众号

发表评论

电子邮件地址不会被公开。 必填项已用*标注