关于“JS函数默认参数是什么，如何应用的”的知识有一些人不是很理解，对此小编给大家总结了相关内容，具有一定的参考借鉴价值，而且易于学习与理解，希望能对大家有所帮助，有这个方面学习需要的朋友就继续往下看吧。

默认参数：如果没有值或传入值为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是默认参数，所以参数定义的区域形成了一个单独作用域，在赋值的过程中，它将与引擎进行如下对话，这里忽略掉LHS与RHS查询，不是本文的要点

• 引擎在为y赋值的时候会询问当前作用域是否见过x，当前作用域即参数声明的作用域回答没有
• 引擎会向上走，询问上级作用域，此时为全局作用域，回答有x，引擎为y赋值

通过这个简单的例子可以理解默认参数的作用域是什么，其实它很常见，比如说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函数默认参数是什么，如何应用的”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业技术相关的知识可以关注群英网络网站，小编每天都会为大家更新不同的知识。

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• Angular中视图封装的实现有几种方式，哪种好

  Angular如何进行视图封装？下面本篇文章给大家深入了解一下Angular Encapsulation的三种方式，希望对大家有所帮助！

• 如何掌握React Hook的用法，常用的有哪些

  这篇文章主要介绍了React Hook用法详解（6个常见hook）,本文通过实例代码给大家介绍了6个常见hook，需要的朋友可以参考下

• js中class的用法是什么？一文带你快速了解

  这篇文章给大家分享的是有关js中class怎么用的内容。js中class的用法是比较重要的内容，因此分享给大家做个参考，接下来一起跟随小编看看吧。

• JS实现简易电灯开关的代码示例

  我们学习了JS 之后，能够用JS实现很多有意思的炫酷效果。这篇文章就给大家分享一个模拟电灯开关的小案例，生活中，我们用手一按就可以让电灯亮起和熄灭，下面我们来看看如何用JS实现点灯开关效果。

• JavaScript中预编译过程包括了什么，怎么理解

  本篇文章给大家带来了关于JavaScript中预编译的相关知识，其中主要通过示例来介绍预编译的相关问题，希望对大家有帮助。