【金秋打卡】第11天函数参数的默认值

一、课程名称：前端工程师2022版

二、课程章节：对象字面量的增强与函数参数的默认值

三、课程讲师：Alex

四、课程内容：

函数参数的默认值

1、函数参数的默认值是什么

（1）认识函数参数的默认值

调用函数的时候传参了，就用传递的参数；如果没有传参，就用默认值，如multiply(2,1)传入参数2和1，如果提前设置了默认值1，则可以少写一个参数multiply(2)

（2）函数参数默认值的基本用法

2、函数参数默认值的注意事项

（1）默认值的生效条件

1）当不传参数，或者明确的传递undefined作为参数，只有这两种情况下，默认值才会生效

2）如计算乘机的函数multiply设置了y的默认值是1，传参数（2，0)结果是0，传（2，null）结果还是0，因为null会转成0计算，传（2，undefined)结果是2，此时默认值就生效了，传（2）的结果也是2，默认值生效

（2）默认值表达式：如果默认值是表达式，需要记住默认值表达式是惰性求值的

（3）设置默认值的小技巧：当给函数参数设置默认值时，最好从参数列表的右边开始设置，如计算乘机的函数multiply不是先设置y的默认值，而是设置了x的默认值是1，此时传参不想传x的参数，括号中是不可以（，2）这样写的，必须是把undefined写完整（undefined,2）

3、函数参数默认值的应用

（1）在实际开发中写一个函数需要接收很多参数的时候

从前的写法：

const logUser = (username, age, sex) => console.log(username, age, sex);

logUser("Alex", 18, "male");

2）直接设置默认值，但是由于要接收很多参数，需要记住参数的位置顺序，比较麻烦

const logUser = (username='ZhangSan', age=0, sex='male') => console.log(username, age, sex);

logUser("Alex", 18, "male");

（2）现在的写法：接收一个对象作为参数，传参时也要传入对象，且写明属性名

const logUser = options=> console.log(options.username, options.age, options.sex);

logUser({username:"Alex", age:18,sex: "male"});

（3）代码优化：解构赋值

注意：这里添加的不是函数的参数，这里添加的是解构赋值的默认值

const logUser = ({ username = "zhangsan", age = 0, sex = "male" }) =>

console.log(username, age, sex);

// 就相当于{ username='zhangsan', age=0, sex='male' }={username:'alex'}

console.log({});

console.log();

// 没传参：就相当于{ username='zhangsan', age=0, sex='male' }=undefined；

// 如何实现没传参也可以输出默认值？只需要将默认值等于一个空对象{}

const logUser = ({ username = "zhangsan", age = 0, sex = "male" }={}) =>console.log(username, age, sex);

五、课程心得

今天学习了函数参数的默认值，默认值可以让用户少传入很多参数，优化使用，需要好好掌握，加油！