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 tools 系列 scrollable学习
Sep 06 Javascript
JavaScript判断窗口是否最小化的代码(跨浏览器)
Aug 01 Javascript
Js获取事件对象代码
Aug 05 Javascript
Node.js实战 建立简单的Web服务器
Mar 08 Javascript
jQuery JSON实现无刷新三级联动实例探讨
May 28 Javascript
通过JQuery将DIV的滚动条滚动到指定的位置方便自动定位
May 05 Javascript
使用JavaScript链式编程实现模拟Jquery函数
Dec 21 Javascript
JavaScript requestAnimationFrame动画详解
Sep 14 Javascript
微信小程序云开发实现数据添加、查询和分页
May 17 Javascript
js中的this的指向问题详解
Aug 29 Javascript
js实现图片上传到服务器和回显
Jan 19 Javascript
vue 弹出遮罩层样式实例
Jul 22 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
Laravel 前端资源配置教程
2019/10/18 PHP
JS的IE和Firefox兼容性集锦
2006/12/11 Javascript
用javascript删除当前行,添加行(示例代码)
2013/11/25 Javascript
angularjs定时任务的设置与清除示例
2017/06/02 Javascript
javaScript中封装的各种写法示例(推荐)
2017/07/03 Javascript
vue-baidu-map 进入页面自动定位的解决方案(推荐)
2018/04/28 Javascript
vuejs选中当前样式active的实例
2018/08/22 Javascript
react 父子组件之间通讯props
2018/09/08 Javascript
Vue项目打包部署到apache服务器的方法步骤
2021/02/01 Vue.js
[06:20]2015国际邀请赛第三日top10
2015/08/08 DOTA
使用Python抓取模板之家的CSS模板
2015/03/16 Python
Python的Bottle框架中实现最基本的get和post的方法的教程
2015/04/30 Python
Python基于smtplib实现异步发送邮件服务
2015/05/28 Python
KMP算法精解及其Python版的代码示例
2016/06/01 Python
Python正则表达式使用经典实例
2016/06/21 Python
Pycharm学习教程(4) Python解释器的相关配置
2017/05/03 Python
python对视频画框标记后保存的方法
2018/12/07 Python
Python实现繁体中文与简体中文相互转换的方法示例
2018/12/18 Python
python实现websocket的客户端压力测试
2019/06/25 Python
python实现程序重启和系统重启方式
2020/04/16 Python
python 通过exifread读取照片信息
2020/12/24 Python
奥地利网上书店:Weltbild
2017/07/14 全球购物
澳大利亚领先的武术用品和健身器材供应商:SMAI
2019/03/24 全球购物
集世界奢侈品和设计师品牌的意大利精品买手店:Tessabit
2019/08/17 全球购物
物流专业大学生的自我鉴定
2013/11/13 职场文书
个人自我评价分享
2013/12/20 职场文书
幼儿园开学家长寄语
2014/01/19 职场文书
教师求职信范文
2014/05/24 职场文书
建筑安全责任书范本
2014/07/24 职场文书
新闻人物通讯稿
2014/10/09 职场文书
公司年夜饭通知
2015/04/25 职场文书
画展观后感
2015/06/17 职场文书
2016参观监狱警示教育活动心得体会
2016/01/15 职场文书
小学作文之描写天气
2019/08/15 职场文书
如何利用map实现Nginx允许多个域名跨域
2021/03/31 Servers
MySQL学习之基础命令实操总结
2022/03/19 MySQL