在读源码框架时遇到方法中有这样的形参:{ 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. list.jsp页面

    <%@ page contentType="text/html;charset=UTF-8" language="java" %><%@tag ...

  2. MyBatis中关于大于,小于写法

    第一种写法(1): 原符号 < <= > >= & ' " 替换符号 < <= > >= & &apos; " ...

  3. vue cli3.0 首次加载优化

    项目经理要求做首页加载优化,打包后从十几兆优化到两兆多,记下来怕下次忘记 运行report脚本 可看到都加载了那些内容,在从dist文件中index.html 查看首次加载都加载了那些东西,如下图:然 ...

  4. VUE3 之 template 语法

    1. 概述 老话说的好:干一行,爱一行,踏实工作才是真正快乐的源泉. 言归正传,今天继续聊 VUE3 的话题,今天聊聊 template 语法. 闲话不多说,直接上代码. 2. template 语法 ...

  5. Windows 任务计划部署 .Net 控制台程序

    Windows 搜索:任务计划程序 创建任务 添加任务名称 设置触发器:这里设置每10分钟执行一次 保存之后显示 此任务会从每天的 0:10:00 执行第一次后一直循环下去. 在操作选项卡下,选择启动 ...

  6. CF638A Home Numbers 题解

    Content Vasya 的家在一条大街上,大街上一共有 \(n\) 座房子,其中,奇数编号的房子在大街的一侧,从左往右依次编号为 \(1,3,5,7,...,n-1\),偶数编号的房子在大街的另一 ...

  7. 【LeetCode】855. Exam Room 解题报告(Python)

    作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 题目地址: https://leetcode.com/problems/exam-roo ...

  8. 【LeetCode】917. Reverse Only Letters 解题报告(Python)

    作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 栈 单指针 双指针 日期 题目地址: https:/ ...

  9. 【LeetCode】763. Partition Labels 解题报告(Python & C++)

    作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录 题目描述 解题方法 日期 题目地址:https://leetcode.com/pr ...

  10. 【LeetCode】773. Sliding Puzzle 解题报告(Python)

    作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 题目地址: https://leetcode.com/problems/sliding- ...