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 25 Javascript
javascript将浮点数转换成整数的三个方法
Jun 23 Javascript
jquery实现浮动在网页右下角的彩票开奖公告窗口代码
Sep 04 Javascript
JavaScript操作HTML元素和样式的方法详解
Oct 21 Javascript
checkbox批量选中,获取选中项的值的简单实例
Jun 28 Javascript
js给table赋值的实例代码
Oct 13 Javascript
Bootstrap基本组件学习笔记之分页(12)
Dec 08 Javascript
JS 组件系列之 bootstrap treegrid 组件封装过程
Apr 28 Javascript
微信小程序实现锚点定位楼层跳跃的实例
May 18 Javascript
vue小图标favicon不显示的解决方案
Sep 19 Javascript
vue实现点击当前标签高亮效果【推荐】
Jun 22 Javascript
jquery添加div实现消息聊天框
Feb 08 jQuery
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
curl实现站外采集的方法和技巧
2014/01/31 PHP
让ThinkPHP支持大小写url地址访问的方法
2014/10/31 PHP
js 多种变量定义(对象直接量,数组直接量和函数直接量)
2010/05/24 Javascript
详细介绍8款超实用JavaScript框架
2013/10/25 Javascript
XMLHttpRequest处理xml格式的返回数据(示例代码)
2013/11/21 Javascript
解析JavaScript中点号“.”的多义性
2013/12/02 Javascript
详解JavaScript语法对{}处理的坑爹之处
2014/06/05 Javascript
Jquery中find与each方法用法实例
2015/02/04 Javascript
js贪吃蛇游戏实现思路和源码
2016/04/14 Javascript
jquery获取点击控件的绝对位置简单实例
2016/10/13 Javascript
Angular页面间切换及传值的4种方法
2016/11/04 Javascript
微信小程序开发之圆形菜单 仿建行圆形菜单实例
2016/12/12 Javascript
微信JSAPI支付操作需要注意的细节
2017/01/10 Javascript
JS获取数组中出现次数最多及第二多元素的方法
2017/10/27 Javascript
解决nodejs的npm命令无反应的问题
2018/05/17 NodeJs
深入理解JS异步编程-Promise
2019/06/03 Javascript
vue改变循环遍历后的数据实例
2019/11/07 Javascript
v-slot和slot、slot-scope之间相互替换实例
2020/09/04 Javascript
Win10下python3.5和python2.7环境变量配置教程
2018/09/18 Python
浅析python的Lambda表达式
2019/02/27 Python
Python程序打包工具py2exe和PyInstaller详解
2019/06/28 Python
Django 使用easy_thumbnails压缩上传的图片方法
2019/07/26 Python
tensorflow入门:tfrecord 和tf.data.TFRecordDataset的使用
2020/01/20 Python
新手常见Python错误及异常解决处理方案
2020/06/18 Python
Python中实现一行拆多行和多行并一行的示例代码
2020/09/06 Python
Html5 Canvas实现图片标记、缩放、移动和保存历史状态功能 (附转换公式)
2020/03/18 HTML / CSS
世界领先的以旅馆为主的在线预订平台:Hostelworld
2016/10/09 全球购物
有趣的流行文化T恤、马克杯、手机壳和更多:Look Human
2019/01/07 全球购物
婚鞋、新娘鞋、礼服鞋、童鞋:Nina Shoes
2019/09/04 全球购物
授权委托书样本
2014/09/25 职场文书
停水通知
2015/04/16 职场文书
灵魂歌王观后感
2015/06/17 职场文书
创业计划书之牛肉汤快餐店
2019/10/08 职场文书
关于python中readlines函数的参数hint的相关知识总结
2021/06/24 Python
python unittest单元测试的步骤分析
2021/08/02 Python
Java 超详细讲解hashCode方法
2022/04/07 Java/Android