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 相关文章推荐
用js得到网页中所有的div的id
Oct 19 Javascript
SWFObject 2.1以上版本语法介绍
Jul 10 Javascript
Jquery简单实现GridView行高亮的方法
Jun 15 Javascript
JavaScript检测并限制复选框选中个数的方法
Aug 12 Javascript
浅析javascript的return语句
Dec 15 Javascript
基于jquery实现的仿优酷图片轮播特效代码
Jan 13 Javascript
基于JavaScript实现鼠标悬浮弹出跟随鼠标移动的带箭头的信息层
Jan 18 Javascript
Google 地图叠加层实例讲解
Aug 06 Javascript
Node.js Event Loop各阶段讲解
Mar 08 Javascript
axios异步提交表单数据的几种方法
Aug 11 Javascript
JS实现随机抽取三人
Nov 06 Javascript
Vue中keep-alive 实现后退不刷新并保持滚动位置
Mar 17 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
解析mysql 表中的碎片产生原因以及清理
2013/06/22 PHP
PHP中怎样保持SESSION不过期 原理及方案介绍
2013/08/08 PHP
50个PHP程序性能优化的方法
2014/06/02 PHP
php自动识别文件编码并转换为UTF-8的方法
2014/06/12 PHP
PHP中exec函数和shell_exec函数的区别
2014/08/20 PHP
php实现URL加密解密的方法
2016/11/17 PHP
Zend Framework数据库操作技巧总结
2017/02/18 PHP
JS操作Cookie写入和读取实例代码
2013/10/20 Javascript
JavaScript操作Oracle数据库示例
2015/03/06 Javascript
基于JavaScript代码实现pc与手机之间的跳转
2015/12/23 Javascript
基于d3.js实现实时刷新的折线图
2016/08/03 Javascript
JS禁止查看网页源代码的实现方法
2016/10/12 Javascript
微信小程序 input输入框详解及简单实例
2017/01/10 Javascript
vue-resource 拦截器使用详解
2017/02/21 Javascript
node.JS md5加密中文与php结果不一致的解决方法
2017/05/05 Javascript
JavaScript运动框架 链式运动到完美运动(五)
2017/05/18 Javascript
react开发教程之React 组件之间的通信方式
2017/08/12 Javascript
vue-cli项目中使用echarts图表实例
2018/10/22 Javascript
js实现图片上传即时显示效果
2019/09/30 Javascript
[02:19]2014DOTA2国际邀请赛 专访820少年们一起去追梦吧
2014/07/14 DOTA
Python设计模式之单例模式实例
2014/04/26 Python
Python中每次处理一个字符的5种方法
2015/05/21 Python
浅析Python编写函数装饰器
2016/03/18 Python
Python面向对象类的继承实例详解
2018/06/27 Python
Python实现获取汉字偏旁部首的方法示例【测试可用】
2018/12/18 Python
python生成每日报表数据(Excel)并邮件发送的实例
2019/02/03 Python
Django中提示消息messages的设置方式
2019/11/15 Python
Python @property装饰器原理解析
2020/01/22 Python
STUBHUB日本:购买和出售全球活动门票
2018/07/01 全球购物
编辑硕士自荐信范文
2013/11/27 职场文书
迷你西餐厅创业计划书范文
2013/12/31 职场文书
应届毕业生求职信
2014/05/26 职场文书
护理学专业求职信
2014/06/29 职场文书
亲戚关系证明
2015/06/24 职场文书
2019年“红色之旅”心得体会1000字(3篇)
2019/09/27 职场文书
Java各种比较对象的方式的对比总结
2021/06/20 Java/Android