ES6基础之默认参数值


Posted in Javascript onFebruary 21, 2019

如果调用函数的过程中,定义的参数缺失,此参数变量的值则会是undefined。怎么给缺失的参数赋值默认值,在ES6之前,没有简洁的语法设置缺失参数的默认值,但是我们一般可以这么编写代码解决缺失参数默认值:

function myFunction(x, y, z) {
 x = x === undefined ? 1 : x;
 y = y === undefined ? 2 : y;
 z = z === undefined ? 3 : z;
 console.log(x, y, z); //Output "6 7 3"
 }
 myFunction(6, 7);

这种写法是不是比较麻烦?默认值的设置是不是不够直观?在ES6中,我们可以用更简洁的语法进行实现,通过本篇文章你将学习到以下内容:

  • 使用ES6语法声明参数默认
  • 值使用undefined传
  • 参参数运算

使用ES6语法声明参数默认值

我们可以使用ES6简洁的语法,如下示例进行声明函数参数的默认值:

function myFunction(x = 1, y = 2, z = 3) {
 console.log(x, y, z); 
}
myFunction(6,7); // Outputs 6 7 3

在上述代码示例中,我们在调用此函数中传递了前两个参数,因此参数的默认值(即x=1和y=2)将会被覆盖(即x=6和y=7)。由于第三个参数缺省,因此z使用默认值,将会是3。

使用undefined传参

如果我们想让具体某个参数使用默认值,我们可以使用undefined进行赋值,如下段代码所示:

function myFunction(x = 1, y = 2, z = 3) {
 console.log(x, y, z); // Outputs "1 7 9"
 }
 myFunction(undefined,7,9);

是不是很简单,只需要使用undefined,我们就可以指定具体某个参数使用默认值。

参数运算

在ES6中我们不仅可以给参数默认赋值具体的数值,同时参数赋值支持参数的逻辑运算进行赋值,如下段代码所示:

function myFunction(x = 1, y = 2, z = x + y) {
 console.log(x, y, z); // Output "6 7 13"
 }
 myFunction(6,7);

在上述代码中,我们只传入了前两个参数,第三个参数缺省,第三个参数的值默认值是则会是前两个参数之和。

小节

今天的内容就到这里,当我们在开发一些工程应用通用组件时,都需要暴露一些接口以供使用。而这些接口的友好性是决定这个组件质量的一大指标,其中参数缺省值(默认值)的完善程度同时也影响接口的友好性,感谢ES6能让我们用如此简介的语法设置参数的缺省值。

与解构赋值默认值结合使用

这里有两种写法需要区分一下:

function m1({x=0,y=0} = {}){
  return [x,y];
}
function m2({x,y} = {x:0,y:0}){
  return [x,y];
}
m1({x:3});//[3,0]
m2({x:3});//[3,undefined]
m1({});//[0,0]
m2({});//[undefined,undefined]

参数默认值的位置

通常情况下,定义了默认值的参数应该是函数的尾参数。因为这样比较容易看出,到底省略了哪些参数,如果非尾部的参数设置默认值,实际上这个参数是无法省略的。

如果有默认值的参数都不是尾参数,这时,无法只省略该参数而不省略其后的参数,除非显示输入undefined。如果传入undefined,那么就会触发默认值,但是null没有这个效果。

函数的length属性

如果函数指定了默认值后,函数的length属性就不会包含有默认值的参数。这是因为length属性的含义是,该函数预期传入的参数个数,某个参数指定默认值之后,预期传入的参数个数就不包括这个参数了,同理,rest参数也不会计入length属性。

函数参数默认值的类型

(1)变量
如果函数参数的默认值是一个变量,则该变量所处的作用域和其他变量的作用域规则相同,即是先前函数的作用域,然后再是全局作用域。

