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 相关文章推荐
Dom在ajax技术中的作用说明
Oct 25 Javascript
jQuery之end()和pushStack()使用介绍
Feb 07 Javascript
js关闭浏览器窗口及检查浏览器关闭事件
Sep 03 Javascript
使用JQuery快速实现Tab的AJAX动态载入(实例讲解)
Dec 11 Javascript
jQuery如何获取同一个类标签的所有值(默认无法获取)
Sep 25 Javascript
如何用jQuery实现ASP.NET GridView折叠伸展效果
Sep 26 Javascript
picLazyLoad 实现图片延时加载(包含背景图片)
Jul 21 Javascript
js中的触发事件对象event.srcElement与event.target详解
Mar 15 Javascript
使用vue-cli4.0快速搭建一个项目的方法步骤
Dec 04 Javascript
vue框架中props的typescript用法详解
Feb 17 Javascript
JS数组的高级使用方法示例小结
Mar 14 Javascript
谈谈JavaScript令人迷惑的==与+
Aug 31 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/04/20 PHP
php获取文件内容最后一行示例
2014/01/09 PHP
php set_include_path函数设置 include_path 配置选项
2016/10/30 PHP
Laravel框架分页实现方法分析
2018/06/12 PHP
[全兼容哦]--实用、简洁、炫酷的页面转入效果loing
2007/05/07 Javascript
js关闭当前页面(窗口)的几种方式总结
2013/03/05 Javascript
NodeJS制作爬虫全过程
2014/12/22 NodeJs
根据配置文件加载js依赖模块
2014/12/29 Javascript
原生javascript实现图片按钮切换
2015/01/12 Javascript
JavaScript代码实现禁止右键、禁选择、禁粘贴、禁shift、禁ctrl、禁alt
2015/11/17 Javascript
jQuery插件实现无缝滚动特效
2015/11/24 Javascript
基于JavaScript实现瀑布流布局(二)
2016/01/26 Javascript
Javascript技术栈中的四种依赖注入小结
2016/02/27 Javascript
Bootstrap Paginator分页插件与ajax相结合实现动态无刷新分页效果
2016/05/27 Javascript
js判断出两个字符串最大子串的函数实现方法
2016/11/01 Javascript
从零学习node.js之express入门(六)
2017/02/25 Javascript
10行原生JS实现文字无缝滚动(超简单)
2018/01/02 Javascript
详解angular路由高亮之RouterLinkActive
2018/04/28 Javascript
JS中使用cavas截图网页并解决跨域及模糊问题
2018/11/13 Javascript
如何在Angular应用中创建包含组件方法示例
2019/03/23 Javascript
tornado框架blog模块分析与使用
2013/11/21 Python
Python中实现的RC4算法
2015/02/14 Python
教你用python3根据关键词爬取百度百科的内容
2016/08/18 Python
Python数据结构与算法之图的最短路径(Dijkstra算法)完整实例
2017/12/12 Python
详解如何将python3.6软件的py文件打包成exe程序
2018/10/09 Python
Python3多线程基础知识点
2019/02/19 Python
python base64库给用户名或密码加密的流程
2020/01/02 Python
Python3基本输入与输出操作实例分析
2020/02/14 Python
python模拟点击网页按钮实现方法
2020/02/25 Python
jupyter notebook 实现matplotlib图动态刷新
2020/04/22 Python
领先的钻石和订婚戒指零售商:Diamonds-USA
2016/12/11 全球购物
英国时尚首饰品牌:Missoma
2020/06/29 全球购物
摄影实习自我鉴定
2013/09/20 职场文书
制药工程专业应届生求职信
2013/09/24 职场文书
建筑设计学生的自我评价
2014/01/16 职场文书
新闻人物通讯稿
2014/10/09 职场文书