深入 JavaScript 中的默认参数！

本文已经过原作者 Tania Rascia 授权翻译

我是小智，今天，我们来讲讲默认参数。

在 ES6 中，JS引入了默认函数参数。如果未向函数调用提供实参，则允许开发人员用默认值初始化函数。以这种方式初始化函数参数将使函数更容易阅读，更不易出错，并为函数提供默认行为。这也帮助我们避免由于传入未定义的参数和解构不存在的对象而产生的错误。

在本文中，我们将学习一下形参和实参之间的区别，了解如何在函数中使用默认形参，了解支持默认形参的其他方法，并了解哪些类型的值和表达式可以用作默认形参。

实参和形参

在解释默认函数参数之前，重要的是要知道参数的默认值是什么。所以我们先回顾函数中实参和形参之间的区别。

在下面的代码中，我们创建一个函数，该函数返回一个给定数的立方：

  
 
 
 
       
  
  
  
  1. function cube(x) { 
    2.    
  
  
  
  2.   return x * x * x 
    3.    
  
  
  
  3. } 
    4.

此示例中的x变量是一个参数-传递给函数的命名变量，参数必须始终包含在变量中。接着，我们来调用一下这个函数：

  
 
 
 
       
  
  
  
  1. cube(10) // 1000 
    2.

在这种情况下，10是一个参数—调用时传递给函数的值。通常，值也可以用变量，如：

  
 
 
 
       
  
  
  
  1. const number = 10 
    2.    
  
  
  
  2.  
    3.    
  
  
  
  3. cube(number) // 1000 
    4.

如果没有将参数传递该函数，函数将隐式地使用undefined作为默认值：

  
 
 
 
       
  
  
  
  1. cube() // NaN 
    2.

在本例中，cube()试图计算undefined * undefined * undefined的值，结果是NaN。

这种自动的行为有时会造成问题。在某些情况下，我们希望参数具有一个值，即使没有向函数传递参数。这就是默认参数特性派上用场的地方。

默认参数语法

如果没有默认参数，我们就需要显式检查undefined的值才能设置默认值，如以下示例所示：

  
 
 
 
       
  
  
  
  1. function cube(x) { 
    2.    
  
  
  
  2.   if (typeof x === 'undefined') { 
    3.    
  
  
  
  3.     x = 5 
    4.    
  
  
  
  4.   } 
    5.    
  
  
  
  5.  
    6.    
  
  
  
  6.   return x * x * x 
    7.    
  
  
  
  7. } 
    8.    
  
  
  
  8.  
    9.    
  
  
  
  9. cube() 
    10.

相反，使用默认参数可以用更少的代码实现相同的目标。可以通过使用等式赋值运算符(=)为多维数据集中的参数设置默认值，如下所示：

  
 
 
 
       
  
  
  
  1. function cube(x = 5) { 
    2.    
  
  
  
  2.   return x * x * x 
    3.    
  
  
  
  3. } 
    4.

现在，在不带参数的情况下调用多维数据集函数时，它将为x赋5并返回计算而不是NaN：

传递参数时，它仍将按预期运行，而忽略默认值：

  
 
 
 
       
  
  
  
  1. cube(2)  // 8 
    2.

需要注意的一个地方，默认参数值还将覆盖作为函数的参数传递的undefined ，如下所示：

  
 
 
 
       
  
  
  
  1. cube(undefined)  // 125 
    2.

这里是使用默认参数 5 来计算的，显示的传递 undefined 会被忽略。

默认参数数据类型任何原始值或对象都可以用作默认参数值。首先，使用 number, string,boolean,object， array和null 作为默认值来设置参数。

  
 
 
 
       
  
  
  
  1. const defaultNumber = (number = 42) => console.log(number) 
    2.    
  
  
  
  2. const defaultString = (string = 'Shark') => console.log(string) 
    3.    
  
  
  
  3. const defaultBoolean = (boolean = true) => console.log(boolean) 
    4.    
  
  
  
  4. const defaultObject = (object = { id: 7 }) => console.log(object) 
    5.    
  
  
  
  5. const defaultArray = (array = [1, 2, 3]) => console.log(array) 
    6.    
  
  
  
  6. const defaultNull = (nullValue = null) => console.log(nullValue) 
    7.

