javascript - 关于一段es6函数参数解构的代码
迷茫
迷茫 2017-04-11 12:41:49
[JavaScript讨论组]
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

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

迷茫
迷茫

业精于勤,荒于嬉;行成于思,毁于随。

全部回复(4)
PHP中文网
  1. 检验传入的函数参数是否是undefined或者没有传参;

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

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

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

PHPz

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

可以看下这个文档

怪我咯

拆开理解一下--

    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,结果不用说了

PHP中文网

已经有正确答案了,不过我随便加一条。这个如果觉得理论理解起来有点麻烦,可以参照着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");
}
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号