关于一段es6函数参数解构的代码

Question

function f({ x = 10 } = {}, { y } = { y: 10 }) {
    console.log( x + " " + y +"\n");
}

f(); // 10 10  
f( undefined, undefined ); // 10 10  
f( {}, undefined ); // 10 10  
f( {}, {} ); // 10 undefined  
f( undefined, {} ); // 10 undefined  
f( { x: 2 }, { y: 3 } ); // 2 3

希望有人能解释一下这段代码对的运行原理，关于参数解构这一块总是很迷糊

Answer 1

1. 检验传入的函数参数是否是undefined或者没有传参；

2. 对于没有传参的情况或者传入的是undefined，则查看有没有参数默认值，如果有则对参数默认值进行解构赋值

3. 如果传入的参数，则忽略参数默认值，对传入的参数进行解构赋值

4. 对于上述2,3步的解构赋值，如果解构成功则使用解构的值，如果解构失败则查看有没有解构默认值，如果有则使用解构默认值，如果没有则为undefined

Answer 2

已经有正确答案了，不过我随便加一条。这个如果觉得理论理解起来有点麻烦，可以参照着babel的翻译结果来看：

"use strict";

function f() {
    var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
        _ref$x = _ref.x,
        x = _ref$x === undefined ? 10 : _ref$x;

    var _ref2 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : { y: 10 },
        y = _ref2.y;

    console.log(x + " " + y + "\n");
}

Answer 3

http://es6.ruanyifeng.com/#do...

可以看下这个文档

Answer 4

拆开理解一下--

    function f({ x = 10 } = {}) {
    console.log( x + "\n");
}

上面{x=10}={}的意思是：将函数f的形参指定为一个{}对象,如果解构失败，则返回一个【变量X=10】,注意是返回给你一个变量，不是给参数设置默认值
所以：

f();//未传参，输出了变量x=10
f(undefined);//undefined同上
f({});//一个空对象，里面啥都没有，还是输出变量x=10
f({x:2});//这个对象里指定了变量x=2，所以得到2

---

再来第二个参数那边

    function f({ y } = { y: 10 }) {
    console.log( y + "\n");
}

**上面{y}={y:10}的意思是：将函数f的【形参默认值】指定为【y=10】，如果解构失败，返回函数的参数y,y不是一个变量，它是函数的形参。

所以

f();//未传参，得到参数y的默认值y=10
f(undefined);//同上
f({});//传入了一个空对象{},这个对象里没有参数y的值，因为【y不是一个变量】，所以下面为空console.log( y + "n")啥都输出不了，得到undefined
f( { y: 3 } )//这个传入了实参y=3，结果不用说了