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


相关推荐

  • web渗透测试—-33、HttpOnly[通俗易懂]

    web渗透测试—-33、HttpOnly[通俗易懂]HttpOnly是微软公司的InternetExplorer6SP1引入的一项新特性。这个特性为cookie提供了一个新属性,用以阻止客户端脚本访问Cookie,至今已经称为一个标准,几乎所有的浏览器都会支持HttpOnly。下面示例显示了HTTP响应标头中HttpOnly使用的语法:Set-Cookie:<name>=<value>[;<Max-Age>=<age>]`[;expires=<date>][;domain=&lt

    2022年6月30日
    41
  • Object数组转String数组

    Object数组转String数组1、System.arraycopy把一个数组中某一段字节数据放到另一个数组中//src:源数组;srcPos:源数组要复制的起始位置;dest:目的数组;destPos:目的数组放置的起始位置;length:复制的长度.publicstaticvoidarraycopy(Objectsrc,intsrcPos,Objectdest,intdestPos,intlength)Object[]src={“A”,”B”,”C”};String[]dest=

    2022年5月4日
    43
  • android之R cannot be resolved to a variable

    刚才又遇到了R cannot be resolved to a variable的问题,就翻了翻网上的资料,调理的整理了一下1. 检查Android 的SDK是否丢失需要重新下载,检查build path,把需要导入的JAR包确认都导入成功2. 确保class没有import Android.R,注意是不能有Android.R,可以有其他R文件,比如你自己的包;3. 错误cla

    2022年3月9日
    64
  • 单例模式的要点(写出一个单例模式)

    目录一、单例模式的定义和应用场景(一)定义及基本要点(二)应用场景二、饿汉式单例模式(一)基本代码展示分析(二)基本分析和建议三、懒汉式单例模式(双重检查锁)(一)基本代码展示分析(二)基本分析和建议四、静态内部类实现单例模式(一)基本代码展示分析(二)基本分析和建议五、注册式单例模式(一)枚举式单例模式代码及分析:(EffectiveJa…

    2022年4月18日
    132
  • 锐捷交换机基础配置命令

    锐捷交换机基础配置命令ip地址:ip地址就像你的名字,在你所在的地方管用。mac地址:就像你的身份证,在所有的地方都管用。enable—-进入特权模式config—-进入全局配置模式hostnameruijie2021—-更改设备名称vlan10—-创建vlan10(vlan-虚拟局域网)name123—-给vlan设置名称interfacevlan10—-进入vlan10ipaddress192.168.10.1255.255.255.0—

    2022年6月16日
    108
  • 万能量产工具_u盘量产工具怎样使用

    万能量产工具_u盘量产工具怎样使用MPALLv3.23.00版本量产工具可以用来给16G金士顿U盘(PS2251-50)主控刷固件量产。当然也适合其他ps22XX主控的量产只是不用刷固件,一般是量产坏了或者量产不了才涉及到刷固件。做设置分区数量,制作u盘启动盘、低级格式化等不需要刷固件即可成功量产。包含固件为50的固件:BN50V313M-8K.BIN BN50V3122KM-2@4k.BIN FW50FF01

    2025年10月12日
    4

发表回复

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

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