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实现代码
Oct 01 Javascript
使用jQuery清空file文件域的解决方案
Apr 12 Javascript
JS 获取浏览器和屏幕宽高等信息的实现思路及代码
Jul 31 Javascript
快速解决FusionCharts联动的中文乱码问题
Dec 04 Javascript
JavaScript数组去重的3种方法和代码实例
Jul 01 Javascript
每个程序员都需要学习 JavaScript 的7个理由小结
Sep 03 Javascript
BootStrap整体框架之基础布局组件
Dec 15 Javascript
js实现文字选中分享功能
Jan 25 Javascript
详解从angular-cli:1.0.0-beta.28.3升级到@angular/cli:1.0.0
May 22 Javascript
Element Notification通知的实现示例
Jul 27 Javascript
对vue生命周期的深入理解
Dec 03 Vue.js
Vue3.0写自定义指令的简单步骤记录
Jun 27 Vue.js
微信小程序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
星际争霸 Starcraft 发展史
2020/03/14 星际争霸
Centos PHP 扩展Xchche的安装教程
2016/07/09 PHP
ThinkPHP实现的rsa非对称加密类示例
2018/05/29 PHP
PHP等比例压缩图片的实例代码
2018/07/26 PHP
php实现JWT(json web token)鉴权实例详解
2019/11/05 PHP
laravel框架使用FormRequest进行表单验证,验证异常返回JSON操作示例
2020/02/18 PHP
ajax 缓存 问题 requestheader
2010/08/01 Javascript
Javascript this 的一些学习总结
2012/08/02 Javascript
让新消息在网页标题闪烁提示的jQuery代码
2013/11/04 Javascript
JS常用正则表达式总结
2013/11/12 Javascript
javascript中attribute和property的区别详解
2014/06/05 Javascript
JavaScript中的console.log()函数详细介绍
2014/12/29 Javascript
浅谈javascript属性onresize
2015/04/20 Javascript
jquery实现用户打分评分特效
2015/05/28 Javascript
Javascript 高阶函数使用介绍
2015/06/15 Javascript
javascript实现简单加载随机色方块
2015/12/25 Javascript
详解jQuery简单的表格应用
2016/12/16 Javascript
jQuery实现圣诞节礼物传送(花式轮播)
2016/12/25 Javascript
浅谈vue-router2路由参数注意的问题
2017/11/08 Javascript
通过一次报错详细谈谈Point事件
2018/05/17 Javascript
vue实现重置表单信息为空的方法
2018/09/29 Javascript
vue微信分享的实现(在当前页面分享其他页面)
2019/04/16 Javascript
小程序识别身份证,银行卡,营业执照,驾照的实现
2019/11/05 Javascript
详解JavaScript匿名函数和闭包
2020/07/10 Javascript
手机浏览器唤起微信分享(JS)
2020/10/11 Javascript
[42:32]完美世界DOTA2联赛循环赛 Magma vs PXG BO2第二场 10.28
2020/10/28 DOTA
python写的一个文本编辑器
2014/01/23 Python
python写日志封装类实例
2015/06/28 Python
Python实现大文件排序的方法
2015/07/10 Python
Python字典循环添加一键多值的用法实例
2019/01/20 Python
网易微博Web App用HTML5开发的过程介绍
2012/06/13 HTML / CSS
PAUL HEWITT手表美国站:德国北部时尚生活配饰品牌,船锚元素
2017/11/18 全球购物
公司新员工的演讲稿注意事项
2014/01/01 职场文书
会计专业大学生职业生涯规划范文
2014/01/11 职场文书
城南旧事电影观后感
2015/06/16 职场文书
Linux中sftp常用命令整理
2022/06/28 Servers