解构给默认值_ES6学习 --函数参数默认值与解构赋值默认值

1. ES6的解构

ES6中引入了解构赋值的操作,其作用是:将值从数组Array或属性从对象Object提取到不同的变量中

即分为两种情况:从数组Array中解构,以及从对象Object中解构

①.从数组中解构

const [a, b] = [1, 2]

//a = 1, b = 2

当然这些是基本的数组解构赋值,你还可以用逗号,进行跨值解构,用扩展运算符...进行多余项的解构等等

②.从对象中结构

const {a, b} = {a: 1, a: 2}

//a = 1, b = 2

这也是基本的对象结构赋值,不过在这里提一下,你仍然可以用扩展运算符...进行多余项的解构:

const {a, ...b} = {a: 1, b: 2, c: 3, d: 4}

//a = 1

//b = {b: 2, c: 3, d: 4}

③. 其他类型

当解构其他类型时,也是先将其他类型值转换为Array或者Object

const [a, b, c] = 'hello'

// a = 'h', b = 'e', c = 'l'

const {toString: a} = true

toString === Boolean.prototype.toString // true

2. ES6的函数默认参数

① 定义

函数默认参数允许在没有值或undefined被传入时使用默认形参。

栗子:

function foo (a = 1, b = 2) {

console.log(a, b)

}

foo ()// 1 2

Note: 形参默认是undefiend, 也就是说,在没有默认值时,a = undefiend, b = undefined;不过上面这个例子是没有值被传入的情况

undefiend被传入的情况如下:

function foo (a = 1, b = 2) {

console.log(a, b)

}

foo (undefined, window.valueIsNotDefined)// 1 2

② 默认值不是只有函数参数才能用

还是直接举个例子:

var {a = 1, b = 2} = {}

// a = 1, b = 2

var {a = 1, b = 2} = {a: 'hello'}

// a = 'hello', b = 2

其实解构赋值也是可以赋值默认值的;由此可见:

函数参数默认值的本质,还是解构赋值

3. 一个有趣的小栗子

说了那么多废话,终于要说到这个小栗子了。

Step 1

这是一种超常见的情况,有的时候,当我们定义函数参数的时候,可以去解构当前的参数

比如:

function foo ({ a, b }) {

console.log(a, b)

}

foo({ a: 1, b: 2 })// 1 2

Note: 可以看成做了以下操作:

const { a, b } = { a: 1, b: 2 };

console.log(a, b)

Step 2

更多的时候,我们不会满足于此,我们想要一个默认值

function foo ({a = 1, b = 2}) {

console.log(a, b)

}

foo({})// 1 2

Note: 可以看成做了以下操作:

const { a = 1, b = 2 } = {};

console.log(a, b)

问题 1

然而,我们实际使用时,不会用foo({})这种写法来表示参数缺省,我们大多数人采用foo()这种显而易见的写法,由此问题来了

function foo ({a = 1, b = 2}) {

console.log(a, b)

}

foo()

Uncaught TypeError: Cannot destructure property `a` of 'undefined' or 'null'.

at foo (:1:14)

at :4:1

通过换一种写法,不难发现错误原因:

const {a = 1, b = 2} = undefined // Error

解决方法:

其实,function foo ({a = 1, b = 2}) {}是对第一个参数的解构,那我们完全按照文章前面函数默认参数定义的那样,在参数为undefined或没有传入的时候,预先定义:

function foo ({a, b} = {a: 1, b: 2}) {

console.log(a, b)

}

foo()// 1 2

分析:可以看做以下写法

function foo (temp = {a: 1, b: 2}) {

var {a, b} = temp

console.log(a, b)

}

foo()// 1 2

问题 2

上面这种方法看似解决了问题,但当我们回过头来,重新运行foo({}),却出现了错误:

function foo ({a, b} = {a: 1, b: 2}) {

console.log(a, b)

}

foo({}) // undefined undefined

经历了前面情景的分析后,不难发现:此时的函数参数传入了一个有效值,所以temp不会去采纳默认值,而是去采纳有效的传入值{}; 而var { a, b } = {}的解构,自然而然会让a和b变为undefined

解决方法:

