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)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • tomcat部署war包后访问项目报错404问题[通俗易懂]

    tomcat部署war包后访问项目报错404问题[通俗易懂]首先查看log日志,根据报错去查找问题。日志在你的tomcat文件夹下的logs文件夹里面。我把tomcat布置到服务器上之后并没有把我先前跨域更改的lib中的jar包再次更改导致了一直无法访问项目,查看log之后发现是这个问题就再次对服务器上的项目进行了跨域设置就可以访问了。…

    2022年5月8日
    472
  • python分割字符串输出_python字符串分割「建议收藏」

    python分割字符串输出_python字符串分割「建议收藏」内置split()函数str.split(sep=None,maxsplit=-1)sep为自定义分割符,maxsplit为最大分割次数,默认值-1进行全部分割注意以下区别:str.split()以空格分割,包括连续空格str.split(”)同样以空格分割,但是不能识别连续空格,会返回两空格之间的空字符串python3docre模块的split()函数re.split(patte…

    2022年5月25日
    63
  • python一行实现局域网内传输文件[通俗易懂]

    python一行实现局域网内传输文件[通俗易懂]python一行实现局域网内传输文件熟悉python的大家伙,对于这个应该不陌生,这个功能我一直都在使用,今天想记录一下其实时想抛砖引玉。缘由记得那是刚开始学习python,对任何精简而强大的功能都感到好奇。从任何平台,只要看到关于python的文章,就会点进去进行深度阅读。久而久之,的确学习到了一些小技巧,或言之投机取巧吧。比如,这个用python来实现局域网内文件传输,就是在用了坚果pr…

    2022年6月4日
    33
  • 常用的Java基本代码汇总

    常用的Java基本代码汇总1.字符串和整型的相互转换Stringa=String.valueOf(2);inti=Integer.parseInt(a);2.向文件末尾添加内容BufferedWriterout=null;try{out=newBufferedWriter(newFileWriter(“filename”,true));out.write(“iam

    2022年7月8日
    21
  • mysqlnd cannot connect to MySQL 4.1+ using the …

    mysqlnd cannot connect to MySQL 4.1+ using the …

    2021年8月20日
    51
  • 2021-09-27 网安实验-取证分析-数字取证之foremost

    2021-09-27 网安实验-取证分析-数字取证之foremostForemost的使用关于foremostForemost是基于文件开始格式,文件结束标志和内部数据结构进行恢复文件的程序Foremost参数说明$foremost[-v|-V|-h|-T|-Q|-q|-a|-w-d][-t][-s][-k][-b][-c][-o][-i<file]-V-显示版权信息并退出-t-指定文件类型.(-tjpeg,pdf…)-d-打开间接块检测(针对UNIX文件系统)-i-指定输入文件(默认为标准输

    2025年8月1日
    2

发表回复

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

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