第四十期：JS函数默认参数引发的思考
第四十期：JS函数默认参数引发的思考
Vuex源码浅析，文档已经完成了。大致分为以下几个部分：
- 使用场景。
- 基础知识。
- 基本概念。
- 模块儿和模块收集器。
- mapper 映射。
- 提交和分发。
- 安装及初始化。
- 附录：工具方法及个人思考。
Js函数默认参数引发的思考
为什么会对js的默认参数单独拿出来说这个事儿呢？起因是因为今天同事在review代码的时候发现了我写的一个函数，用了一个默认参数，但是他感觉不太对。
然后问题就出现了，明明这个默认参数这样写不对，但是代码还是正常执行了，这就很奇怪。
函数是这样写的：
export const getDataList = (url='test/friend',data)=>{
return axios({
url,
data,
method:url==='test/friend'?'get':'post'
})
}
然后在调用的时候这样写了：
import {getDataList} from '../service'
// 获取列表
async fetchFriendList(){
let url
if(this.$router.currentRoute.path === 'a'){
url ='test/costomer'
}else if(this.$router.currentRoute.path === 'b'){
url ='test/other'
}
let params = {
pa:'1',
pb:'2'
}
const {data} = await getDataList(url,params)
}
同事认为默认参数一般不能赋值给第一个参数，假如漏写了参数，参数默认会变成undefined，但是我坚持认为我这样写没问题。
那么这里就要掰扯掰扯函数默认值的问题了。
首先，函数默认参数允许在没有值或undefined被传入时使用默认形参。
比如：
function multiply(a, b = 1) {
return a * b;
}
console.log(multiply(5, 2));
// expected output: 10
console.log(multiply(5));
// expected output: 5
其次：JavaScript 中函数的参数默认是undefined。然而，在某些情况下可能需要设置一个不同的默认值。
以前，一般设置默认参数的方法是在函数体测试参数是否为undefined，如果是的话就设置为默认的值。
function multiply(a, b) {
return a * b;
}
multiply(5, 2); // 10
multiply(5); // NaN !
这段代码假如b的值没有提供，就会返回NaN。为了解决这个问题，我们一般采用这种方法：
function multiply(a, b) {
b = (typeof b !== 'undefined') ? b : 1;
return a * b;
}
multiply(5, 2); // 10
multiply(5); // 5
使用默认参数后,我们就没必要在去函数内部做判断了：
function multiply(a, b = 1) {
return a * b;
}
multiply(5, 2); // 10
multiply(5); // 5
默认函数的使用规则
我们需要理解的以下几点：
- 当函数被调用时，默认参数会被解析。
- 默认参数可用于后面的默认参数。
也就是说，后面的默认参数可以通过前面的默认参数计算而来，比如：
function greet(name, greeting, message = greeting + ' ' + name) {
return [name, greeting, message];
}
greet('David', 'Hi'); // ["David", "Hi", "Hi David"]
greet('David', 'Hi', 'Happy Birthday!'); // ["David", "Hi", "Happy Birthday!"]
- 位于默认参数之后非默认参数
我的那段段代码之所以有争议，也是因为这个问题。
在之前的书写习惯中，通常默认参数不会赋给函数的第一个参数，因为假如函数执行的时候你忘记了这个参数，有肯能会报语法错误。
这其实是浏览器中的一个Bug。
MDN给的解释是：
在Gecko 26 (Firefox 26 / Thunderbird 26 / SeaMonkey 2.23 / Firefox OS 1.2)之前，以下代码会造成SyntaxError错误。这已经在bug 1022967中修复，并在以后的版本中按预期方式工作。参数仍然设置为从左到右，覆盖默认参数，即使后面的参数没有默认值。
function f(x = 1, y) {
return [x, y];
}
f(); // [1, undefined]
f(2); // [2, undefined]
所以，最后得出的结论是：我的那种写法其实也没什么错。
只是最好还是按照正常的规范来写，否则是真的容易产生不好的影响。
本文分享自 JavaScript高级程序设计 微信公众号，前往查看
如有侵权，请联系 cloudcommunity@tencent.com 删除。
本文参与 腾讯云自媒体同步曝光计划 ，欢迎热爱写作的你一起参与！
腾讯云开发者
