箭头函数定义
箭头函数（将原函数的“function”关键字和函数名都删掉，并使用“=>”连接参数列表和函数体。）：
const ddd=()=>{}：（）参数；{}方法体，可以直接是返回的表达式
1、箭头函数的使用
定义函数的三种方式：
<script>
//箭头函数：也是一种定义函数的方式
//1.定义函数的方式：function
const aaa=function () {
}
//2.对象字面量中定义函数
const obj={
bbb: function () {
},
ccc() {
}
}
//3.es6中的箭头函数
// const ddd=(参数列表)=>{}
const ddd=()=>{}//无参写法
</script>
2、箭头函数参数和返回值
当函数参数只有一个，括号可以省略；但是没有参数时，括号不可以省略。
// 无参
var fn1 = function() {}
var fn1 = () => {}
// 可变参数
var fn4 = function(a, b, ...args) {}
var fn4 = (a, b, ...args) => {}
<script>
//1.参数问题：
//1.1放入两个参数
const sum =(num1,num2)=>{
return num1+num2
}
// 1.2放入一个参数,小括号省略
const power= num=>{
return num*num
}
// 2.
// 2.1函数代码块中有多行代码时
const test=()=>{
// 1.打印一个hello Word
console.log("hello world");
// 2.打印hell vue
console.log("hello vue");
}
// 2.2函数代码块中只有一行代码时,有特殊写法
// const mul=(num1,num2)=>{
// return num1*num2
// }
const mul=(num1,num2)=> num1*num2
console.log(mul(20, 30));
// 无返回值
const demo=()=>console.log("hello world");
demo()
</script>
注意：
· 对于箭头函数的返回值，如果是return一个对象的话，需要特别注意：如果是单表达式要返回自定义对象时，一定要加上括号，不加括号的话会报错，因为和函数体的{ … }有语法冲突。
x => {key: x} // 报错
x => ({key: x}) // 正确
//注意，用小括号包含大括号则是对象的定义，而非函数主体
· 箭头函数看上去像是匿名函数的一种简写，但实际上，箭头函数和匿名函数有个明显的区别：箭头函数内部的this是词法作用域，由上下文确定。（词法作用域就是定义在词法阶段的作用域。换句话说，词法作用域是由你在写代码时将变量和块作用域写在哪里来决定的，因此当词法分析器处理代码时会保持作用域不变 。）简单来说，箭头函数中的this是向外层作用域中一层层查找this的指向的，直到查到有this的定义为止。
3、箭头函数中的this
在讲箭头函数中的this的时候先来看看普通函数的this是指向什么的：
普通函数的this在声明时指向window，在调用时指向调用它的对象，如果直接调用，也指向window
function b() {
function a(){
console.log(this)
}
let c = function() {
a()
}
let obj2 = {a,c}
obj2.a()//打印出obj2,打印出调用时的对象obj2
obj2.c()//打印出window,打印出直接调用时的对象window
}
let obj = {b}
obj.b()//使函数b内上下文this为obj
箭头函数的this在声明时指向window，在调用时指向声明时所在的上下文this。也就是说箭头函数中的this是向外层作用域中一层层查找this，查到有this的定义为止
<script>
//什么时候使用箭头函数
// setTimeout(function () {
// console.log(this)
// },1000)
// setTimeout(()=>{
// console.log(this)
// },1000)
//结论：箭头函数中的this是如何查找的
//答案：向外层作用域中一层层查找this，查到有this的定义为止
const obj={
aaa() {
setTimeout(function () {
console.log(this)//window
})
setTimeout(()=>{
console.log(this)//obj
})
}
}
obj.aaa()
</script>
4、关于call、apply、bind
对于普通函数来说，这三个方法都适用：
let obj = {}
let a = function() { console.log(this) }
a.call(obj)//obj
a.apply(obj)//obj
a = a.bind(obj)
a()//obj
而对于箭头函数来说，因为箭头函数的特殊性三个方法都不适用：
let obj = {}
let a = () => { console.log(this) }
a.call(obj)//window
a.apply(obj)//window
a.bind(obj)
a()//window
5、注意事项
不能用作构造函数
不能使用arguments
不能作为对象的方法调用，因为还是指向上下文，而不是调用的对象
如果需要this操作，不能用作addEventListener里传的参数
6、结合箭头函数写过滤案例
// 箭头函数
// 1 匿名函数
// var f=function (name) {
// console.log(name)
// }
// f('quan')
// 2 箭头函数--》无参数无返回值
// var f1 = () => {
// console.log('我是箭头函数')
// }
// f1()
// 3 箭头函数--》有多个参数无返回值
// var f2 = (name,age) => {
// console.log(name,age)
// }
// f2()
// 3 箭头函数--》有一个参数无返回值
// var f3 = name => {
// console.log(name)
// }
// f3('pengyuyan')
// 4 箭头函数：有一个参数，一个返回值
// var f4 = name => {
// return name+'_nb'
// }
// f4('pengyuyan')
//5 简写成
var f5 = name => name+'_nb'
var res=f5('pengyuyan')
console.log(res)
// 6 箭头函数内部，没有自己this，箭头函数内部用this---》就是上面作用域的this
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./vue/vue.js"></script>
</head>
<body>
<div id="app">
<h1>过滤案例</h1>
<input type="text" v-model="myText" @input="handleInput">
<hr>
<ul>
<li v-for="item in newdataList">{{item}}</li>
</ul>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
myText: '',
dataList: ['a', 'at', 'atom', 'be', 'beyond', 'cs', 'csrf', 'atome', 'atomem'],
newdataList: ['a', 'at', 'atom', 'be', 'beyond', 'cs', 'csrf', 'atome', 'atomem'],
},
methods: {
handleInput() {
this.newdataList = this.dataList.filter(item=> item.indexOf(this.myText) >= 0)
},
}
})
</script>
</html>