在不带参数的情况下调用这些函数时，它们都将使用默认值：

  
 
 
 
       
  
  
  
  1. defaultNumber()  // 42 
    2.    
  
  
  
  2. defaultString()  // "Shark" 
    3.    
  
  
  
  3. defaultBoolean() // true 
    4.    
  
  
  
  4. defaultObject()  // {id: 7} 
    5.    
  
  
  
  5. defaultArray()   // (3) [1, 2, 3] 
    6.    
  
  
  
  6. defaultNull()    // null 
    7.

注意，在默认参数中创建的任何对象都将在每次调用函数时创建。默认参数的一个常见用例是使用这种行为从对象中获取值。如果我们试图从一个不存在的对象中解构或访问一个值，它将抛出一个错误。但是，如果默认参数是一个空对象，那么它只会给出undefined的值，而不会抛出错误。

  
 
 
 
       
  
  
  
  1. function settings(options = {}) { 
    2.    
  
  
  
  2.   const { theme, debug } = options 
    3.    
  
  
  
  3.  
    4.    
  
  
  
  4.   // Do something with settings 
    5.    
  
  
  
  5. } 
    6.

这样避免因解构不存在的对象而导致的错误。

现在我们已经看到了默认参数如何与不同的数据类型一起工作，下面我们来看看多个默认参数如何协同工作。

使用多个默认参数

首先，声明一个带有多个默认参数的sum()函数

  
 
 
 
       
  
  
  
  1. function sum(a = 1, b = 2) { 
    2.    
  
  
  
  2.   return a + b 
    3.    
  
  
  
  3. } 
    4.    
  
  
  
  4.  
    5.    
  
  
  
  5. sum() // 3 
    6.

此外，参数中使用的值可以在任何后续的默认参数中使用，从左到右。例如，这个createUser函数创建了一个用户对象userObj作为第三个参数，函数本身所做的就是返回userObj和前两个参数

  
 
 
 
       
  
  
  
  1. function createUser(name, rank, userObj = { name, rank }) { 
    2.    
  
  
  
  2.   return userObj 
    3.    
  
  
  
  3. } 
    4.    
  
  
  
  4.  
    5.    
  
  
  
  5. // Create user 
    6.    
  
  
  
  6. const user = createUser('前端小智', '前端开发') 
    7.    
  
  
  
  7.  
    8.    
  
  
  
  8. console.log(user) // {name: "前端小智", rank: "前端开发"} 
    9.

通常建议将所有默认参数放在参数列表的末尾，以便可以轻松保留可选值。如果首先使用默认参数，则必须显式传递undefined才能使用默认值。

  
 
 
 
       
  
  
  
  1. function defaultFirst(a = 1, b) { 
    2.    
  
  
  
  2.   return a + b 
    3.    
  
  
  
  3. } 
    4.

当调用这个函数时，必须调用带有两个参数的defaultFirst():

  
 
 
 
       
  
  
  
  1. efaultFirst(undefined, 2)  // 3 
    2.

实战中的事例，下面是一个函数，它的作用是创建一个DOM元素，并添加一个文本标签和类(如果存在的话)。

  
 
 
 
       
  
  
  
  1. function createNewElement(tag, text, classNames = []) { 
    2.    
  
  
  
  2.   const el = document.createElement(tag) 
    3.    
  
  
  
  3.   el.textContent = text 
    4.    
  
  
  
  4.  
    5.    
  
  
  
  5.   classNames.forEach((className) => { 
    6.    
  
  
  
  6.     el.classList.add(className) 
    7.    
  
  
  
  7.   }) 
    8.    
  
  
  
  8.  
    9.    
  
  
  
  9.   return el 
    10.    
  
  
  
  10. } 
    11.    
  
  
  
  11.  
    12.    
  
  
  
  12. const greeting = createNewElement('p', 'Hello!', ['greeting', 'active']) 
    13.