var { a = 1, b = 2 } = {}的形式,可以解决这种情况,原函数写作:

function foo ({ a = 1, b = 2 } = {}) {

console.log(a, b)

}

foo()// 1 2

foo({})//1 2

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/433493.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

jsp思维导图_2019年经济法基础思维导图

参加2019年初级考试的考生们明天可以打印准考证啦时间:2019.4.26-5.5日(传送门:http://kjbm8.mof.gov.cn/ksbm/usercxzkz.jsp)为了帮助大家快速梳理教材考点,下面蓝星职业教育为大家整理了初级会计职称考试各章节思维导图,希望给大…

海量数据持久层解决方案_爱数AnyBackup重磅发布海量非结构化数据超可用解决方案...

海量非结构化数据有三大备份恢复问题一直没有得到有效解决:备份慢、恢复慢、备份数据不可查询。这三大问题已经对行业数字化转型造成了重大阻碍。今天,AnyBackup Family 7线上发布会——重磅发布海量非结构化数据超可用解决方案。AnyBackup以创新超可用技…

【PHP】伪静态 - 1. 使用正则表达式实现

在我们实际开发中,有需要,不希望使用真静态,但是希望利于SEO, 可以考虑使用伪静态。 http://localhost/news.php?typemusic&id100 我们希望这个地址可以用下面的访问url来替换 http://localhost/new-music-id100.html 上面的问题可以使用…

wpf 使子ui元素可视区域不超过父元素_对游戏UI设计的一点思考

UI决定了一个游戏的初体验,甚至决定了玩家的初始留存,甚至可以说决定了一个游戏的品质,虽然看起来是表象的,却是直指游戏核心的。简单讲,玩家认可一款游戏永远都是造型场景好,剧情好,画质棒&…

linux新的API signalfd、timerfd、eventfd使用说明

三种新的fd加入linux内核的的版本: signalfd:2.6.22 timerfd:2.6.25 eventfd:2.6.22 三种fd的意义: signalfd:传统的处理信号的方式是注册信号处理函数;由于信号是异步发生的,要…

grpc入门到精通_Spring Cloud 从入门到精通(一)Nacos 服务中心初探

点击上方蓝色“Java精选”,选择“设为星标”技术文章第一时间送达!什么是Nacos?Nacos是阿里巴巴开源的项目,是一个更易于帮助构建云原生应用的动态服务发现、配置管理和服务管理平台。Nacos英文全称是Dynamic Naming and Configur…

百度新年贪吃蛇效果

闲来无事&#xff0c;在网上闲逛的时候开到有人说百度蛇年的贪吃蛇logo小游戏不错&#xff0c;于是乎就自己仿照写了一个。&#xff08;注&#xff1a;所有素材都来自百度&#xff09; 效果图 用到的图片 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional…

贝叶斯公式设b_数据分析经典模型——朴素贝叶斯

编辑导语&#xff1a;做过数据分析的人&#xff0c;想必对贝叶斯模型都不会陌生。贝叶斯预测模型是运用贝叶斯统计进行的一种预测&#xff0c;不同于一般的统计方法&#xff0c;其不仅利用模型信息和数据信息&#xff0c;而且充分利用先验信息。通过实证分析的方法&#xff0c;…

QGraphicsProxyWidget paintEvent(from 1+1 =2)

标题不好取&#xff0c;起源于CSDN中看到有网友提问&#xff1a;如果将一个QWidget同时显示在 QGraphicsView 和其他和view同级的普通的Widget中。 QGraphicsProxyWidget QGraphicsProxyWidget 是为将 QWidget 嵌入到 QGraphicsScene 中而引入的代理。 将 event 在二者之间进行…

Asterisk使用数据库配置方法

安装&#xff1a; 1、安装 unixODBC unixODBC-devel libtool-ltdl libtool-ltdl-devel &#xff0c;为了使asterisk支持数据库存储&#xff08;必须先安装&#xff09; 2、安装 mysql 并设置好 C_INCLUDE_PATH 和 LD_LIBRARY_PATH 3、从 http://www.asterisk.org/downloads 下载…

linux文件系统_Linux的文件系统简介

inux操作系统的本质可以说就是文件系统的集合&#xff0c;文件系统既包含文件的数据也包含文件系统的结构。在Linux文件系统中&#xff0c;EXT2文件系统、虚拟文件系统、/proc文件系统是三个具有代表性的文件系统。/proc文件系统是一个伪文件系统&#xff0c;它只存在内存当中&…

matlab如何测两点的角度_根据2点经纬度,计算方位角,以及计算2条线的夹角

以真北为0度起点&#xff0c;由东向南向西顺时针旋转360度&#xff0c;主要是用于控制象限。根据2点经纬度&#xff0c;计算方位角[csharp]////// 给定2点&#xff0c;获得经纬度/// /// 起点经纬度&#xff0c;都是以度为单位/// 终点经纬度&#xff0c;都是以度为单位/// pri…

VMWare 环境下devstack创建虚拟机报错及修改nova-api返回数据得条目

1、在生产环境中&#xff0c; 由于某个tenant下创建了有1300条得security-group通过查询nova得数据库可以看出确实有1300条得存在&#xff0c;但是通过curl调用的时候发现返回得数目只有1000条 可以通过修改nova.conf文件得osapi_max_limit 项修改返回得条目限制&#xff0c;默…

使用数据库保存Asterisk sip账号信息(odbc方式)

在默认情况下&#xff0c;Asterisk的配置文件都保存在/etc/asterisk目录中&#xff0c;以ini文件的格式保存。我们也可以使用数据库来保存大多数Asterisk配置信息。 Asterisk使用数据库保存配置信息有两种方法&#xff1a;静态和动态&#xff0c;对于不经常修改的配置数据&…

删除按钮_汪涵拜师学艺第七篇:往来单位查询删除按钮和新增判断的设计!

老师好&#xff01;大家好&#xff01;我叫汪涵&#xff1a;今天给大家分享往来单位查询删除按钮和新增判断的设计&#xff01;在开始具体内容之前&#xff0c;请让我先分享我们的价值观&#xff1a;用自律和勤奋来改变命运&#xff0c;不走捷径&#xff0c;有爱心&#xff0c;…

python requests https_解决python的requests模块访问私有SSL证书产生的报错问题

如题访问部分私有SSL证书网站时报如下错误requests.exceptions.SSLError: [SSL: CERTIFICATE_VERIFY_FAILED] certificate verify failed (_ssl.c:581)测试环境kali linux 1.1.0Python 2.7.8python-openssl 0.13-2deb7u1requests 2.3.0测试代码#/usr/bin/python#codingutf-8imp…

Ubuntu 12.04(32位)安装Oracle 11g(32位)全过程以及几乎所有问题的解决办法

这两天在Ubuntu上安装Oracle把人折腾毁了&#xff0c;即使照着网上的教程来&#xff0c;还是出了很多问题。好在最后终于搞定了。写出来总结一下&#xff0c;免得以后忘了。 标题注明32位是因为网上教程几乎全是以64位安装为例的&#xff0c;32位系统下照着做是绝对会安装失败的…

dio设置自定义post请求_Flutter Dio简单二次封装和自定义Header

话不多说自己看代码封装的比较简单&#xff0c;比较适合入门学习Dio。import package:dio/dio.dart;import Api.dart;/** 封装 restful 请求** GET、POST、DELETE、PATCH* 主要作用为统一处理相关事务&#xff1a;* - 统一处理请求前缀&#xff1b;* - 统一打印请求信息&#x…

解决asterisk sip呼叫 488 no acceptable here

这两天实验了一下asterisk static realtime方案&#xff0c;将sip.conf的信息保存到mysql数据库里。但是呼叫的时候&#xff0c;总是 报 488 no acceptable here。 这是我的sip.conf文件&#xff0c;数据库里和sip.conf文件一模一样&#xff0c;但是就是不行。 [general] c…

怎么安装python3.6.5_Centos7 安装Python3.6.5

一、centos7 安装 Python3.6.5教程1、在安装Python之前&#xff0c;需要先安装一些后面遇到的依赖问题(如果有依赖问题&#xff0c;按照提示安装)&#xff1a;yum -y install zlib-devel bzip2-devel openssl-devel ncurses-devel sqlite-devel readline-devel tk-devel gdbm-d…