Vue 箭头函数

Vue 箭头函数箭头函数1.1认识箭头函数传统定义函数:constaaa=function(parse){}对象字面量中定义函数:constobj={ bbb(parse){ }}Es6中箭头函数;constccc=()=>{}箭头函数的参数和返回值参数问题:放入两个参数:constobj=(num1,num2)=>{retu…

大家好,又见面了,我是你们的朋友全栈君。

箭头函数

1.1 认识箭头函数

传统定义函数:

const aaa = function(parse) { 
   
}

对象字面量中定义函数:

const obj = { 
   
	bbb(parse) { 
   
	}
}

Es6中箭头函数;

const ccc = ()=>{ 
   
}

箭头函数的参数和返回值

  • 参数问题:
    • 放入两个参数:
    const obj = (num1, num2) => { 
         
    return num1 + num2;
    }
    
    • 放入一个参数括号可以省略
    const power = num => { 
         
    	return num * num;
    }
    

函数内部

  • 函数中代码块有多行代码:
const aaa = () => {
	console.log('1');
	console.log('2');
}
  • 函数中只有一行代码可以省略return
const mul = (num1, num2) => num1 * num2;
console.log(mul);

箭头函数中this使用

  • 什么时候使用箭头函数
setTimeout(function(){ 
   
	console.log(this);
	}, 1000);
setTimeout(() => { 
   
	console.log(this);
	}, 1000);

结论:箭头函数没有this,上面箭头函数中的this是window中的this

const obj = { 
   
	aaa() { 
   
		setTimeout(() => { 
   
			console.log(this);
			}, 1000),
		setTimeout(function() { 
   
			console.log(this);
			}, 1000)
	}
}
console.log(obj.aaa())

结论:第一个this是obj中的this,第二个this是windows中的this。
高阶函数
1. filter过滤函数

const num = [2,5,9,8,7,4,1,2,5,6,22,55];
let newNum = num.filter(function(item) { 
   
	return item>10;
	})
console.log(newNum);

2. map过滤函数

const num = [2,5,9,8,7,4,1,2,5,6,22,55];
let newNum = num.map(function(item) { 
   
	return item * 10;
	})
console.log(newNum);

3. reduce过滤函数

const num = [2,5,9,8,7,4,1,2,5,6,22,55];
let newNum = num.reduce(function(prevalue, value) { 
   
	return value + prevalue;
	}, 0)
console.log(newNum);

三个综合使用

let n = num.filter(num => num > 50).map(num => num * 2).reduce((preValue,currentValue) => preValue + currentValue)
console.log(n);
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/149654.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • google收购youtube_谷歌股票收购youtube

    google收购youtube_谷歌股票收购youtube昨晚从网上看到Google这一大鳄收购GIPS的消息,我个人预计Google会将其整合到Android开发包里,以提高其语音视频通过的质量。Spirit的命运如何呢?难道会被Nokia和Intel联手整合到MeeGo中去吗?拭目以待!转载于:https://www.cnblogs.com/joiner/archive/2010/05/19/1738841.html…

    2022年10月30日
    0
  • 安卓监听屏幕触摸事件_android设置按钮点击事件

    安卓监听屏幕触摸事件_android设置按钮点击事件AndroidOnTouchListener触屏事件接口在修改后的工厂测试程序中,用到了关于触摸事件的获取,顺便学习关于触摸事件和触摸位置的知识,其方法如下:publicbooleanonTouchEvent(MotionEventevent){//获得触摸的坐标floatx=event.getX();floaty=event.getY();switch(event.ge…

    2022年9月3日
    10
  • PahoMQTT_mqtt安装

    PahoMQTT_mqtt安装1.安装npminstall paho-mqtt-s2.初始化constPahoMQTT=require(‘paho-mqtt’)constname=newDate().getTime()+’client’constclient=newPahoMQTT.Client(‘www.100link.net’,Number(61615),nam…

    2025年6月15日
    0
  • QT QTcpSocket「建议收藏」

    QT QTcpSocket「建议收藏」QTcpSocket类提供TCP套接字。TCP(传输控制协议)是一种可靠的、面向流的、面向连接的传输协议。它特别适合于数据的连续传输。QTcpSocket是QAbstractSocket的一个方便的子类,它允许您建立TCP连接和传输数据流。有关详细信息,请参见QAbstractSocket文档。注意:TCP套接字不能在QIODevice::Unbuffered模式下打开。请参见QTcpServer、QUdpSocket、QNetworkAccessManager、Fortune服务器示例、Fortu

    2022年9月10日
    0
  • JDK1.8下载与安装完整教程[通俗易懂]

    JDK1.8下载与安装完整教程[通俗易懂]JDK1.8下载与安装1.JDK下载首先在Oracle官网上下载jdk1.8.https://www.oracle.com/java/technologies/javase/javase-jdk8-downloads.html,如下图所示,找到jdk1.8,选择对应的版本,但是现在jdk已经更新到14.0了,所以大家可以根据自己的需要进行下载。此文以jdk1.8为例。如果下载的时候显示让你登录,你可以进行登录。如果不想下载可以私信我,可以将jdk执行文件进行分享,不过还是建议自己动手下载,熟悉过程

    2022年6月14日
    35
  • 作为一个死忠粉,我的 IntelliJ IDEA 一直都是这样来设置的,效果很棒!

    点击上方“全栈程序员社区”,星标公众号 重磅干货,第一时间送达 作者:judasn https://github.com/judasn/IntelliJ-IDEA-Tutorial…

    2021年6月25日
    81

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号