(2)函数
如果函数A的参数默认值是函数B,那么由于函数的作用域是其声明的时候所在的作用域,函数B的作用域就在全局作用域而不是函数A的作用域。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery更换文章内容与改变字体大小代码
Sep 30 Javascript
window.onresize 多次触发的解决方法
Nov 08 Javascript
jquery用data方法获取某个元素上的事件
Jun 23 Javascript
jquery 实现两Select 标签项互调示例代码
Sep 25 Javascript
基于jquery实现智能提示控件intellSeach.js
Mar 17 Javascript
BootStrap实现带关闭按钮功能
Feb 15 Javascript
微信小程序 空白页重定向解决办法
Jun 27 Javascript
jQuery选择器_动力节点Java学院整理
Jul 05 jQuery
基于vue-router 多级路由redirect 重定向的问题
Sep 03 Javascript
angular 数据绑定之[]和{{}}的区别
Sep 25 Javascript
JS控制GIF图片的停止与显示
Oct 24 Javascript
JS加载解析Markdown文档过程详解
May 19 Javascript
微信小程序HTTP接口请求封装的实现
Feb 21 #Javascript
微信小程序控制台提示warning:Now you can provide attr "wx:key" for a "wx:for" to improve performance解决方法
Feb 21 #Javascript
Element-UI中Upload上传文件前端缓存处理示例
Feb 21 #Javascript
详解Puppeteer前端自动化测试实践
Feb 21 #Javascript
javascript中join方法实例讲解
Feb 21 #Javascript
React 组件渲染和更新的实现代码示例
Feb 21 #Javascript
vue图片上传本地预览组件使用详解
Feb 20 #Javascript
You might like
PHP管理依赖(dependency)关系工具 Composer 安装与使用
2014/08/18 PHP
Linux操作系统安装LAMP环境
2015/06/26 PHP
PHP响应post请求上传文件的方法
2015/12/17 PHP
PHP编程实现微信企业向用户付款的方法示例
2017/07/26 PHP
使用YII2框架实现微信公众号中表单提交功能
2017/09/04 PHP
javascript 兼容所有浏览器的DOM扩展功能
2012/08/01 Javascript
JQuery+CSS提示框实现思路及代码(纯手工打造)
2013/05/07 Javascript
浅谈javascript中的call、apply、bind
2016/03/06 Javascript
AngularJS基础 ng-keypress 指令简单示例
2016/08/02 Javascript
request请求获取参数的实现方法(post和get两种方式)
2016/09/27 Javascript
js实现加载更多功能实例
2016/10/27 Javascript
微信小程序page的生命周期和音频播放及监听实例详解
2017/04/07 Javascript
Ionic2调用本地SQlite实例
2017/04/22 Javascript
jquery.uploadView 实现图片预览上传功能
2017/08/10 jQuery
jackson解析json字符串,首字母大写会自动转为小写的方法
2017/12/22 Javascript
element-ui的回调函数Events的用法详解
2018/10/16 Javascript
Javascript执行上下文顺序的深入讲解
2020/11/04 Javascript
Vue使用Ref跨层级获取组件的步骤
2021/01/25 Vue.js
Vue实现圆环进度条的示例
2021/02/06 Vue.js
[57:24]LGD vs VGJ.T 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
学习python处理python编码问题
2011/03/13 Python
python操作mysql中文显示乱码的解决方法
2014/10/11 Python
让Django支持Sql Server作后端数据库的方法
2018/05/29 Python
pygame实现俄罗斯方块游戏(对战篇1)
2019/10/29 Python
解决pycharm不能自动补全第三方库的函数和属性问题
2020/03/12 Python
如何在keras中添加自己的优化器(如adam等)
2020/06/19 Python
Perfumetrader荷兰:香水、化妆品和护肤品在线商店
2017/09/15 全球购物
加拿大最大的钻石商店:Peoples Jewellers
2018/01/01 全球购物
TUMI新加坡官网:国际领先的商旅箱包品牌
2019/01/12 全球购物
俄罗斯鲜花递送:AMF
2020/04/24 全球购物
实习销售业务员自我鉴定
2013/09/21 职场文书
环保建议书500字
2014/05/14 职场文书
Python离线安装openpyxl模块的步骤
2021/03/30 Python
HTML中的表单Form实现居中效果
2021/05/25 HTML / CSS
OpenCV-Python实现轮廓拟合
2021/06/08 Python
python playwright 自动等待和断言详解
2021/11/27 Python