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)
全栈程序员-站长的头像全栈程序员-站长

相关推荐

  • Windows Phone中文开发资源集中营

    Windows Phone中文开发资源集中营1.微软官方一站式中文开发社区:http://msdn.microsoft.com/zh-cn/windowsphone包括最新活动信息共享在线免费开发视频开发工具下载2.微软(英文)开发资料MSDN:http://msdn.microsoft.com/en-us/library/ff402535(v=VS.92).aspx   微软…

    2022年7月13日
  • DICOM影像中的窗宽窗位

    DICOM影像中的窗宽窗位1.为什么有窗宽窗位?医学图像领域的关键技术窗技术,是CT检查中用以观察不同密度的正常组织或病变的一种显示技术,包括窗宽(windowwidth)和窗位(windowlevel)。由于各种组织结构或病变具有不同的CT值,因此想要显示某一组织结构细节时,应该选择适合观察该组织或病变的窗宽和窗位,以获得最佳显示。2.窗宽窗宽是CT图像上显示的CT值范围,在此CT值范围内的组织和病变均

    2022年6月29日
  • redis的过期时间设置和过期删除机制「建议收藏」

    redis的过期时间设置和过期删除机制「建议收藏」一:设置过期时间redis有四种命令可以用于设置键的生存时间和过期时间:EXPIRE<KEY><TTL>:将键的生存时间设为ttl秒PEXPIRE<KEY><TTL>:将键的生存时间设为ttl毫秒EXPIREAT<KEY><timestamp>:将键的过期时间设…

    2022年9月26日
  • android 6.0锁屏界面时间位置修改[通俗易懂]

    android 6.0锁屏界面时间位置修改[通俗易懂]在SystemUI里的Android.mk中LOCAL_STATIC_JAVA_LIBRARIES:=KeyguardLOCAL_STATIC_JAVA_LIBRARIES+=com.mediatek.systemui.extLOCAL_JAVA_LIBRARIES:=telephony-commonLOCAL_JAVA_LIBRARIES+=mediatek-

    2022年9月29日
  • 算法笔记 4.3 递归 ——谢尔宾斯基地毯「建议收藏」

    算法笔记 4.3 递归 ——谢尔宾斯基地毯「建议收藏」算法笔记递归谢尔宾斯基地毯

    2022年7月13日
  • 数据可视化与解读_大数据可视化概念

    数据可视化与解读_大数据可视化概念前言数据可视化,是指将相对晦涩的的数据通过可视的、交互的方式进行展示,从而形象、直观地表达数据蕴含的信息和规律。早期的数据可视化作为咨询机构、金融企业的专业工具,其应用领域较为单一,应用形态较为保守。步入大数据时代,各行各业对数据的重视程度与日俱增,随之而来的是对数据进行一站式整合、挖掘、分析、可视化的需求日益迫切,数据可视化呈现出愈加旺盛的生命力,表现之一就是视觉元素越来越多样,从朴素的柱状图/

    2022年10月2日

发表回复

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

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