ES6 函数参数默认值

在ES6以前，想给函数参数默认值我们是怎么做的呢？

const multiply = (x, y) => {
  if (typeof y ==='undefined') {
    y = 3;
  }
  return x * y;
};
console.log(multiply(2)); // 6

这种形式有个很大的缺点，就是当函数形参有很多个时，想一个一个给默认值就比较麻烦了。在ES6出现后，这个问题得以解决👇

const multiply = (x, y = 3) => x * y;
console.log(multiply(2)); // 6

默认值的生效条件： 不传参数，或者明确地传递undefined作为参数；只有这两种情况下默认值才会生效

const multiply = (x, y = 3) => x * y;
console.log(multiply(2, 0)); // 0
console.log(multiply(2, null)); // 0
console.log(multiply(2, undefined)); // 6 此时y使用默认值1
console.log(multiply(2)); // 6 同上

设置默认值的小技巧： 函数参数的默认值最好从参数列表的右边开始设置，举例👇

//还是上面那个例子
const multiply = (x, y = 3) => x * y;
console.log(multiply(2)); // 6
//如果不从右边开始设置呢?
const multiply = (x = 3, y) => x * y;
console.log(multiply(2)); // NaN
//正确写法
const multiply = (x = 3, y) => x * y;
console.log(multiply(undefined, 2)); // 6 太麻烦了不是么......

应用：

当接收很多参数的时候：

const logUser = (username = 'Jae', age = 22, sex = 'male') => console.log(username, age, sex);
logUser(); // Jae 22 male

这种写法有个很大的局限性，即：当参数不止三个的时候，你在函数默认值赋值的时候要写得很多，而且顺序很容易忘记。这种情况下应接受一个对象作为参数👇

const logUser = ({username = 'Jack', age = 18, sex = 'male'}) => console.log(username, age, sex);
let obj = {
	username: 'Jae',
	age: 22,
	sex: 'male'
};
logUser(obj); // Jae 22 male
logUser(); // 报错，因为上面实际上是给解构赋值添加了默认值，并没有给函数参数添加默认值
		   // 相当于{username = 'Jack', age = 18, sex = 'male'} = undefined 进行解构赋值，当然报错了

//正确写法
const logUser = ({username = 'Jack', age = 18, sex = 'male'} = {}) => console.log(username, age, sex);
logUser(); // Jack 18 male

这里涉及了解构赋值的知识点，有点难理解，自己多敲几遍就能理解啦 ~