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


相关推荐

  • 树莓派3B+ 引脚图说明

    树莓派3B+ 引脚图说明如上图所示,我们可以很清楚的看到各个引脚的功能。例如我们想使用pwm引脚来控制舵机,则我们可以考虑使用其中的BCM18(PWM0)和BCM13(PWM1)。在使用wiringPi库时,我们定义的引脚即BCM引脚,例如:pwmPinV=18pwmPinH=13…

    2022年6月25日
    48
  • Java Web_基础加强

    Java Web_基础加强

    2021年5月19日
    115
  • 安卓强制恢复出厂recovery无命令_在recovery模式下无法恢复出厂设置

    安卓强制恢复出厂recovery无命令_在recovery模式下无法恢复出厂设置有时候我们在系统正常运行的时候,突然跑到recovery里面了,并且停在了如下界面:Can'tloadAndroidsystem.Yourdatamaybecorrupt.

    2022年8月5日
    77
  • java递归和迭代的区别

    java递归和迭代的区别出现栈的溢出.而迭代不会!  递归的基本概念:程序调用自身的编程技巧称为递归,是函数自己调用自己.一个函数在其定义中直接或间接调用自身的一种方法,它通常把一个大型的复杂的问题转化为一个与原问题相似的规模较小的问题来解决,可以极大的减少代码量.递归的能力在于用有限的语句来定义对象的无限集合.使用递归要注意的有两点:1)递归就是在过程或函数里面调用自身;2)在使用递归时,必须有一个明确的递归结束条件,称为递归出口. 递归分为两个阶段:1)递推:把复杂的问题的求解推到比原问

    2022年5月5日
    48
  • Java爱心代码_java怎么敲入代码

    Java爱心代码_java怎么敲入代码Java爱心代码来了

    2022年8月31日
    2
  • SAE J1939学习笔记(一)「建议收藏」

    SAE J1939学习笔记(一)「建议收藏」1.总线布局2.差分信号线J1939通讯传输的是一系列的“1”或“0”。 1代表在J1939(+)与J1939(-)之间是高电压差。0代表在J1939(+)与J1939(-)之间是低电压差250K波特率时,在J1939高、低导线间的电压从0到1每秒变化250K次是可能的。用一个高频示波器可以看到此电压变化。3.ISO标准对应–Layer…

    2022年5月7日
    42

发表回复

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

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