es6 — 与解构赋值默认值结合使用[通俗易懂]

es6 — 与解构赋值默认值结合使用

大家好,又见面了,我是全栈君。

参数默认值可以与解构赋值的默认值,结合起来使用。

function foo({x, y = 5}) {
    console.log(x, y)
}

foo({}) // undefined 5
foo({x: 1}) // 1 5
foo({x: 1, y: 2}) // 1 2
foo() // 报错, TypeError: Cannot read property 'x' of undefined

上面代码只使用了对象的解构赋值默认值,没有使用函数参数的默认值。 只有当函数foo的参数是一个对象时,变量x 和 y 才会通过解构赋值生成。如果函数foo调用时没提供参数,变量x 和 y就不会生成,从而报错。通过提供函数参数的默认值,就可以避免这种情况。

function foo({x, y = 5} = {}) {
    console.log(x, y)
}

foo() // undefined 5

 上面代码指定,如果没有提供参数 ,函数foo的参数默认为一个空对象。

eg2:

function fetch(url, {body = '', method = 'GET', header = {} }) {
    console.log(method)
}

fetch('http://example.com', {}) // GET

fetch('http://example.com') // 报错

第二个参数必须是个对象,否则报错,改成下面的写法即可避免这种情况

function fetch(url, {body = '', method = 'GET', headers={} } = {}) {
    console.log(method)
}

fetch('http://example.com') // 'GET'

函数fetch没有第二个参数时,函数参数的默认值就会生效,然后才是解构赋值的默认值生效,变量method才会取到默认值GET。

思考:

// 写法一
function m1({x = 0, y = 0} = {}) {
    return [x, y]
}

// 写法二
function m2({x, y} = {x : 0, y : 0}) {
    return [x, y]
}

上面两种写法的区别: 写法一函数参数的默认值是空对象, 但是设置了对象解构赋值的默认值;写法二函数参数默认是一个有具体属性的对象,但是没有设置对象解构赋值的默认值。

// 函数没有参数的情况
m1() // [0, 0]
m2() // [0, 0]

// x 和 y都有值的情况
m1({x: 3, y: 8}) // [3, 8]
m2({x: 3, y: 8}) // [3, 8]

// 以上的情况都没有区别,下面的情况两者就有区别了
// x 有值,y 无值的情况
m1({x: 3}) // [3, 0]
m2({x: 3}) // [3, undefined]

m1({z: 3}) // [0, 0]
m2({z: 3}) // [undefined, undefined]

 推荐:http://es6.ruanyifeng.com/#docs/function

转载于:https://www.cnblogs.com/garfieldzhong/p/8056105.html

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/107819.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • 递归和迭代有什么区别?

    递归和迭代有什么区别?“递归”和“迭代”的区别如下:1、递归的基本概念:程序调用自身的编程技巧称为递归,是函数自己调用自己.一个函数在其定义中直接或间接调用自身的一种方法,它通常把一个大型的复杂的问题转化为一个与原问题相似的规模较小的问题来解决,可以极大的减少代码量.递归的能力在于用有限的语句来定义对象的无限集合。2、迭代:利用变量的原值推算出变量的一个新值.如果递归是自己调用自己的话,迭代就是A不停的调用…

    2022年6月6日
    36
  • jedis和jediscluster_rediscluster集群

    jedis和jediscluster_rediscluster集群1、Jedis客户端https://redis.io/clients2、Jedis源码包与使用介绍https://github.com/xetorthio/jedis3、项目中使用通过maven引入Jedis的依赖包<dependency><groupId>redis.clients</groupId><art…

    2022年10月14日
    2
  • 教你实现一个天气实时查询微信小程序

    教你实现一个天气实时查询微信小程序文章目录博主绪言组件选择部署阶段组件选择组件变量安排组件布局js后端逻辑处理环节API处理环节函数处理环节结束语博主绪言天气之子app主要功能是选择地区(省,市,区或者县),然后获取当前信息,把所选择的地区信息显示在界面上,然后调用和风天气免费的API,获取当前选择地区的天气信息,并且获取天气图标,把所有获取的这些信息,美观地显示在界面上。以下是示例界面:组件选择部署阶段组件选择根据上…

    2022年5月14日
    58
  • Canny算法解析,opencv源码实现及实例[通俗易懂]

    Canny算法解析,opencv源码实现及实例[通俗易懂]参考:http://baike.baidu.com/link?url=tkyXCTmiihKboar3IQ7yo-ECZK95tq2Bn02H1aKwGdt00xrbfD6Lezzjk5ArZF0lCnx8rOQiq4d7o24bUDN75_1392ZOUPYgdt3PZsmLrFShttp://blog.csdn.net/xiaowei_cqu/article/details/783

    2022年5月30日
    40
  • matlab中interp1什么意思,matlab中interp1函数是什么意思啊?

    matlab中interp1什么意思,matlab中interp1函数是什么意思啊?csape可以选择样条的边界条件,interp1无法使用边界条件;csape只是Cubicspline插值,interp1可以选择几种不同的插值方法。csape函数的用法如下:pp=csape(x,y,conds,valconds)其中(x,y)为数据向量,conds表示变界类型,valconds表示边界值。边界类型(conds)可为:’complete’,给定边界一阶导数.’not-a-…

    2022年6月3日
    66
  • 傻妞机器人新版安装教程「建议收藏」

    傻妞机器人新版安装教程「建议收藏」本文由以下部分组成傻妞基础功能简介。傻妞机器人安装(只对接QQ)傻妞常规设置傻妞对接微信/公众号/TG机器人傻妞重启以及更换机器人QQ傻妞青龙扩展使用。其他一、傻妞功能简介1.傻妞青龙扩展可以发送命令控制青龙任务,添加青龙变量,提交COOKIE,查询资产,查看任务日志等等!可对接其他项目。2.配置扩展在sillyGirl/conf/config.yaml文件配置各种API,让傻妞功能丰富多彩。目前支持返回图片和文本(包括链接)。样例文件见文末。3.自定义文件功能扩展在sill

    2022年6月23日
    1.0K

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号