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)
江山如画的头像江山如画管理团队
上一篇 2018年2月17日 上午10:11
下一篇 2018年2月18日 上午9:05

99%的人还看了以下文章

  • css布局基础:定位练习1

    主要知识点: 1、5种常用定位:静态定位/相对定位/绝对定位/固定定位/吸附定位(磁铁定位) position:static/relative/absolute/fixed/sticky。 2、除静态定位外,都可以用left/top/bottom/right/z-index属性进行移动。 效果图: 效果说明:故宫文字段落设置背景色黑色透明,覆盖在图片底部。 …

    2020年4月4日
    6.1K0
  • 图片的title和alt属性区别

    图片的title和alt属性是初学者容易混淆的。125网页设计给大家介绍下title和alt属性的用法及区别

    网页制作 2020年2月23日
    5.6K0
  • 第15课:用z-index进行层次堆叠

    CSS可以处理高度、宽度、深度三个维度。在前面的课程中,我们已经了解了前两个维度。在本课中,我们将学习如何令不同元素具有层次。简言之,就是关于元素堆叠的次序问题。 为此,你可以为每个元素指定一个数字(z-index)。其原理是:数字较大的元素将叠加在数字较小的元素之上。 比方说,我们正在打扑克,并且拿了一手同花大顺。我们可以通过为各张牌设定一个z-index…

    2020年2月25日
    5.5K0
  • H5不支持frameset的三种解决方案:div+iframe、include、jQuery的onload方法加载页面

    frameset标签定义框架集,它用于组织多个窗口(框架)。每个框架存在一个独立的文档。 <frameset id=”frame” frameborder=”0″ framespacing=”0″ rows=”100,*” border=”false” scrolling=”yes”> <frame name=”topframe” scro…

    2020年1月1日
    10.8K0
  • 第5课:到目前为止学到了些什么?

    上一课我们已经学习了这些: <html> <head><title></title></head> <body> </body> </html> 网页标题(title)写在head(头部)里:<title>网页标题写在这里</title>。…

    2018年1月20日
    5.5K0
  • 如何为需要打印的网页设置单独的css样式

    项目开发:同一个页面,需要在浏览器中浏览是一种样式,而当要打印这个页面时候,又需要呈现另一种样式。 此时可以用link标签中的media属性解决此问题。 如下面这两个引用: <link href=”stylesheets/print.css” media=”print” rel=”stylesheet” type=”text/css” /> &l…

    2019年11月20日
    10.0K0

发表回复

登录后才能评论