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 相关文章推荐
一端时间轮换的广告
Jun 26 Javascript
Javascript+XMLHttpRequest+asp.net无刷新读取数据库数据
Aug 09 Javascript
jquery实现可拖拽弹出层特效
Jan 04 Javascript
jQuery子属性过滤选择器用法分析
Feb 10 Javascript
Angularjs实现多个页面共享数据的方式
Mar 29 Javascript
JS+CSS实现闪烁字体效果代码
Apr 05 Javascript
AngularJS基础 ng-focus 指令简单示例
Aug 01 Javascript
Angular4学习笔记之根模块与Ng模块
Sep 09 Javascript
node中IO以及定时器优先级详解
May 10 Javascript
layer.confirm点击第一个按钮关闭弹出框的方法
Sep 09 Javascript
JavaScript工具库MyTools详解
Jan 01 Javascript
小程序如何定位所在城市及发起周边搜索
Feb 11 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生成html分页列表的代码
2007/03/18 PHP
php错误提示failed to open stream: HTTP request failed!的完美解决方法
2011/06/06 PHP
php fsockopen伪造post与get方法的详解
2013/06/14 PHP
php 强制下载文件实现代码
2013/10/28 PHP
php实现把数组按指定的个数分隔
2014/02/17 PHP
php+mysqli使用面向对象方式更新数据库实例
2015/01/29 PHP
php变量与JS变量实现不通过跳转直接交互的方法
2017/08/25 PHP
PHP实现数据库的增删查改功能及完整代码
2018/04/18 PHP
PHP实现给定一列字符,生成指定长度的所有可能组合示例
2019/06/22 PHP
百度留言本js 大家可以参考下
2009/10/13 Javascript
jquery trim() 功能源代码
2011/02/14 Javascript
jquery delay()介绍及使用指南
2014/09/02 Javascript
JS与jQuery遍历Table所有单元格内容的方法
2015/12/07 Javascript
Angular.js实现注册系统的实例详解
2016/12/18 Javascript
javascript 判断用户有没有操作页面
2017/10/17 Javascript
bmob js-sdk 在vue中的使用教程
2018/01/21 Javascript
nodejs acl的用户权限管理详解
2018/03/14 NodeJs
Nuxt v-bind绑定img src不显示的解决
2019/12/05 Javascript
vue proxy 的优势与使用场景实现
2020/06/15 Javascript
Vue3+elementui plus创建项目的方法
2020/12/01 Vue.js
[03:06]V社市场总监Dota2项目负责人Erik专访:希望更多中国玩家加入DOTA2
2014/07/11 DOTA
[08:54]DOTA2-DPC中国联赛 正赛 Aster vs LBZS 选手采访
2021/03/11 DOTA
python获得文件创建时间和修改时间的方法
2015/06/30 Python
python中字符串内置函数的用法总结
2018/09/13 Python
python3 反射的四种基本方法解析
2019/08/26 Python
关于Keras模型可视化教程及关键问题的解决
2020/01/24 Python
简单了解Python write writelines区别
2020/02/27 Python
Python实现删除某列中含有空值的行的示例代码
2020/07/20 Python
前端H5 Video常见使用场景简介
2020/08/21 HTML / CSS
杭州时比特电子有限公司SQL
2013/08/22 面试题
介绍一下Ruby中的对象,属性和方法
2012/07/11 面试题
基层干部十八大感言
2014/01/19 职场文书
《自然之道》教学反思
2014/02/11 职场文书
2014年妇幼卫生工作总结
2014/12/09 职场文书
上课迟到检讨书
2015/05/06 职场文书
大学生入党自我鉴定范文
2019/06/21 职场文书