后端开发教程 - Java、Spring Boot 实战 - msg200.com
在 JavaScript 中设置默认参数
使用 ES6 设置默认参数超级简单 👏 以前，如果未定义，需要使用三元运算符来分配默认值。现在，你可以在函数参数中直接设置默认值 🎉
// Old Way
function beverage(drink) {
drink = drink !== undefined ? drink : '🍵';
}
// ✅ ES6 Way
function beverage(drink = '🍵') {}
当默认值生效时
仅当未传递任何值时，默认值才会生效undefined。我们来看一下：
function beverage(drink = '🍵') {
return drink;
}
beverage(); // '🍵'
beverage(undefined); // '🍵'
undefined与其他虚假值相比
默认值是否适用于其他虚假值？好问题！我们来看一下：
function beverage(drink = '🍵') {
return drink;
}
beverage(false); // false
beverage(null); // null
beverage(NaN); // NaN
beverage(0); // 0
beverage(''); // ""
☝️答案是否定的。默认值仅在 时生效undefined。其他所有情况下，您传入的值都将生效 🙂
为所有虚假值设置默认参数
如果你想捕获所有虚假值，你可能需要做这样的事情：
function beverage(drink) {
drink = drink || 'default value';
return drink;
}
beverage(); // 'default value'
beverage(undefined); // 'default value'
beverage(false); // 'default value'
beverage(null); // 'default value'
beverage(NaN); // 'default value'
beverage(0); // 'default value'
beverage(''); // 'default value'
解构的默认参数
您还可以通过解构来设置默认参数。
对象解构
function beverage({ name } = { name: '🍵' }) {
return name;
}
beverage(); // '🍵'
beverage({ name: '🥤' }); // '🥤'
数组解构
function color([black] = ['#000']) {
return black;
}
color(); // #000
color(['#222']); // #222
为什么默认参数对于解构很重要
设置默认参数对于解构来说至关重要。这是因为如果你尝试解构某个undefined，它会抛出错误。没错，错误有时是好事，因为它能指示你的应用程序出了问题，所以最好修复它。但有时，你更希望它优雅地失败，以免破坏你的应用程序。
如果您尝试解构一个值，您的应用程序将会崩溃undefined。
const person = undefined;
const { name } = person;
// ❌ TypeError
但这没关系。你的应用程序不会崩溃。
const person = {};
const { name } = person;
// ✅ undefined (no crash)
使用默认参数修复TypeError函数
现在让我们将这些知识应用到我们正在解构论点的函数世界中。
function beverage({ name }) {
return name;
}
beverage();
// ❌ TypeError
这就是为什么你会看到很多函数设置默认参数来避免这种崩溃。
function beverage({ name } = {}) {
return name;
}
beverage();
// ✅ undefined (no crash)
默认参数可以与箭头函数一起使用吗
对了！默认参数也可以应用于箭头函数。
const beverage = (drink = '🍵') => drink;
在 JavaScript 中，箭头函数有隐式和显式返回。因此，上面的代码相当于：
const beverage = (drink = '🍵') => {
return drink;
};
要了解有关箭头函数的更多信息，您可以阅读我的箭头函数备忘单
在默认参数中使用参数
这里有一件很酷的事情你可以做！你可以在后面的默认参数中访问前面的参数。
function metric(kilogram, gram = kilogram * 1000) {
return gram;
}
metric(0.5); // 500
metric(0.5, 200); // 200
⚠️ 注意：参数的处理顺序是从左到右。因此，你无法在前面的参数中访问后面的参数。所以不要这样做🙅♀️
function metric(gram = kilogram * 1000, kilogram) {
return gram;
}
metric(undefined, 200);
// ❌ ReferenceError:
最佳实践
如果您遵循Airbnb 的 JavaScript 样式指南，您应该：
始终将默认参数放在最后。
// ❌ bad
function handleThings(opts = 'default', name) {}
// ✅ good
function handleThings(name, opts = 'default') {}
社区问题
我将其列为旧方法：
function beverage(drink) {
drink = drink !== undefined ? drink : '🍵';
}
但你们中的许多人已经表示更流行的旧方法是这样的：
function beverage(drink) {
drink = drink || '🍵';
}
我选择前一种方法作为旧方法，因为它与设置默认参数的新方法更一致。记得我提到过，默认参数只有在 时才会生效undefined。后一种方法会捕获所有虚假值。代码的字幕，我说得对吗？😂
资源
感谢阅读❤
打个招呼！Instagram | Twitter |博客| SamanthaMing.com