译者：FrontendXiaozhi作者：TaniaRascia来源：flatlogic.com有梦想，有干货，微信搜索【大千世界】关注这位凌晨还在洗碗的洗碗智慧。本文已收录到GitHubhttps://github.com/qq449245884/xiaozhi，里面有完整的测试站点、资料和我的一线厂商访谈系列文章。我是小智今天，我们来谈谈默认参数。在ES6中，JS引入了默认的函数参数。如果没有向函数调用提供参数，则允许开发人员使用默认值初始化函数。以这种方式初始化函数参数将使函数更易于阅读，不易出错，并为函数提供默认行为。这也有助于我们避免由于传入未定义的参数和解构不存在的对象而导致的错误。在本文中，我们将学习形式参数和实际参数之间的区别，学习如何在函数中使用默认参数，了解支持默认参数的其他方式，以及学习什么类型的值和表达式可以用作默认形式参数。实际参数和形式参数在解释默认函数参数之前，重要的是要知道参数的默认值是什么。因此，让我们首先回顾一下函数中实际参数和形式参数之间的区别。在下面的代码中，我们创建了一个返回给定数字立方体的函数：functioncube(x){returnx*x*x}本例中的x变量是一个参数-传递给函数的命名变量，参数必须始终包含在变量中。接下来，让我们调用该函数：cube(10)//1000在本例中，10是一个参数——调用函数时传递给该函数的值。通常，该值也可以是可变的，例如：constnumber=10cube(number)//1000如果没有向函数传递参数，函数将隐式使用undefined作为默认值：cube()//NaNinthis例如，cube()尝试计算undefined*undefined*undefined的值，结果为NaN。这种自动行为有时会导致问题。在某些情况下，即使没有参数传递给函数，我们也希望参数具有值。这是默认参数功能派上用场的地方。默认参数语法如果没有默认参数，我们需要显式检查undefined的值来设置默认值，如下例所示：functioncube(x){if(typeofx==='undefined'){x=5}returnx*x*x}cube()相反，使用默认参数可以用更少的代码实现相同的目标。可以使用相等赋值运算符（=）为立方体中的参数设置默认值，如下所示：functioncube(x=5){returnx*x*x}现在，调用不带参数的立方体函数，它将将5分配给x并返回计算结果而不是NaN：当传递一个参数时，它仍然会按预期表现，忽略默认值：cube(2)//8需要注意的一点是，默认参数值也会覆盖传递的undefined作为函数的参数，如下：cube(undefined)//这里使用默认参数5计算125，显示的传递的undefined将被忽略。默认参数数据类型任何原始值或对象都可以用作默认参数值。首先，将数字、字符串、布尔值、对象、数组和空值设置为默认值的参数。constdefaultNumber=(number=42)=>console.log(number)constdefaultString=(string='Shark')=>console.log(string)constdefaultBoolean=(boolean=true)=>console.log(boolean)constdefaultObject=(object={id:7})=>console.log(object)constdefaultArray=(array=[1,2,3])=>console.log(array)constdefaultNull=(nullValue=null)=>console.log(nullValue)当不带参数调用这些函数时，它们都将使用默认值：defaultNumber()//42defaultString()//"Shark"defaultBoolean()//truedefaultObject()//{id:7}defaultArray()//(3)[1,2,3]defaultNull()//null请注意，每次调用该函数时，都会创建在默认参数中创建的任何对象。默认参数的一个常见用例是使用此行为从对象中获取值。如果我们试图从一个不存在的对象中解构或访问一个值，它会抛出一个错误。但是，如果默认参数是一个空对象，那么它只会给出值undefined而不是抛出错误。functionsettings(options={}){const{theme,debug}=options//Dosomethingwithsettings}这避免了因解构不存在的对象而导致的错误。现在我们已经了解了默认参数如何与不同的数据类型一起工作，让我们看看多个默认参数如何协同工作。使用多个默认参数首先声明一个sum()函数，带有多个默认参数functionsum(a=1,b=2){returna+b}sum()//3还有，参数中使用的值可以用于任何后续的默认参数，从左到右。例如，这个createUser函数创建一个用户对象userObj作为第三个参数，函数本身所做的就是返回userObj和前两个参数functioncreateUser(name,rank,userObj={name,rank}){returnuserObj}//createuserconstuser=createUser('前端小智','前端开发')console.log(user)//{name:"前端小智",rank:"前端开发"}是通常建议将所有默认参数放在参数列表的末尾，以便可以轻松保留可选值。如果首先使用默认参数，则必须显式传递undefined以使用默认值。functiondefaultFirst(a=1,b){returna+b}调用这个函数的时候，必须调用defaultFirst()，有两个参数：efaultFirst(undefined,2)//实战中的3个例子，下面是一个Function，它创建一个DOM元素并添加一个文本标签和类（如果存在）。functioncreateNewElement(tag,text,classNames=[]){constel=document.createElement(tag)el.textContent=textclassNames.forEach((className)=>{el.classList.add(className)})返回el}constgreeting=createNewElement('p','Hello!',['greeting','active'])此时greeting的值为
