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事件模型代码
Jul 01 Javascript
jquery中通过过滤器获取表单元素的实现代码
Jul 05 Javascript
jquery中文乱码的多种解决方法
Jun 21 Javascript
把jquery 的dialog和ztree结合实现步骤
Aug 02 Javascript
jquery.post用法关于type设置问题补充
Jan 03 Javascript
js实现Select列表各项上移和下移的方法
Aug 14 Javascript
js replace(a,b)之替换字符串中所有指定字符的方法
Aug 17 Javascript
总结Javascript中数组各种去重的方法
Oct 04 Javascript
tab栏切换原理
Mar 22 Javascript
Node.js 使用流实现读写同步边读边写功能
Sep 11 Javascript
详解微信小程序开发聊天室—实时聊天,支持图片预览
May 20 Javascript
原生JS实现多条件筛选
Aug 19 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扩展介绍与开发教程
2010/08/19 PHP
openflashchart 2.0 简单案例php版
2012/05/21 PHP
php连接oracle数据库的核心步骤
2016/05/26 PHP
Yii框架小部件(Widgets)用法实例详解
2020/05/15 PHP
JavaScript入门教程(8) Location地址对象
2009/01/31 Javascript
jquery高级编程的最佳实践详解
2014/03/23 Javascript
node.js中的fs.readSync方法使用说明
2014/12/17 Javascript
JavaScript父子窗体间的调用方法
2015/03/31 Javascript
属于你的jQuery提示框(Tip)插件
2016/01/20 Javascript
详解React Native顶|底部导航使用小技巧
2017/09/14 Javascript
JS实现的数组去除重复数据算法小结
2017/11/17 Javascript
解决Vue+Element ui开发中碰到的IE问题
2018/09/03 Javascript
Webpack之tree-starking 解析
2018/09/11 Javascript
利用JS代码自动删除稿件的普通弹幕功能
2019/09/20 Javascript
Vue实现验证码功能
2019/12/03 Javascript
Vuex中的Mutations的具体使用方法
2020/06/01 Javascript
[02:43]2014DOTA2国际邀请赛 官方Alliance战队纪录片
2014/07/14 DOTA
[02:17]《辉夜杯》TRG战队巡礼
2015/10/26 DOTA
[07:39]第一届亚洲邀请赛回顾视频
2017/02/14 DOTA
Python3遍历目录树实现方法
2015/05/22 Python
python中根据字符串调用函数的实现方法
2016/06/12 Python
Python基于回溯法子集树模板解决马踏棋盘问题示例
2017/09/11 Python
python3.7 使用pymssql往sqlserver插入数据的方法
2019/07/08 Python
python标准库sys和OS的函数使用方法与实例详解
2020/02/12 Python
python GUI库图形界面开发之PyQt5布局控件QVBoxLayout详细使用方法与实例
2020/03/06 Python
2020最新pycharm汉化安装(python工程狮亲测有效)
2020/04/26 Python
python代码中怎么换行
2020/06/17 Python
python程序如何进行保存
2020/07/03 Python
html5中valid、invalid、required的定义
2014/02/21 HTML / CSS
eBay爱尔兰站:eBay.ie
2019/08/09 全球购物
写出SQL四条最基本的数据操作语句(DML)
2012/12/12 面试题
运动会横幅标语
2014/06/17 职场文书
中小学生学籍证明
2014/10/25 职场文书
2014年保育员个人工作总结
2014/12/02 职场文书
2015年学校总务工作总结
2015/07/20 职场文书
解决Pytorch半精度浮点型网络训练的问题
2021/05/24 Python