在读源码框架时遇到方法中有这样的形参:{ 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. Nginx 1.9.7.2 + PHP 5.6.18(FastCGI)在CentOS Linux下的编译安装

    本文参考张宴的Nginx 0.8.x + PHP 5.2.13(FastCGI)搭建胜过Apache十倍的Web服务器(第6版)[原创]完成.所有操作命令都在CentOS 6.x 64位操作系统下实践 ...

  2. 【Python】CV2的一些基本操作

    ·导入: import cv2 ·读取图片: img = cv2.imread('路径') 使用函数cv2.imread(filepath,flags)读入一副图片 filepath:要读入图片的完整 ...

  3. GSS API

    Detail:http://docs.oracle.com/cd/E24847_01/html/E22200/overview-61.html GSS-API 介绍 使用 GSS-API,程序员在编写 ...

  4. 祭出“成本”列(Project)

    <Project2016 企业项目管理实践>张会斌 董方好 编著 今天开始成本. 张同学说,成本就是balabalabala-- 好吧,本妖向来不会背名词解释,不过有些公式还是需要背一下下 ...

  5. AtCoder Beginner Contest 148 题解

    目录 AtCoder Beginner Contest 148 题解 前言 A - Round One 题意 做法 程序 B - Strings with the Same Length 题意 做法 ...

  6. CF977C Less or Equal 题解

    Content 给定一个 \(n\) 个数的数列 \(a_1,a_2,a_3,...,a_n\) 和一个数 \(k\),试找出这样的一个数 \(x\),使得数列中有 \(k\) 个数小于等于 \(x\ ...

  7. linux安装软件系列之npm安装

    什么是rpm 百度说它是 Red-hat Package Manager (红帽包管理器) 其实它是:RPM Package Manager (RPM包管理器,来源于:https://rpm.org) ...

  8. JAVA使用itext根据模板生成PDF文档

    1.制作PDF模板 网址打开:https://www.pdfescape.com/open/ 我们这里先在线上把基础的内容用word文档做好,然后转成PDF模板,直接上传到网站上,这样方便点 假设我们 ...

  9. 【LeetCode】253. Meeting Rooms II 解题报告(C++)

    作者: 负雪明烛 id: fuxuemingzhu 个人博客:http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 排序+堆 日期 题目地址:https://leetco ...

  10. 【LeetCode】953. Verifying an Alien Dictionary 解题报告(Python)

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