6个实例教你学会JavaScript的箭头函数

在看别人JS代码时,经常会看到一些类似下面代码的箭头函数,如果你没有接触过箭头函数,估计要看晕了,这些都是什么东西?今天中国网页设计通过6个实例,教给大家掌握箭头函数的语法及使用。

在看别人JS代码时,经常会看到一些类似下面代码的箭头函数

var demo = () => {
}

如果你没有接触过箭头函数,估计要看晕了,这些都是什么东西?

今天中国网页设计通过6个实例,教给大家掌握箭头函数的语法及使用。

一.js箭头函数语法

1.没有参数时

var demo = function(){
}

相当于:

var demo = () => {
}

2.只有一个参数时

var demo = function(a){
return a;
}

相当于:

var demo = a => a

3.多个参数需要用到小括号,参数间逗号间隔

var demo = function(a,b){
return a+b;
}

相当于:

var demo = (a,b) => a+b

4 . 函数体多条语句需要用到大括号

var demo = function(a,b){
if(a>b){
    return a-b;
} else{
    return b-a;
  }
}

相当于:

var demo = (a,b) =>{
if(a>b){
    return a-b;
} else{
    return b-a;
  }
}

5 . 返回对象时需要用小括号包起来,因为大括号被占用解释为代码块了

var demo = (name,age) =>{
return ({
    name: name,
    age: age
   })
}

6 .作为数组排序回调

var arr = [1, 9 , 2, 4, 3, 8].sort((a, b) => {
 if (a - b > 0 ) {
  return 1
 } else {
  return -1
 }
})

以上就是为大家讲解的箭头函数的语法及使用,相信通过以上实例,大家以后再看到箭头函数应该能看懂了!

本文来自投稿,不代表125jz立场,如若转载,请注明出处:http://www.125jz.com/1313.html

(1)
江山如画的头像江山如画管理团队
在网页右侧漂浮的QQ在线客服代码,QQ在线状态代码(四种样式)
上一篇 2018年2月17日 上午10:11
如何开始创业,准备好自己的创业第一步
下一篇 2018年2月18日 上午9:05

99%的人还看了以下文章

  • css布局基础:浮动和清除浮动练习2

    主要知识点: 1、浮动:让元素脱离标准流,从而实现灵活的布局效果。 2、浮动只能左右,不能上下。float:left/right/none。 3、子元素浮动会造成父元素高度塌陷,清除浮动的3种方法: 方法1:通过overflow属性 方法2:通过clear属性 方法3:通过伪元素选择器(推荐) 效果图: 参考: <header> <img …

    2020年4月4日
    5.2K0
  • 第11课:表格的高级特性

    表格还有哪些相关属性? colspan和rowspan这两个属性用于创建特殊的表格。colspan是“column span(跨列)”的缩写。colspan属性用在<td>标签中,用来指定单元格横向跨越的列数: 例1: <table border=”1″> <tr><td colspan=”3″>单元格1&lt…

    2018年1月19日
    8.8K0
  • 跟永哥学HTML5(4):正确使用HTML5的header、hgroup和section

    在上一章HTML5新增语义化元素的使用中我们讲解了HTML新增的标签,并举例给出如何使用。但真正从HTML4转变到HTML5编程,并不是那么简单的事情,很多初学者没有真正了解这些标签,或错误使用HTML5的标签。这节课就给大家讲解常见的HTML5标签错误使用写法,帮助大家学会正确使用HTML5的header、hgroup和section。 1、只在需要的时候…

    2018年2月3日
    8.1K0
  • 跟永哥学HTML5(6):H5表单及表单验证

    表单在网页中主要负责数据采集功能。HTML 5一个令人兴奋的发展领域是新的Web表单。
    在今天的课程中你会看到浏览器会验证所需的字段,数据类型,如电子邮件、网址和任何模式,而不使用任何JavaScript。

    2018年2月27日
    11.6K0
  • 0基础学CSS

    本CSS教程能够让你在数小时内入门CSS,要求你有基本的HTML经验。

    2020年2月22日
    9.9K0
  • Marquee标签制作滚动公告、新闻列表

    效果演示 《Marquee标签实现跑马灯、滚动公告、通知效果》 Marquee标签制作滚动公告、新闻列表 <!doctype html> <html> <head> <meta charset=”utf-8″> <title>marquee实现的滚动公告|www.125jz.com</titl…

    2019年2月28日
    14.8K0

发表回复

登录后才能评论