本文由原作者TaniaRascia授权翻译。我是小智。今天，我们来谈谈默认参数。在ES6中，JS引入了默认的函数参数。如果没有向函数调用提供参数，则允许开发人员使用默认值初始化函数。以这种方式初始化函数参数将使函数更易于阅读，不易出错，并为函数提供默认行为。这也有助于我们避免由于传入未定义的参数和解构不存在的对象而导致的错误。在本文中，我们将学习形式参数和实际参数之间的区别，学习如何在函数中使用默认参数，了解支持默认参数的其他方式，以及学习什么类型的值和表达式可以用作默认形式参数。实际参数和形式参数在解释默认函数参数之前，重要的是要知道参数的默认值是什么。因此，让我们首先回顾一下函数中实际参数和形式参数之间的区别。在下面的代码中，我们创建了一个返回给定数字的立方体的函数：始终包含在变量中。接下来，让我们调用该函数：cube(10)//1000在本例中，10是一个参数——调用函数时传递给该函数的值。通常，该值也可以使用变量，例如：constnumber=10cube(number)//1000如果没有向函数传递参数，函数将隐式使用undefined作为默认值：cube()//NaN在这个例子中,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)//125是使用默认参数5计算的，显示的传递的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实战中的例子，下面是一个函数，它是什么所做的是创建一个DOM元素并添加一个文本标签和类（如果存在）。函数createNewElement(tag,text,classNames=[]){constel=document.createElement(tag)el.textContent=textclassNames.forEach((className)=>{el.classList.add(className)})returnel}constgreeting=createNewElement('p','Hello!',['greeting','active'])此时greeting的值为
