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默认校验规则整理
Mar 24 Javascript
avascript中的自执行匿名函数应用示例
Sep 15 Javascript
在JavaScript中使用对数Math.log()方法的教程
Jun 15 Javascript
js实现点击向下展开的下拉菜单效果代码
Sep 01 Javascript
JS插件plupload.js实现多图上传并显示进度条
Nov 29 Javascript
基于JavaScript实现本地图片预览
Feb 08 Javascript
关于ES6的六个小特性(二)
Feb 20 Javascript
jQuery动态产生select option下拉列表
Mar 15 Javascript
基于Vue过渡状态实例讲解
Sep 14 Javascript
浏览器调试动态js脚本的方法(图解)
Jan 19 Javascript
React性能优化系列之减少props改变的实现方法
Jan 17 Javascript
js调用网络摄像头的方法
Dec 05 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 安全过滤函数代码
2011/05/07 PHP
解析Linux下Varnish缓存的配置优化
2013/06/20 PHP
php中使用getimagesize获取图片、flash等文件的尺寸信息实例
2014/04/29 PHP
个人写的PHP验证码生成类分享
2014/08/21 PHP
PHP后台微信支付和支付宝支付开发
2017/04/28 PHP
JavaScript 学习笔记(十二) dom
2010/01/21 Javascript
JavaScript使用IEEE 标准进行二进制浮点运算产生莫名错误的解决方法
2011/05/28 Javascript
jQuery 获取浏览器所在的IP地址的小例子
2013/11/08 Javascript
基于jQuery的判断iPad、iPhone、Android是横屏还是竖屏的代码
2014/05/11 Javascript
javascript的alert box在java中如何显示多行
2014/05/18 Javascript
JavaScript移除数组内重复元素的方法
2015/03/18 Javascript
Bootstrap3学习笔记(二)之排版
2016/05/20 Javascript
Vue响应式原理详解
2017/04/18 Javascript
基于pako.js实现gzip的压缩和解压功能示例
2017/06/13 Javascript
vue中v-model动态生成的实例详解
2017/10/27 Javascript
vue中使用echarts制作圆环图的实例代码
2018/07/27 Javascript
详解在React中跨组件分发状态的三种方法
2018/08/09 Javascript
AngularJS 多指令Scope问题的解决
2018/10/25 Javascript
微信小程序实现弹幕墙(祝福墙)
2020/11/18 Javascript
Python实现程序的单一实例用法分析
2015/06/03 Python
python实现的简单RPG游戏流程实例
2015/06/28 Python
Python Requests 基础入门
2016/04/07 Python
python的多重继承的理解
2017/08/06 Python
使用apidocJs快速生成在线文档的实例讲解
2018/02/07 Python
在Windows中设置Python环境变量的实例讲解
2018/04/28 Python
pandas DataFrame 根据多列的值做判断,生成新的列值实例
2018/05/18 Python
详解如何用canvas画一个微笑的表情
2019/03/14 HTML / CSS
国际书籍零售商:Wordery
2017/11/01 全球购物
澳大利亚设计师服装在线:MISHA
2019/10/07 全球购物
医学生实习自我鉴定
2013/09/27 职场文书
零件设计自荐信范文
2013/11/27 职场文书
班子四风对照检查材料思想汇报
2014/09/29 职场文书
村党的群众路线教育实践活动工作总结
2014/10/25 职场文书
物业保安辞职信
2015/05/12 职场文书
2016年寒假生活小结
2015/10/10 职场文书
观看《信仰》心得体会
2016/01/15 职场文书