ES6解构赋值中函数参数的默认值?

Question

问题:

1.图片中的红字啥意思?
2.哪里指定参数的默认值了?
3.为什么指定参数的默认值，就避免了在函数体内部再写var foo = config.foo || 'default foo'了?
大神解释一下!!!

Answer 1

在 es5 时代，如果想给一个函数默认值的话必须要这样写

var es5Fun = function (config) {
    var foo = config.foo || 'default foo'
    console.log(foo)
}

es5Fun() // 'default foo'
es5Fun({foo: 'not default foo'}) // 'not default foo'

在 es6 有了结构赋值之后，传入的参数可以自动赋予默认值

const es6Fun = ({foo = 'default foo'} = {}) => {
    console.log(foo)
}

es6Fun() // 'default foo'
es6Fun({foo: 'not default foo'}) // 'not default foo'

Answer 2

1.红字的意思是es6中参数默认值的原理

function test(foo = 0){
    console.log(foo);
}

test(); //0

==>  等价
function test(foo){
    foo = foo === undefined ? 0 : foo;
    console.log(foo);
}

这里只是形式复杂了一点

function test(foo = 0, point = {x = 1, y = 2}){
    console.log(foo);
    console.log(x);
    console.log(y);
}

test(1,{}); //0 1 2
test(1,{x:2}); // 0 22

Answer 3

没有ES6之前,我们指定一个参数的默认值,是这样写

function(config){
   var foo = config.foo || 'default foo'
   return foo 
}

其实意思就是,想给foo指定一个值得话,我们就判断参数中的config对象中有没有foo属性,如果有直接赋值给var foo这个变量,否则走后半部分,foo = 'default foo'让foo等于default foo这个字符串
这样写的好处就是,就算调用这个方法不传参数,也能保证foo变量有值,也就是所谓的默认值

但是有了ES6就不用这么麻烦了,直接在参数中就可以赋默认值了,以下是阮一峰老师的标准ES6中是实例

函数参数的解构也可以使用默认值

function move({x = 0, y = 0} = {}) {
  return [x, y];
}

move({x: 3, y: 8}); // [3, 8]
move({x: 3}); // [3, 0]
move({}); // [0, 0]
move(); // [0, 0]