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


相关推荐

  • qml demo分析(threading-线程任务)

    qml demo分析(threading-线程任务)

    2022年3月2日
    48
  • 中专计算机应用专业简历模板,2016计算机应用专业个人简历模板「建议收藏」

    中专计算机应用专业简历模板,2016计算机应用专业个人简历模板「建议收藏」《2016计算机应用专业个人简历模板》由会员分享,可在线阅读,更多相关《2016计算机应用专业个人简历模板(7页珍藏版)》请在人人文库网上搜索。1、2016计算机应用专业个人简历模板随着互联网的发展与普遍,互联网行业的专业人才颇受欢迎,其就业率也十分可观,下面是fwdq为大家搜集整理的计算机应用应届生个人简历,欢迎阅读。计算机应用专业个人简历模板(一)姓名:目前所在:广…

    2022年5月9日
    38
  • mysql语句大全及例子_SQL语句大全实例教程.pdf[通俗易懂]

    mysql语句大全及例子_SQL语句大全实例教程.pdf[通俗易懂]SQL语句大全实例教程无论您是一位SQL的新手,或是一位只是需要对SQL复习一下的资料仓储业界老将,您就来对地方了。这个SQL教材网站列出常用的SQL指令,包含以下几个部分:♦SQL指令:SQL如何被用来储存、读取、以及处理数据库之中的资料。♦表格处理:SQL如何被用来处理数据库中的表格。♦进阶SQL:介绍SQL进阶概念,以…

    2022年5月20日
    36
  • springcloud原理详解_数据库底层实现原理

    springcloud原理详解_数据库底层实现原理天天喊着微服务,微服务的,微服务怎么牛逼,微服务有多强大,学好微服务三天不用吃饭的那种?那我心里不禁一紧微服务到底是个啥?往下看!总有东西有点帮助!先来个简单的介绍吧!SpringCloud框架针对这个架构图我分层介绍一下:1、是web服务器的选型,这个我选择的是nginx+keepalived,haproxy也是一个选择,但是haproxy在反向代理处理跨域访问的时候问题很多…

    2025年9月6日
    4
  • JavaWeb之HttpSession

    JavaWeb之HttpSessionHttpSession一、概述HttpSession是由JavaWeb提供的,用来会话跟踪的类。session是服务器端对象,保存在服务器端!!!HttpSession是Servlet三大域对象之一,所以它也有setAttribute()、getAttribute()、removeAttribute()方法。HttpSession底层依赖Cookie,或是URL重写!二、HttpSe…

    2022年7月12日
    21
  • 模2除法(CRC校验码计算)_crc校验模二算法

    模2除法(CRC校验码计算)_crc校验模二算法鉴于网上的讲解自己好不容易才看懂…所以自己整理了一下,也方便大家能够理解如果有不对或者不准确的地方,恳请大家指出…模2加减法模2除法需要用到模2加减法,关于模2加减法,其实就是异或操作,规则如下://不需要考虑进位和借位0±0=01±1=00±1=11±0=1例:1101±1001=0100计算如下:…

    2025年8月20日
    3

发表回复

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

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