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%的人还看了以下文章

  • javascript-快速掌握DOM技术

    Javascript的组成: 1.  js的语法(核心)。 2. DOM(文本对象模型) :用于操作HTML文档的应用编程接口。 DOM的出现使得动态HTML(DHTML)得以实现,可以不用重新加载页面而改变网页的外观和内容。 DOM的级别(版本):DOM1,DOM2,DOM3 3. BOM(浏览器模型)  BOM是Browser Object Model的…

    2018年7月17日
    3.4K0
  • iframe中子页和父页面如何传值

    本文介绍了,父页面father.html和子页面son.html之间如何传值,子页面如何调用父页面中的函数等操作

    2021年11月30日
    5.0K0
  • 第11课:表格的高级特性

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

    2018年1月19日
    5.2K0
  • css布局基础:浮动和清除浮动练习2

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

    2020年4月4日
    3.4K0
  • CSS3动画:@keyframes animation 案例——制作滚动公告

    滚动公告的制作请参阅:Marquee标签实现跑马灯、滚动公告、通知效果 今天我们使用CSS3的@keyframes和animation 制作滚动文字公告。 @keyframes规则 @keyframes 规则用于创建动画。在@keyframes 中规定某项 CSS 样式,就能创建由当前样式逐渐改为新样式的动画效果。 注释:当动画完成后,动画的状态会回到初始状…

    2019年2月26日
    9.5K0
  • 跟永哥学HTML5(3):HTML5新增语义化元素的使用

    上节课我们讲了html5与html4的区别,Html5对语法进行了简化,一个htm5文档结构代码如下: <!doctype html> <html> <head> <meta charset=”utf-8″> <title>无标题文档</title> </head> <…

    2018年1月26日
    12.5K1

发表回复

登录后才能评论