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 相关文章推荐
用js实现手把手教你月入万刀(转贴)
Nov 07 Javascript
JavaScript 更严格的相等 [译]
Sep 20 Javascript
Jquery中给animation加更多的运作效果实例
Sep 05 Javascript
javascript笛卡尔积算法实现方法
Apr 08 Javascript
javascript正则表达式模糊匹配IP地址功能示例
Jan 06 Javascript
javascript实现Java中的Map对象功能的实例详解
Aug 21 Javascript
vue中axios解决跨域问题和拦截器的使用方法
Mar 07 Javascript
node链接mongodb数据库的方法详解【阿里云服务器环境ubuntu】
Mar 07 Javascript
使用原生js编写一个简单的框选功能方法
May 13 Javascript
JS创建自定义对象的六种方法总结
Dec 15 Javascript
EXTJS7实现点击拖拉选择文本
Dec 17 Javascript
7个你应该知道的JS原生错误类型
Apr 29 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采用模块和操作分析
2011/04/18 PHP
PHP中几种常见的超时处理全面总结
2012/09/11 PHP
解析php中curl_multi的应用
2013/07/17 PHP
php解析json数据实例
2014/08/19 PHP
深入理解PHP内核(一)
2015/11/10 PHP
php写入txt乱码的解决方法
2019/09/17 PHP
phpcmsv9.0任意文件上传漏洞解析
2020/10/20 PHP
JavaScript asp.net 获取当前超链接中的文本
2009/04/14 Javascript
跟着Jquery API学Jquery之一 选择器
2010/04/07 Javascript
jQuery之浮动窗口实现代码(两种方法)
2010/09/08 Javascript
JS定时刷新页面及跳转页面的方法
2013/07/04 Javascript
jquery实现input框获取焦点的简单实例
2017/01/26 Javascript
Node.js读取文件内容示例
2017/03/07 Javascript
Javascript实现页面滚动时导航智能定位
2017/05/06 Javascript
JavaScript之事件委托实例(附原生js和jQuery代码)
2017/07/22 jQuery
Node.js Buffer用法解读
2018/05/18 Javascript
搭建Vue从Vue-cli到router路由护卫的实现
2019/11/14 Javascript
创建nuxt.js项目流程图解
2020/03/13 Javascript
对Python3使运行暂停的方法详解
2019/02/18 Python
如何基于Python + requests实现发送HTTP请求
2020/01/13 Python
tensorflow使用range_input_producer多线程读取数据实例
2020/01/20 Python
Python3 filecmp模块测试比较文件原理解析
2020/03/23 Python
Python 3.9的到来到底是意味着什么
2020/10/14 Python
python3 通过 pybind11 使用Eigen加速代码的步骤详解
2020/12/07 Python
机械绘图员岗位职责
2013/11/19 职场文书
财务工作者先进事迹材料
2014/01/17 职场文书
2014村务公开实施方案
2014/02/25 职场文书
高校教师自荐信范文
2014/03/13 职场文书
ktv筹备计划书
2014/05/03 职场文书
基层党支部公开承诺书
2014/05/29 职场文书
党员教师一句话承诺
2014/05/30 职场文书
暑期政治学习心得体会
2014/09/02 职场文书
二年级学生期末评语
2014/12/26 职场文书
HR必备:销售经理聘用合同范本
2019/08/21 职场文书
Python可视化学习之matplotlib内置单颜色
2022/02/24 Python
台积电称即便经济低迷也没有降价的计划
2022/04/21 数码科技