在读源码框架时遇到方法中有这样的形参:{ message = 'ok' } = {}

有点懵为什么已经赋值了还又赋了一个空对象

随后我去看了阮一峰老师的 ECMAScript 6 入门才明白。这是参数默认值与解构赋值的默认值结合起来使用

如下列例子:

function foo({x, y = 5}:any){
console.log(x,y)
}
foo({}) //输出 undefined 5
foo({x:1}) // 输出 1 5
foo({x:1,y:2}) // 输出 1 2
foo() //报错 TypeError: Cannot destructure property 'x' of 'undefined' as it is undefined.

只有当函数foo传入的参数是一个对象时,会解构出x,y。否则会报错!当我们需要使用默认值时,必须传入一个空对象,否则就如同上面一样会报错。

那么如果想要实现不提供参数的情况下实现默认值,我们把foo函数修改成如下:

function foo({x,y = 5}:any ={}){
console.log(x,y)
}
foo() // 输出为 undefined 5

ES6解构与默认值的结合使用的更多相关文章

  1. es6 -- 与解构赋值默认值结合使用

    参数默认值可以与解构赋值的默认值,结合起来使用. function foo({x, y = 5}) { console.log(x, y) } foo({}) // undefined 5 foo({ ...

  2. ES6学习 --函数参数默认值与解构赋值默认值

    1. ES6的解构ES6中引入了解构赋值的操作,其作用是:将值从数组Array或属性从对象Object提取到不同的变量中 即分为两种情况:从数组Array中解构,以及从对象Object中解构 ①.从数 ...

  3. ES6 解构

    { "code": 200, "msg": "success", "data": { "total" ...

  4. ES6 函数参数的默认值

    基本用法 在ES6之前,不能直接为函数的参数指定默认值,只能采取变通的方法. function log(x,y){ y = y||'world'; console.log(x,y); } log('k ...

  5. ES6笔记之参数默认值(译)

    原文链接:http://dmitrysoshnikov.com/ 原文作者:Dmitry Soshnikov 译者做了少量补充.这样的的文字是译者加的,可以选择忽略. 作者微博:@Bosn 在这个简短 ...

  6. es6解构赋值的高级技巧

    1. 解构嵌套的对象,注意,这时p是模式,不是变量,因此不会被赋值.如果p也要作为变量赋值,可以写成下面这样. let obj = { p: [ 'Hello', { y: 'World' } ] } ...

  7. ES6解构赋值

    前面的话 我们经常定义许多对象和数组,然后有组织地从中提取相关的信息片段.在ES6中添加了可以简化这种任务的新特性:解构.解构是一种打破数据结构,将其拆分为更小部分的过程.本文将详细介绍ES6解构赋值 ...

  8. ES6解构赋值常见用法

    解构赋值出现的契机: let obj = { a: 1, b: 2 } // 取值 let a = obj.a let b = obj.b 问题核心: 每次取值既要确定对象属性名,还得重新定义一个变量 ...

  9. [ES6系列-03]ES6中关于参数相关特性详解(参数默认值与参数解构赋值与剩余参数)

    [原创] 码路工人 大家好,这里是码路工人有力量,我是码路工人,你们是力量. 今天总结一下 ES6 中跟参数相关的内容. 欢迎补充斧正.留言交流. 让我们互相学习一起进步. 1. ES6 参数默认值( ...

随机推荐

  1. 【编程思想】【设计模式】【行为模式Behavioral】Publish_Subscribe

    Python版 https://github.com/faif/python-patterns/blob/master/behavioral/publish_subscribe.py #!/usr/b ...

  2. 将图片打印到word中

    1.生成模板文件 工具类: package com.sfec.snmgr.track.utils;import com.alibam.core.wechat.util.QRCodeUtil;impor ...

  3. libev I/O事件

    libev是来实现reactor模式,主要包含三大部分: 1. watcher:watcher是Reactor中的Event Handler. 作用:1)向事件循环提供了统一的调用接口(按类型区分) ...

  4. win10 linux ubuntu子系统 使用adb

    条件 本文已经默认你已经在win10系统下成功配置了ubuntu子系统,所以唯一的条件就是windows上的adb 版本和ubuntu子系统的adb版本一致. 方法 怎么来保证adb 版本一致呢?在本 ...

  5. [源码解析] PyTorch 分布式之弹性训练(1) --- 总体思路

    [源码解析] PyTorch 分布式之弹性训练(1) --- 总体思路 目录 [源码解析] PyTorch 分布式之弹性训练(1) --- 总体思路 0x00 摘要 0x01 痛点 0x02 难点 0 ...

  6. java 编程基础 Class对象 反射:动态代理 和AOP:java.lang.reflect.Proxy:(Proxy.newProxyInstance(newProxyInstance​(ClassLoader loader, Class<?>[] interfaces, InvocationHandler h))

    为什么我们使用动态代理 静态代理会让类变多了,多了代理类,工作量变大了,且不易扩展.比如我们上节课的例子,要实现不同的扩展方法就要编写不同的代理类,非常麻烦.   Proxy类的使用规则 Proxy提 ...

  7. 第二周Python笔记之 变量的三元运算

    如果变量a小于b,则d的值取a变量的值,否则取c变量的值

  8. RIP2与OSPFv2 动态路由协议区别

    OSPF五种报文解析 Hello:招呼信息 Route-ID:换回口地址/活动的物理接口最大值 Hello作用: 1. 发现邻居 2. 对一些数据的协商 3. 保持邻居的Keeplive状态.选举DR ...

  9. Data truncation: Truncated incorrect DOUBLE value错误的解决方案

    Data truncation: Truncated incorrect DOUBLE value错误的解决方案: 当在修改某条单位记录时,发生了Data truncation: Truncated ...

  10. JAVA遍历某个文件夹下所有文件listFiles() 实现按照名称升序排序

    File[] files = file.listFiles(); List fileList = Arrays.asList(files); Collections.sort(fileList, ne ...