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 相关文章推荐
CSS常用网站布局实例
Apr 03 Javascript
js调用flash的效果代码
Apr 26 Javascript
将list转换为json失败的原因
Dec 17 Javascript
浅析jquery的js图表组件highcharts
Mar 06 Javascript
jquery实现鼠标滑过小图时显示大图的方法
Jan 14 Javascript
JavaScript第一篇之实现按钮全选、功能
Aug 21 Javascript
JS 拦截全局ajax请求实例解析
Nov 29 Javascript
canvas实现探照灯效果
Feb 07 Javascript
vue 全选与反选的实现方法(无Bug 新手看过来)
Feb 09 Javascript
对angular 实时更新模板视图的方法$apply详解
Oct 09 Javascript
jquery中attr、prop、data区别与用法分析
Sep 25 jQuery
详解Vue后台管理系统开发日常总结(组件PageHeader)
Nov 01 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
全国FM电台频率大全 - 14 江西省
2020/03/11 无线电
PHP Mysql编程之高级技巧
2008/08/27 PHP
php object转数组示例
2014/01/15 PHP
php use和include区别总结
2019/10/13 PHP
JavaScript 继承详解 第一篇
2009/08/30 Javascript
picChange 图片切换特效的函数代码
2010/05/06 Javascript
Jquery通过Ajax方式来提交Form表单的具体实现
2013/11/07 Javascript
Javascript实现带关闭按钮的网页漂浮广告代码
2014/01/12 Javascript
JS 实现列表与多选框选择附预览动画
2014/10/29 Javascript
使用JavaScript开发IE浏览器本地插件实例
2015/02/18 Javascript
js文字横向滚动特效
2015/11/11 Javascript
15个常用的jquery代码片段
2015/12/19 Javascript
如何解决easyui自定义标签 datagrid edit combobox 手动输入保存不上
2015/12/26 Javascript
jQuery实现6位数字密码输入框
2016/12/29 Javascript
原生js仿淘宝网商品放大镜效果
2017/02/28 Javascript
原生js 封装get ,post, delete 请求的实例
2017/08/11 Javascript
vue单页面打包文件大?首次加载慢?nginx带你飞,从7.5M到1.3M蜕变过程(推荐)
2018/01/16 Javascript
Vue2.0实现组件数据的双向绑定问题
2018/03/06 Javascript
JavaScript组合模式---引入案例分析
2020/05/23 Javascript
[42:32]完美世界DOTA2联赛PWL S2 LBZS vs FTD.C 第二场 11.27
2020/12/01 DOTA
Python库urllib与urllib2主要区别分析
2014/07/13 Python
python使用WMI检测windows系统信息、硬盘信息、网卡信息的方法
2015/05/15 Python
Python中操作符重载用法分析
2016/04/29 Python
Python图形绘制操作之正弦曲线实现方法分析
2017/12/25 Python
理论讲解python多进程并发编程
2018/02/09 Python
python程序 创建多线程过程详解
2019/09/23 Python
Python中断多重循环的几种方式详解
2020/02/10 Python
六道php面试题附答案
2014/06/05 面试题
班组长安全工作职责
2014/07/15 职场文书
股东出资证明书范例
2014/10/04 职场文书
2015年加油站工作总结
2015/05/13 职场文书
单位同意报考证明
2015/06/17 职场文书
党课主持词大全
2015/06/30 职场文书
关于运动会的广播稿
2015/08/19 职场文书
Python数据分析之绘图和可视化详解
2021/06/02 Python
Redis实现主从复制方式(Master&Slave)
2022/06/21 Redis