ES6箭头函数和扩展实例分析


Posted in Javascript onMay 23, 2020

本文实例讲述了ES6箭头函数和扩展。分享给大家供大家参考,具体如下:

ES6箭头函数和扩展实例分析

1.默认值

在ES6中给我们增加了默认值的操作相关代码如下:

function add(a,b=1){
  return a+b;
}
console.log(add(1));

可以看到现在只需要传递一个参数也是可以正常运行的。

输出结果为:2。

2.主动抛出错误

ES6中我们直接用throw new Error( xxxx ),就可以抛出错误。

function add(a,b=1){
  if(a == 0){
    throw new Error('This is error')
  }
   return a+b;
}
console.log(add(0));

在控制台可看到异常为:

ES6箭头函数和扩展实例分析

3.函数中的严谨模式

我们在ES5中就经常使用严谨模式来进行编程,但是必须写在代码最上边,相当于全局使用。在ES6中我们可以写在函数体中,相当于针对函数来使用。例如:

function add(a,b=1){
  'use strict'
  if(a == 0){
    throw new Error('This is error');
  }
   return a+b;
}
console.log(add(1));

上边的代码如果运行的话,你会发现浏览器控制台报错,这个错误的原因就是如果你使用了默认值,再使用严谨模式的话,就会有冲突,所以我们要取消默认值的操作,这时候你在运行就正常了。

function add(a,b){
  'use strict'
  if(a == 0){
    throw new Error('This is error');
  }
   return a+b;
}
console.log(add(1,2));

结果为3。

4.获得需要传递的参数个数

 ES6为我们提供了得到参数的方法(xxx.length).我们用上边的代码看一下需要传递的参数个数。

function add(a,b){
  'use strict'
  if(a == 0){
    throw new Error('This is error');
  }
   return a+b;
}
console.log(add.length);//2

这时控制台打印出了2,但是如果我们去掉严谨模式,并给第二个参数加上默认值的话,如下:

function add(a,b=1){

  if(a == 0){
    throw new Error('This is error');
  }
  return a+b;
}
console.log(add.length);//1

这时控制台打印出了1。

总结:它得到的是必须传入的参数。

5.箭头函数

在箭头函数中,方法体内如果是两句话,那就需要在方法体外边加上{}括号

var add =(a,b=1) => {
  console.log('hello world')
  return a+b;
};
console.log(add(1));//2

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

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

Javascript 相关文章推荐
基于jquery的从一个页面跳转到另一个页面的指定位置的实现代码(带平滑移动的效果)
May 24 Javascript
div+css+js实现无缝滚动类似marquee无缝滚动兼容firefox
Aug 29 Javascript
js确认删除对话框效果的示例代码
Feb 20 Javascript
javascript中attribute和property的区别详解
Jun 05 Javascript
JavaScript数据存储 Cookie篇
Jul 02 Javascript
Angular中支持SCSS的方法
Nov 18 Javascript
Vue2.5通过json文件读取数据的方法
Feb 27 Javascript
Vue手把手教你撸一个 beforeEnter 钩子函数
Apr 24 Javascript
Promise扫盲贴
Jun 24 Javascript
JavaScript页面加载事件实例讲解
Sep 01 Javascript
vue Tab切换以及缓存页面处理的几种方式
Nov 05 Javascript
详解vuejs中执行npm run dev出现页面cannot GET/问题
Apr 26 Javascript
ES6新增的数组知识实例小结
May 23 #Javascript
ES6扩展运算符和rest运算符用法实例分析
May 23 #Javascript
JavaScript组合设计模式--改进引入案例分析
May 23 #Javascript
JavaScript组合模式---引入案例分析
May 23 #Javascript
JavaScript设计模式--桥梁模式引入操作实例分析
May 23 #Javascript
JavaScript设计模式--简单工厂模式实例分析【XHR工厂案例】
May 23 #Javascript
JavaScript设计模式--简单工厂模式定义与应用案例详解
May 23 #Javascript
You might like
PHP输入流php://input介绍
2012/09/18 PHP
一个PHP针对数字的加密解密类
2014/03/20 PHP
ECSHOP完美解决Deprecated: preg_replace()报错的问题
2016/05/17 PHP
弹出广告特效代码(一个IP只弹出一次)
2007/05/11 Javascript
基于jquery的checkbox下拉框插件代码
2010/06/25 Javascript
js解析与序列化json数据(三)json的解析探讨
2013/02/01 Javascript
jquery实现省市select下拉框的替换(示例代码)
2014/02/22 Javascript
jQuery使用fadein方法实现渐出效果实例
2015/03/27 Javascript
JavaScript模拟可展开、拖动与关闭的聊天窗口实例
2015/05/12 Javascript
clipboard.js无需Flash无需依赖任何JS库实现文本复制与剪切
2015/10/10 Javascript
Angularjs中UI Router的使用方法
2016/05/14 Javascript
Bootstrap布局组件教程之Bootstrap下拉菜单
2016/06/12 Javascript
Bootstrap学习笔记之进度条、媒体对象实例详解
2017/03/09 Javascript
jQuery实现文件编码成base64并通过AJAX上传的方法
2018/04/12 jQuery
javascript数据类型中的一些小知识点(推荐)
2019/04/18 Javascript
layui form表单提交后实现自动刷新
2019/10/25 Javascript
[01:41]DOTA2 2015国际邀请赛中国区预选赛第三日战报
2015/05/28 DOTA
[54:18]DOTA2-DPC中国联赛 正赛 PSG.LGD vs LBZS BO3 第一场 1月22日
2021/03/11 DOTA
python缩进区别分析
2014/02/15 Python
Python使用装饰器模拟用户登陆验证功能示例
2018/08/24 Python
python实现自动登录
2018/09/17 Python
python实现翻译word表格小程序
2020/02/27 Python
python3 实现口罩抽签的功能
2020/03/11 Python
Pycharm连接远程服务器过程图解
2020/04/30 Python
解决更改AUTH_USER_MODEL后出现的问题
2020/05/14 Python
详解Python yaml模块
2020/09/23 Python
pycharm 实现调试窗口恢复
2021/02/05 Python
Glamest意大利:女性在线奢侈品零售店
2019/04/28 全球购物
工商管理应届生求职信
2013/10/07 职场文书
体育专业个人求职信范文
2013/12/27 职场文书
模具数控专业自荐信
2014/01/27 职场文书
《永远的白衣战士》教学反思
2014/04/25 职场文书
2015年社区服务活动总结
2015/03/25 职场文书
教师求职自荐信
2015/03/26 职场文书
《植物妈妈有办法》教学反思
2016/02/23 职场文书
基于docker安装zabbix的详细教程
2022/06/05 Servers