ES6知识点整理之函数数组参数的默认值及其解构应用示例


Posted in Javascript onApril 17, 2019

本文实例讲述了ES6知识点整理之函数数组参数的默认值及其解构应用。分享给大家供大家参考,具体如下:

在ES6中, 函数的参数也可以使用解构赋值和默认值的设置,下面我们来看下

在ES6之前设置函数默认值的写法

function test(x,y) {
 x = x || 12;
 y = y || 22;
 console.log(x,y);
}
test(); // 12 22
test(1,2) // 1 2

在ES6中给函数参数赋默认值

function test(x=12, y=22) {
 console.log(x,y);
}
test(); // 12 22
test(3,4); // 3 4

ES6中函数数组参数的默认值

function test([x=2,y=1]) {
 console.log(x, y);
}
test([]); // 2, 1
test([3,4]) // 3 4
test(); // 报错: Uncaught TypeError: Cannot read property 'Symbol(Symbol.iterator)' of undefined

解决上述最后一个错误:使用默认数组来匹配没有参数的情形

function test([x=2,y=1]=[]) {
 console.log(x, y);
}
test();  // 2 1

更多应用:

function test([x=2,y=1]=[], z=90) {
 console.log(x, y, z);
}
test();  // 2 1 90
test(undefined, 80); // 2 1 80
test('', 50); // 2 1 50 正常输出
// test(null, 80); // 报错,不能填入null Uncaught TypeError: Cannot read property 'Symbol(Symbol.iterator)' of object
// test(NaN, 60); // 报错: Uncaught TypeError: undefined is not a function

注意上面函数参数可以接受undefined,但不能接受null和NaN

下面则是更复杂的应用

function test([x=2,[y=3,w=4]=[]]=[], z=90) {
 console.log(x, y, w, z);
}
test(); // 2 3 4 90
test(undefined, undefined); // 2 3 4 90
test(undefined, 8); // 2 3 4 8
test([5,[]],12); // 5 3 4 12
test([5,[2,6]],12); // 5 2 6 12

注意其中的陷阱:

function test([x,y]=[1,2]) {
 console.log(x,y);
}
test(); // 1 2
test([]); // undefined undefined

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具http://tools.3water.com/code/HtmlJsRun测试上述代码运行结果。

更多关于JavaScript相关内容可查看本站专题:《javascript面向对象入门教程》、《JavaScript查找算法技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
JavaScript 基础知识 被自己遗忘的
Oct 15 Javascript
js和jquery批量绑定事件传参数一(新猪猪原创)
Jun 23 Javascript
jquery 缓存问题的几个解决方法
Nov 11 Javascript
再探JavaScript作用域
Sep 24 Javascript
jQuery+AJAX实现网页无刷新上传
Feb 22 Javascript
jQuery Mobile漏洞会有跨站脚本攻击风险
Feb 12 Javascript
vue axios用法教程详解
Jul 23 Javascript
浅谈ajax在jquery中的请求和servlet中的响应
Jan 22 jQuery
node.js博客项目开发手记
Mar 16 Javascript
vuejs中父子组件之间通信方法实例详解
Jan 17 Javascript
Angular利用HTTP POST下载流文件的步骤记录
Jul 26 Javascript
微信小程序实现星星评分效果
Nov 01 Javascript
mpvue性能优化实战技巧(小结)
Apr 17 #Javascript
node.js监听文件变化的实现方法
Apr 17 #Javascript
vue中格式化时间过滤器代码实例
Apr 17 #Javascript
postman自定义函数实现 时间函数的思路详解
Apr 17 #Javascript
vue指令之表单控件绑定v-model v-model与v-bind结合使用
Apr 17 #Javascript
记一次Vue.js混入mixin的使用(分权限管理页面)
Apr 17 #Javascript
详解js获取video任意时间的画面截图
Apr 17 #Javascript
You might like
生成静态页面的PHP类
2006/11/25 PHP
PHP+SQL 注入攻击的技术实现以及预防办法
2010/12/29 PHP
PHP跳转页面的几种实现方法详解
2013/06/08 PHP
yii框架使用分页的方法分析
2019/07/25 PHP
JS input 数字验证代码
2009/07/30 Javascript
基于jQuery的消息提示插件之旅 DivAlert(三)
2010/04/01 Javascript
js操作textarea 常用方法总结
2012/12/03 Javascript
js操作checkbox遇到的问题解决
2013/06/29 Javascript
jQuery 文本框得失焦点的简单实例
2014/02/19 Javascript
Ext4.2的Ext.grid.plugin.RowExpander无法触发事件解决办法
2014/08/15 Javascript
JavaScript indexOf方法入门实例(计算指定字符在字符串中首次出现的位置)
2014/10/17 Javascript
node.js中的http.createServer方法使用说明
2014/12/14 Javascript
JavaScript获取DOM元素的11种方法总结
2015/04/25 Javascript
基于html5和nodejs相结合实现websocket即使通讯
2015/11/19 NodeJs
this,this,再次讨论javascript中的this,超全面(经典)
2016/01/05 Javascript
angularjs在ng-repeat中使用ng-model遇到的问题
2016/01/21 Javascript
Javascript中this绑定的3种方法与比较
2016/10/13 Javascript
非常实用的vue导航钩子
2017/03/20 Javascript
微信小程序request出现400的问题解决办法
2017/05/23 Javascript
Vue2.0用 watch 观察 prop 变化(不触发)
2017/09/08 Javascript
教你用Cordova打包Vue项目的方法
2017/10/17 Javascript
解决使用vue.js路由后失效的问题
2018/03/17 Javascript
Webpack设置环境变量的一些误区详解
2019/12/19 Javascript
Python中的MongoDB基本操作:连接、查询实例
2015/02/13 Python
在Python中增加和插入元素的示例
2018/11/01 Python
python将三维数组展开成二维数组的实现
2019/11/30 Python
python爬虫开发之Beautiful Soup模块从安装到详细使用方法与实例
2020/03/09 Python
Python restful框架接口开发实现
2020/04/13 Python
CSS3 transition 实现通知消息轮播条
2020/10/14 HTML / CSS
写自荐信有哪些不宜?
2013/10/17 职场文书
统计岗位职责
2014/02/21 职场文书
个人师德师风自我剖析材料
2014/09/29 职场文书
安全生产月宣传标语
2014/10/06 职场文书
2014年宣传思想工作总结
2014/12/10 职场文书
新人入职感言
2015/07/31 职场文书
Java使用HttpClient实现文件下载
2022/08/14 Java/Android