芯片|web前端培训 - 如何设置函数参数的默认值集成电路|it芯片|重器

文章图片

在本节教程中，我们将学习如何在 ES6 中处理 JavaScript 默认参数。
function say(message='Hi') {
console.log(message);

say(); // 'Hi'
say('Hello') // 'Hello'
say() 函数中消息参数的默认值为'Hi' 。
在 JavaScript 中，默认函数参数允许我们在没有值或undefined传递给函数的情况下，使用默认值初始化命名参数。
Arguments vs. Parameters
有时，我们可以互换使用术语Arguments和Parameters 。但是，根据定义， Parameters是我们在函数声明中指定的内容，而Arguments是我们传递给函数的内容。
考虑以下 add() 函数：
function add(x y) {
return x + y;

add(100200);
在本例中， x 和 y 是 add() 函数的参数，传递给 add() 函数的值 100 和 200 是参数。
为函数设置 JavaScript 默认参数
在 JavaScript 中，参数的默认值为 undefined 。这意味着如果我们不将参数传递给函数，它的参数将具有 undefined 的默认值。
请参见以下示例：
function say(message) {
console.log(message);

say(); // undefined
say() 函数接受 message 参数。因为我们没有将任何参数传递给 say() 函数，所以 message 参数的值是undefined 。
假设我们想给 message 参数一个默认值 10 。
实现此目的的典型方法是测试参数值并在undefined时，使用三元运算符分配默认值：
function say(message) {
message = typeof message !== 'undefined' ? message : 'Hi';
console.log(message);

say(); // 'Hi'
在这个例子中，我们没有将任何值传递给 say() 函数。因此，消息参数的默认值是undefined 。在函数内部，我们为message变量重新分配了 Hi 字符串。
ES6 为我们提供了一种更简单的方法来设置函数参数的默认值，如下所示：
function fn(param1=default1 param2=default2..) {

在上面的语法中，我们使用赋值运算符 (=) 和参数名称后的默认值来设置该参数的默认值。例如：
function say(message='Hi') {
console.log(message);

say(); // 'Hi'
say(undefined); // 'Hi'
say('Hello'); // 'Hello'
程序怎么运作
在第一个函数调用中，我们没有将任何参数传递给 say() 函数，因此， message参数采用默认值“Hi” 。
在第二个函数调用中，我们将 undefined 传递给 say() 函数，因此 message 参数也采用了默认值“Hi” 。
在第三个函数调用中，我们将 'Hello' 字符串传递给 say() 函数，因此 message 参数将字符串 'Hello' 作为默认值。
更多 JavaScript 默认参数示例
让我们看一些更多的例子来了解一些用于设置函数参数默认值的可用选项。
1) 传递未定义的参数
以下 createDiv() 函数在文档中创建一个具有特定高度、宽度和边框样式的新 <div> 元素：
function createDiv(height = '100px' width = '100px' border = 'solid 1px red') {
let div = document.createElement('div');
div.style.height = height;
div.style.width = width;
div.style.border = border;
document.body.appendChild(div);
return div;

以下不向函数传递任何参数，因此 createDiv() 函数使用参数的默认值。
createDiv();
假设我们要使用默认值作为高度和宽度参数以及特定的边框样式。在这种情况下，我们需要将undefined值传递给前两个参数，如下所示：
createDiv(undefinedundefined'solid 5px blue');
2) 评估默认参数
JavaScript 引擎会在我们调用函数时评估默认参数。请参见以下示例：