ES6基础之默认参数值
如果调用函数的过程中,定义的参数缺失,此参数变量的值则会是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的作用域。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
- WordPress评论滑动/拉链解锁myQaptcha代码版及部署方法
- 修改WordPress分类目录和页面链接以斜杠/结尾,附nginx对应的301跳转设置方法
- 彻底弄懂 Http 缓存机制 - 基于缓存策略三要素分解法
- 解决Crayon Syntax Highlighter代码高亮与fancybox图片暗箱冲突问题
- 移动搜索SEO:网站移动适配之Meta标注、移动跳转终结篇
- http加速器Varnish的vcl配置小记(lnmp环境)
- 关于网站图标favicon.ico那点事儿,你造吗?
- 跨平台 ListView 性能优化
- 打造“微信小程序”组件化开发框架
- 解决Linux下MySQL启动错误Starting MySQL.Manager of pid-file quit without updating file.[FAILED]
- 美团大众点评 Hybrid 化建设
- Linux系统date命令无法修改或同步时间的解决办法
- Redex 初探与 Interdex:Andorid 冷启动优化
- JS延时判断,改善中国博客联盟展示导航自动点击的灵敏度
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法