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的商品展示放大镜
Aug 07 Javascript
javascript将DOM节点添加到文档的方法实例分析
Aug 04 Javascript
基于javascript实现tab切换特效
Mar 29 Javascript
深入剖析JavaScript面向对象编程
Jul 12 Javascript
Javascript json object 与string 相互转换的简单实现
Sep 27 Javascript
正则 js分转元带千分符号详解
Mar 08 Javascript
javascript 初学教程及五子棋小程序的简单实现
Jul 04 Javascript
vue keep-alive请求数据的方法示例
May 16 Javascript
node命令行工具之实现项目工程自动初始化的标准流程
Aug 12 Javascript
微信小程序实现分享商品海报功能
Sep 30 Javascript
JS正则表达式常见函数与用法小结
Apr 13 Javascript
js实现搜索提示框效果
Sep 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
ThinkPHP多表联合查询的常用方法
2020/03/24 PHP
PHP+jQuery翻板抽奖功能实现
2015/10/19 PHP
php实现异步数据调用的方法
2015/12/24 PHP
Netbeans 8.2将支持PHP7 更精彩
2016/06/13 PHP
PHP使用PDO实现mysql防注入功能详解
2019/12/20 PHP
解决ExtJS在chrome或火狐中正常显示在ie中不显示的浏览器兼容问题
2013/01/11 Javascript
jquery的ajax和getJson跨域获取json数据的实现方法
2014/02/04 Javascript
jQuery原型属性和原型方法详解
2015/07/07 Javascript
Angular学习笔记之angular的$filter服务浅析
2016/11/12 Javascript
jQuery实现的仿百度,仿谷歌搜索下拉框效果示例
2016/12/30 Javascript
js实现一个简单的数字时钟效果
2017/03/29 Javascript
详解nodejs微信公众号开发——3.封装消息响应模块
2017/04/10 NodeJs
JS实现json对象数组按对象属性排序操作示例
2018/05/18 Javascript
vue之父子组件间通信实例讲解(props、$ref、$emit)
2018/05/22 Javascript
laravel-admin 与 vue 结合使用实例代码详解
2019/06/04 Javascript
vue自动化路由的实现代码
2019/09/30 Javascript
vue控制多行文字展开收起的实现示例
2019/10/11 Javascript
详解JavaScript作用域 闭包
2020/07/29 Javascript
python中argparse模块用法实例详解
2015/06/03 Python
分析python动态规划的递归、非递归实现
2018/03/04 Python
python编辑用户登入界面的实现代码
2018/07/16 Python
对Python多线程读写文件加锁的实例详解
2019/01/14 Python
python查看文件大小和文件夹内容的方法
2019/07/08 Python
python利用dlib获取人脸的68个landmark
2019/11/27 Python
深入浅析Python 命令行模块 Click
2020/03/11 Python
关于iframe跨域使用postMessage的实现
2019/10/29 HTML / CSS
英国最大的专业户外零售商:Mountain Warehouse
2018/06/06 全球购物
Under Armour安德玛荷兰官网:美国高端运动科技品牌
2019/07/10 全球购物
JPA的特点
2014/10/25 面试题
小学运动会报道稿
2014/10/04 职场文书
机关职员工作检讨书
2014/10/23 职场文书
《自己去吧》教学反思
2016/02/16 职场文书
OpenCV-Python实现图像平滑处理操作
2021/06/08 Python
Python实现视频中添加音频工具详解
2021/12/06 Python
详解Mysql数据库平滑扩容解决高并发和大数据量问题
2022/05/25 MySQL
MySQL count(*)统计总数问题汇总
2022/09/23 MySQL