在读源码框架时遇到方法中有这样的形参:{ 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. SpringCloud微服务服务间调用之OpenFeign介绍

    开发微服务,免不了需要服务间调用.Spring Cloud框架提供了RestTemplate和FeignClient两个方式完成服务间调用,本文简要介绍如何使用OpenFeign完成服务间调用. Op ...

  2. Appium获取toast消息(二)

    刚接触appium进行移动端设备的UI自动化,在遇到toast消息的时候很是苦恼了一阵,最后通过强大的搜索引擎找到了个相对解决方法,废话不多说,直接贴代码↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ ...

  3. Git初始化及仓库创建和操作

    一.基本信息配置 1.全局配置用户名 git config --global user.name "YeHuan-byte" 2.全局配置邮箱 git config --globa ...

  4. CF934A A Compatible Pair 题解

    Content 有两个数列 \(A\) 和 \(B\),\(A\) 数列里面有 \(n\) 个元素,\(B\) 数列里面有 \(m\) 个元素,现在请从 \(A\) 数列中删除一个数,使得 \(A\) ...

  5. 洛谷八月月赛 II T1 题解

    Content 在大小为 \(n\) 的数字三角形中,第 \(i\) 行包含有 \(i\) 个数字,数字从上到下,从左到右依次排列为 \(1,2,3,\dots\). 设第 \(i\) 行第 \(j\ ...

  6. 后端调用WebApi

    using System;using System.Collections.Generic;using System.Linq;using System.Net.Http;using System.W ...

  7. centos使用yum安装报错: 另一个应用程序是:PackageKit

    已加载插件:fastestmirror, langpacks/var/run/yum.pid 已被锁定,PID 为 13189 的另一个程序正在运行.Another app is currently ...

  8. 使用.NET 6开发TodoList应用(7)——使用AutoMapper实现GET请求

    系列导航 使用.NET 6开发TodoList应用文章索引 需求 需求很简单:实现GET请求获取业务数据.在这个阶段我们经常使用的类库是AutoMapper. 目标 合理组织并使用AutoMapper ...

  9. Visual Studio Code常用快捷键

    说明 以下快捷键适用于windows环境下, Mac请将ctrl替换为command按键: 部分快捷键或不一样. 查看VSCode快捷键定义: settings -> keymaps. 目前使用 ...

  10. 【LeetCode】422. Valid Word Square 解题报告(C++)

    作者: 负雪明烛 id: fuxuemingzhu 个人博客:http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 拼接出每一列的字符串 日期 题目地址:https:// ...