ES6箭头函数和扩展实例分析_javascript技巧

来源:脚本之家  责任编辑:小易  

我个人觉得,非常好用,主要有一下几点吧:提高开发效率,减少体力耀东使用剪头函数不需要敲完整的 function 关键字,同时如果只有行 return 语句的函数,还可以进一步简写:例如 要定义一个 trim 函数,不使用箭头函数:const trim=function(str){return trim.replace(/^\\s+|\\s+$/g,'');};使用箭头函数:const trim=str=>trim.replace(/^\\s+|\\s+$/g,'');2.在函数内部不需要自己的 this 指针的时候,非常方便,因为箭头函数作用域内没有 this例如下面不使用箭头函数的代码,要通过将 this 赋值给 me,调用 me 来调用 Obj:const Obj={text:'ABC',replace:function(arr){var me=this;arr.forEach(function(item){return me.text;});}};使用箭头函数:const Obj={text:'ABC',replace:function(arr){arr.forEach(item=>this.text);}};3.还有一点是 箭头函数没有 arguments 变量,在某些时候也可以带来方便,和上面差不多www.zgxue.com防采集请勿采集本网。

本文实例讲述了ES6箭头函数和扩展。分享给大家供大家参考,具体如下:

es6中箭头函数中的this指向的副作用域对象 1、箭头函数中的this是在定义函数的时候绑定,而不是在执行函数的时候绑定 2、所谓的定义时候绑定,就是this是继承自父执行上下文!如在vue中已下代码中的this指向的vue实例而不是Window setInterval((

1.默认值

箭头函数传参数和普通的函数没有太大的差别。正常传就可以了。 const onButtonPress = ( params ) => { // Function body}有一点不同就是箭头函数如果只有一个参数,可以省略括号: const onButtonPress = params => { // Function body}如果箭

在ES6中给我们增加了默认值的操作相关代码如下:

普通函数的定义,用箭头函数表示,

function add(a,b=1){ return a+b;}console.log(add(1));

我个人觉得,非常好用,主要有一下几点吧: 提高开发效率,减少体力耀东 使用剪头函数不需要敲完整的 function 关键字, 同时如果只有行 return 语句的函数,还可以进一步简写: 例如 要定义一个 trim 函数,不使用箭头函数

可以看到现在只需要传递一个参数也是可以正常运行的。

箭头函数有作用域(词法作用域),词法作用域简单来讲就是,一切变量(包括this)都根据作用域链来查找。 箭头函数中的this因为绑定了词法作用域,所以始终指向自身外的第一个this(由于自身没有声明this,所以会去作用域链上找this),也就是始

输出结果为: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));

在控制台可看到异常为:

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.jb51.net/code/HtmlJsRun测试上述代码运行效果。

更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结

希望本文所述对大家JavaScript程序设计有所帮助。

想了一下,大概有以下几种情况吧:不支持箭头函数的环境目前支持箭头函数的环境毕竟还不多,仅 Safari、Chrome、Firefox 较新版本,Microsoft Edge、NodeJS 4.x、NodeJS 6.x IE 全系列都不支持。在函数里面需要使用 this 变量的时候箭头函数中没有自己的 this 变量,在箭头函数内部调用的 this 实际上是函数作用域之外的 this,所以如果对 this 有调用需求,就不可以用箭头函数,比如给 dom 绑定事件:document.body.addEventListener('click',function(){this.setAttribute('clicked',1);这个 this 指向 document.body},false);document.body.addEventListener('click',()=>{console.log(this);this 指向 window},false);3.在函数里面需要调用内部 arguments 的时候箭头函数没有自己的 arguments 变量,所以如果函数内部要调用 arguments 变量,不可以使用箭头函数。但是也可以通过一些其他方式解决,比如:const foo=(.args)=>{console.log(args);args 和 function 函数的 arguments 类似};内容来自www.zgxue.com请勿采集。


  • 本文相关:
  • es6中箭头函数的定义与调用方式详解
  • javascript es6中箭头函数注意细节小结
  • es6中的箭头函数实例详解
  • 关于es6箭头函数中的this问题
  • 详解javascript es6中的箭头函数(arrow functions)
  • 深入浅出es6新特性之函数默认参数和箭头函数
  • javascript es6箭头函数使用指南
  • es6标准 arrow function(箭头函数=>)
  • es6函数之箭头函数用法实例详解
  • es6新特性之函数的扩展实例详解
  • es6扩展运算符和rest运算符用法实例分析
  • es6数组之扩展运算符操作实例分析
  • js中mouseover和mouseout多次触发问题如何解决
  • 微信小程序自定义toast的实现代码
  • 深入理解js中的substr和substring
  • javascript中解析json数据的三种方法
  • 用户代理字符串useragent可实现的四个识别
  • js从外部获取图片的实现方法
  • js内置对象 学习笔记
  • js html5 音乐天气播放器(ajax获取天气信息)
  • javascript实现简单计算器功能
  • 环形加载进度条封装(vue插件版和原生js版)
  • 什么时候不该使用es6箭头函数
  • ES6的箭头函数真那么好用吗
  • ES6的箭头函数的this指向
  • es6新特性的箭头函数怎么转化为普通函数
  • es6中箭头函数this指向理解?
  • 关于ES6 写法问题,我想请教js 这样的箭头函数怎么...
  • es6 箭头函数和function的区别
  • es6 箭头函数和function的区别
  • es6中箭头函数有无作用域,this指向,能否使用argu...
  • nodejs支持es6的箭头函数吗
  • 网站首页网页制作脚本下载服务器操作系统网站运营平面设计媒体动画电脑基础硬件教程网络安全基础知识javascript类库表单特效广告代码网页特效黑客性质javascript技巧domnode.jsjs其它首页javascriptjavascript面向对象入门教程javascript错误与调试技巧总结javascript数据结构与算法技巧总结javascript遍历算法与技巧总结javascript数学运算用法总结es6中箭头函数的定义与调用方式详解javascript es6中箭头函数注意细节小结es6中的箭头函数实例详解关于es6箭头函数中的this问题详解javascript es6中的箭头函数(arrow functions)深入浅出es6新特性之函数默认参数和箭头函数javascript es6箭头函数使用指南es6标准 arrow function(箭头函数=>)es6函数之箭头函数用法实例详解es6新特性之函数的扩展实例详解es6扩展运算符和rest运算符用法实例分析es6数组之扩展运算符操作实例分析js中mouseover和mouseout多次触发问题如何解决微信小程序自定义toast的实现代码深入理解js中的substr和substringjavascript中解析json数据的三种方法用户代理字符串useragent可实现的四个识别js从外部获取图片的实现方法js内置对象 学习笔记js html5 音乐天气播放器(ajax获取天气信息)javascript实现简单计算器功能环形加载进度条封装(vue插件版和原生js版)js刷新页面方法大全js中settimeout()的用法详解js截取字符串常用方法详细整理js页面跳转常用的几种方式js打开新窗口的2种方式js数组与字符串的相互转换方法js设置cookie、读取cookie、删除js删除数组里的某个元素方法js 将json字符串转换为json对象的javascript深入理解js闭包bootstrap3 dialog 更强大、更灵活的模态解决js中window.open弹出的是上次的缓存页使用js 插件qrcode.js生成二维码功能pc加载更多功能和移动端下拉刷新加载数据在小程序中使用腾讯视频插件播放教程视频全面解析bootstrap表单使用方法(表单样式js实现两点之间画线的方法bootstrap对话框使用实例讲解javascript 变量,数据类型基础实例详解【js实现评价的星星功能
    免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved