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 相关文章推荐
JavaScript 高级篇之函数 (四)
Apr 07 Javascript
JavaScript程序员应该知道的45个实用技巧
Mar 04 Javascript
jquery实现textarea 高度自适应
Mar 11 Javascript
JavaScript中的pow()方法使用详解
Jun 15 Javascript
jQuery支持添加事件的日历特效代码分享(3种样式)
Aug 24 Javascript
javascript合并表格单元格实例代码
Jan 03 Javascript
Node.js服务器环境下使用Mock.js拦截AJAX请求的教程
May 23 Javascript
js动态设置select下拉菜单的默认选中项实例
Aug 21 Javascript
element-ui中的select下拉列表设置默认值方法
Aug 24 Javascript
封装微信小程序http拦截器过程解析
Aug 13 Javascript
详解小程序云开发攻略(解决最棘手的问题)
Sep 30 Javascript
vue 数据遍历筛选 过滤 排序的应用操作
Nov 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
一个简单的PHP入门源程序
2006/10/09 PHP
Windows下安装Memcached的步骤说明
2010/04/25 PHP
php使用preg_match()函数验证ip地址的方法
2017/01/07 PHP
探索Emberjs制作一个简单的Todo应用
2012/11/07 Javascript
在Linux上用forever实现Node.js项目自启动
2014/07/09 Javascript
jquery常用方法及使用示例汇总
2014/11/08 Javascript
jQuery不使用插件及swf实现无刷新文件上传
2014/12/08 Javascript
jquery图片轮播特效代码分享
2020/04/20 Javascript
jQuery easyui的validatebox校验规则扩展及easyui校验框validatebox用法
2016/01/18 Javascript
使用jsonp实现跨域获取数据实例讲解
2016/12/25 Javascript
封装运动框架实战左右与上下滑动的焦点轮播图(实例)
2017/10/17 Javascript
JS如何在不同平台实现多语言方式
2020/07/16 Javascript
简单了解three.js 着色器材质
2020/08/03 Javascript
js仿淘宝放大镜效果
2020/12/28 Javascript
[04:04]显微镜下的DOTA2第六期——电影级别的华丽团战
2014/06/20 DOTA
python使用Apriori算法进行关联性解析
2017/12/21 Python
Python实现的redis分布式锁功能示例
2018/05/29 Python
numpy.linspace 生成等差数组的方法
2018/07/02 Python
python 自定义异常和异常捕捉的方法
2018/10/18 Python
浅谈matplotlib.pyplot与axes的关系
2020/03/06 Python
Python改变对象的字符串显示的方法
2020/08/01 Python
HTML5 CSS3打造相册效果附源码下载
2014/06/16 HTML / CSS
html5如何在Canvas中实现自定义路径动画示例
2017/09/18 HTML / CSS
伦敦著名的运动鞋综合商店:Footpatrol
2019/03/25 全球购物
Sandro法国官网:法国成衣品牌
2019/08/28 全球购物
法律专业实习鉴定
2013/12/22 职场文书
我的祖国演讲稿
2014/05/04 职场文书
食品安全演讲稿
2014/09/01 职场文书
房产销售独家委托书范本
2014/10/01 职场文书
党的群众路线教育实践活动个人剖析材料
2014/10/07 职场文书
公司感恩节活动策划书
2014/10/11 职场文书
2015年安全生产责任书
2015/01/30 职场文书
销售员岗位职责范本
2015/04/11 职场文书
个人维稳承诺书
2015/05/04 职场文书
java调用Restful接口的三种方法
2021/08/23 Java/Android
SQL基础的查询语句
2021/11/11 MySQL