此时 greeting 的值为

  
 
 
 
       
  
  
  
  1. Hello!
     
    2.

如果将classNames数组保留在函数调用之外，则该数组仍将起作用。

  
 
 
 
       
  
  
  
  1. const greeting2 = createNewElement('p', 'Hello!') 
    2.    
  
  
  
  2.  
    3.    
  
  
  
  3. console.log(greeting2) // p>Hello!
     
    4.

函数调用作为默认参数除了原始类型和对象外，调用函数的结果可以用作默认参数。

在下面代码中，创建一个返回随机数的函数，然后将结果用作多维数据集函数中的默认参数值：

  
 
 
 
       
  
  
  
  1. function getRandomNumber() { 
    2.    
  
  
  
  2.   return Math.floor(Math.random() * 10) 
    3.    
  
  
  
  3. } 
    4.    
  
  
  
  4.  
    5.    
  
  
  
  5.  
    6.    
  
  
  
  6. function cube(x = getRandomNumber()) { 
    7.    
  
  
  
  7.   return x * x * x 
    8.    
  
  
  
  8. } 
    9.

现在每次调用 cube 结果可能都会不一样：

  
 
 
 
       
  
  
  
  1. cube()  // 512 
    2.    
  
  
  
  2. cube()  // 64 
    3.

在以下示例中，将一个随机数分配给x，该随机数用作我们创建函数中的参数。然后，y参数将计算数字的立方根，并检查x和y是否相等：

  
 
 
 
       
  
  
  
  1. function doesXEqualY(x = getRandomNumber(), y = Math.cbrt(cube(x))) { 
    2.    
  
  
  
  2.   return x === y 
    3.    
  
  
  
  3. } 
    4.    
  
  
  
  4.  
    5.    
  
  
  
  5. doesXEqualY() // true 
    6.

默认参数甚至可以是函数定义，如本例所示，它将参数定义为内部函数并返回参数的函数调用:

  
 
 
 
       
  
  
  
  1. function outer( 
    2.    
  
  
  
  2.   parameter = function inner() { 
    3.    
  
  
  
  3.     return 100 
    4.    
  
  
  
  4.   } 
    5.    
  
  
  
  5. ) { 
    6.    
  
  
  
  6.   return parameter() 
    7.    
  
  
  
  7. } 
    8.    
  
  
  
  8.  
    9.    
  
  
  
  9. // Invoke outer function 
    10.    
  
  
  
  10. outer() // 100 
    11.

总结在本文中，我们了解了什么是默认函数参数以及如何使用它们。现在，我们可以使用默认参数来帮助保持函数的整洁和易于阅读。还可以预先将空对象和数组分配给参数，以便在处理从对象中检索值或遍历数组等情况时减少复杂性和代码行数。

我是小智 ，我们下期见!

译者：前端小智 作者：Tania Rascia 来源：flatlogic.com原文：https://www.taarascia.com/default-parameters-javascript/

本文转载自微信公众号「大迁世界」，可以通过以下二维码关注。转载本文请联系大迁世界公众号。

本文标题：深入 JavaScript 中的默认参数！
网页网址：http://www.mswzjz.cn/qtweb/news29/382079.html

攀枝花网站建设、攀枝花网站运维推广公司-贝锐智能，是专注品牌与效果的网络营销公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 贝锐智能

贝锐智能技术为您推荐以下文章

手机网站建设知识

同城分类信息

全网营销网站推广　　 　眉山联通机房　　 　眉山电信机房　　 　手机网站建设　　 　H5建站　　 　郫县明安消防器材　　 　华泰海航　　 　四川国泰民安消防　　 　成都口碑营销公司　　 　响应式建站　　 　广安网站设计　　 　格蓝特设备　　 　seo关键词优化　　 　重庆电商网站建设　　 　成都响应式网站　　 　正泰动物制药　　 　成都枢纽中心　　 　成都机柜租用　　 　app软件开发　　 　工业净化空调