ES6 中提供了函数参数的默认值，但有时我们需要用到更多的参数，在代码中添加更多的判断语句。幸运的是 ES12 中提供了更多的函数参数用法，让我们的代码更加简洁和易于维护。
函数默认值
函数默认值是为参数设置默认值。如果你不传递参数或者传递的值为 undefined，那么默认值就会生效。
function add(a, b = 1) {
return a + b;
}
console.log(add(2)); // 输出3
console.log(add(2, 3)); // 输出5在上面的例子中，我们为参数 b 设置了默认值 1。当 b 没有被传递时，它将等于默认值 1。
你也可以使用默认值来模拟命名参数：
function userInfo({ name = 'Anonymous', age = 0, gender = 'Unknown' }) {
return { name, age, gender };
}
console.log(userInfo({ name: 'Jack', age: 25 }));
// 输出 { name: 'Jack', age: 25, gender: 'Unknown' }
console.log(userInfo({}));
// 输出 { name: 'Anonymous', age: 0, gender: 'Unknown' }在上面的例子中，我们向函数传递一个对象，然后解构它的属性来得到我们需要的参数。如果对象中的属性没有被定义或者为 undefined，那么默认值就会生效。
剩余参数
剩余参数用于收集函数参数。在函数参数中，你可以使用 ... 来指定将多余传递的参数收集为一个数组。
-- -------------------- ---- -------
-------- --------------- -
--- ------ - --
--- ---- --- -- -------- -
------ -- ----
-
------ -------
-
------------------ -- -- -- ---- -- -- --在上面的例子中，我们使用了剩余参数 ...numbers 来接收传递给函数的任意数量参数，并计算它们的总和。
分类参数
分类参数是指使用“命名参数”来传递命名参数的对象。可以使用花括号子模式在函数参数中嵌套分类参数。
function userInfo({ name, age, gender }) {
return { name, age, gender };
}
console.log(userInfo({ name: 'Jack', age: 25, gender: 'Male' }));
// 输出 { name: 'Jack', age: 25, gender: 'Male' }在上面的例子中，我们用解构对象的方式直接获取传递对象中的属性。这种写法可以使代码更加易读，也更加容易维护。
处理变量的默认值
使用分类参数时，我们可以为传递的属性设置默认值。
function userInfo({ name = 'Anonymous', age = 0, gender = 'Unknown' }) {
return { name, age, gender };
}
console.log(userInfo({ age: 25 }));
// 输出 { name: 'Anonymous', age: 25, gender: 'Unknown' }在上面的例子中，我们为 name 和 gender 设置默认值。如果在调用函数时没有传递这些属性，它们就会变成默认值。
简洁函数
使用 ES12 中的函数参数语法可以使我们的代码更加简洁。
const add = (a, b = 1) => a + b; console.log(add(2)); // 输出3 console.log(add(2, 3)); // 输出5
在上面的例子中，我们使用箭头函数和函数默认值来重新实现 add 函数。这样代码看起来更加简洁，但是功能仍然相同。
总结
ES12 提供了更加灵活和强大的函数参数语法，可以使我们的代码更加简洁和可读，而且更易于维护。在自己的项目中，一定要好好使用这些新特性，它们将会提高你的开发效率。
以上就是本文介绍的 ES12 中函数默认值以及函数参数的用法，希望对各位前端开发者有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/649cc9d448841e989497d703