文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

深入JS函数中默认参数的使用详解

2024-04-02 19:55

关注

默认参数:如果没有值或传入值为undefined的情况下,默认函数参数允许定义好的形参对默认值进行初始化

下面我们来探讨在js中函数使用默认参数的几个细节,包括默认位置默认参数对函数的length属性的影响重新创建的默认参数与形参的结合使用默认参数的作用域以及默认参数的暂时性死区

ES5中的默认参数

在ES5时,还不能直接直接在参数中指定默认值,只能通过在函数域内声明变量并赋值,达到一个默认值的效果,但是这种不会直观得表明默认值参数

function fn(x, y) {
  var y = y || 1;
  return x + y;
}
console.log(fn(2)); // 3

就如上代码,我们通过||使y为函数的默认参数,这就是ES5的实现方式,但是如果我们的参数是布尔值的情况,就很容易造成问题。

下面让我们看看在ES6针对这个问题而引入的特性——全新默认参数的诞生

全新默认参数的诞生

ES6函数参数默认值是可以直接在参数定义的时候进行默认赋值 , 它的应用优化了代码结构,也增强了代码阅读者的体验。

function fn(x, y=1) {
  return x + y;
}
console.log(fn(2)); // 3

值得注意的是参数定义的时候赋默认值需要注意一些细节。

默认位置

默认参数值的位置一定为尾参数,即参数定义的尾部,下面的代码说明了如果默认参数的定义不放在尾部的情况

function fn(x = 1, y) {
  return [x, y];
}
console.log(fn(2)); // [ 2, undefined ]

这种情况即我们无法再通过控制x没有值使用x的默认值,但是可以使用undefined来解决这个问题

function fn(x = 1, y) {
  return [x, y];
}
console.log(fn(undefined,2)); // [ 1, 2 ]

即使这样还是建议将默认参数定义在参数的尾部,其中一个原因就是它会影响函数length属性

默认参数对函数的length属性的影响

函数的length属性会返回函数的参数数量,其不包括默认参数,但是这里有一个问题,它仅仅只会返回参数区域内默认参数前的形式参数数量

console.log(function fn(x, y = 1, z) {}.length); // 1

上面的函数x被设默认值,所以其length属性只返回x之前的形式参数数量,由此还是建议将默认参数放在参数定义的尾部

重新创建的默认参数

函数在被调用的时候,参数会被创建,而默认参数有一个问题,就是他是否会因为函数的重复调用而被重新创建,在JS中是会的,来看下面的例子

function fn(x, num = []) {
  num.push(x);
  return num;
}
console.log(fn(1)); // [1]
console.log(fn(2)); // [2]

通过上面两次调用fn函数并为num添加元素,而每次调用得到的结果证明了每次调用函数都会重新创建默认num

默认参数与形参的结合使用

我们可以将默认参数与形参结合起来使用,如下

function fn(x, y, z = [x, y, 1]) {
  return z;
}
console.log(fn(1, 2)); // [ 1, 2, 1 ]

我们通过尾部的默认参数与前面的形式参数结合,可以是字符串形式,也可以是数组形式,也可以表达式,比如:fn(x, y, z = x + y)

默认参数的作用域问题

深入默认参数的原理,其本质为使用let声明默认参数,所以这就造成了一个现象,即当我们使用默认参数的时候,会开辟一个单独的作用域,在作用域内访问一个变量的时候会进行一些步骤,为了更好的理解参数作用域,拿下面拿一段代码说明这个过程:

let x = 1
function() fn(y = x) {
    return y
}
console.log(fn()) // 1

由于y = x是默认参数,所以参数定义的区域形成了一个单独作用域,在赋值的过程中,它将与引擎进行如下对话,这里忽略掉LHSRHS查询,不是本文的要点

通过这个简单的例子可以理解默认参数的作用域是什么,其实它很常见,比如说for循环

for(let i = 0; i < 100; i++) {}

默认参数的隐藏性死区(隐藏的暂时性死区)

在之前let与const命令这篇文章中提到了暂时性性死区的概念,而因为默认参数的特性,也会造成暂时性死区的现象

暂时性死区:在代码块中使用let声明变量前,该变量不可用,这种现象称为暂时性死区

var x = 1
function fn(x = x) {
    return x;
}

在参数内x = x其本质为let x = x= x的时候会出现暂时性死区的现象,因为在此刻出现问题的是=后的x,此时对x进行访问,所以,而此刻在该作用域内let x之前,没有声明x,所以该变量不可用,即我们所说的暂时性死区的现象。

参考文献

到此这篇关于深入JS函数中默认参数的使用详解的文章就介绍到这了,更多相关JS函数默认参数内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