本篇文章给大家带来了关于JavaScript视频教程的相关知识，其中主要介绍了关于箭头函数的相关问题，包括了语法规则、简写规则、常见应用等等内容，下面一起来看一下，希望对大家有帮助。
【相关推荐：JavaScript视频教程、web前端】
在ES6中新增了函数的简写方式----箭头函数，箭头函数的出现不仅简化了大量代码，也让代码看起来更加优雅，同时也解决了this指向问题，下面我们就来详细讲解如何玩转箭头函数。
之前的方法
function foo1(){}var foo2 = function(name,age){
console.log("函数体代码"，this,arguments);
console.log(name,age);}箭头函数完整写法
var foo3 = (name,age) => {
console.log("箭头函数的函数体")
console.log(name,age);}箭头函数遍历数组
var names = ["abc","cba","nba"];names.forEach(function(item)){
console.log(item);})names.forEach((item,idx,arr)=>{
console.log(item,idx,arr);
} )
setTimeout(()=>{
console.log("setTimeout");},3000)如果箭头函数只有一个函数，那么（）可以省略
name.forEach(item =>{console.log(item);}var newNums = nus.filter(item =>{
return item % 2;})如果函数体中只有一行执行代码，那么{} 可以省略.
names.forEach(item => console.log(item));
varans = worker.filter( item=>item % 2 )
如果默认返回值是一个对象，那么这个对象必须加（）
注意：在react 的 redux 经常使用。
我们会发现当箭头函数 同时遇到 执行体的大括号和对象的大括号时，箭头函数无法区分
var arrFn = () =>{} //此大括号是执行体var arrFn = () =>{ name : "why"}// 此大括号是对象所以为了区别执行器，必须要给对象加（）
var arrFn = () =>({ name : "why"})map() 方法定义在JS的Array中，它返回一个新的数组，数组中的元素为原始数组调用函数后处理的值。
值得注意的是：
array.map(function(currentValue, index, arr), thisIndex)参数说明：
例1：对原数组进行平方后赋值给新数组。
let arry = [1,2,3,4];let newArray = array.map((item)=>{
return item*item;})也可以化简成下面一行代码。
let newArray = array.map(item =>item * item)
例2：对原数组的偶数进行平方后赋值给新数组。
filter() 用于对数组进行过滤。
filter把传入的函数依次作用在每一个元素，然后根据返回值是true还是false决定保留还是丢弃元素。Array.filter(function(currentValue, indedx, arr), thisValue)参数说明：
let newArray = array.filter(item=>item%2===0).map(item =>item * item)
例3：对原数组中的偶数下标进行平方后赋值给新数组。
let array = [1, 2, 3, 4]; let newArray = array.filter((item,idx)=>idx%2===0).map(item =>item * item)
例4：巧妙利用 arr 参数，给数组去重.
var newArray = array.filter((item,idx,arr)=>arr.indexOf(item) === idx)
例2：对原数组的偶数进行平方后求累加和。
array.reduce((pre, cur, index, arr)，init）参数说明：
如果reduce的参数只有一个，那么累计值的初始值是数组的第一个值。
如果reduce的参数有两个，那么积累值初始值就是设置好的 参数init初始值。
在每一次迭代中，返回的值都作为下一次迭代的 pre累计值。
var ans = arr.filter(item=>item%2).map(item=>item*item).reduce((x,y)=>x+y,0);
普通函数中是有this的标识符
function foo(){
console.log("foo",this);}foo()//windowfoo.apply("aaa")//aaa箭头函数中，压根没有this。
var bar = ()=>{console.log("bar",this)}bar()//windowbar.apply("AAA")//windowconcat（）方法是用于连接两个或多个数组。
var arr = [1, 2, 3, 4]; var arr2 = [7, 8, 9, 10]; var ans = [].concat(arr,arr2); console.log(ans);//输出：(8) [1, 2, 3, 4, 7, 8, 9, 10]
因为箭头函数中没有this的标识符，所以当箭头函数内部开始调用this时。
JavaScript引擎就从作用域由里到外的找含有this指向的作用域。
var obj ={
name:"obj",
foo:function(){
var bar = ()=>{
console.log("bar",this);
}
return bar;
}}所以例子中的 this 指向obj。
var obj ={
name:"obj",
foo:()=>{
var bar =()=>{
console.log("bar:",this);
}
return bar;
}}所以例子中的 this 指向window。
模拟网络发送请求
function request(url,callback){
var res = ["abc","cba","nba"];
callback(res);}因为此时传入 request 的function ，就是 request 定义中的 callback（）。
所以 function 中的参数就是 request 定义中的 res 数组，然后赋值给了 此对象中names
但因为 function 是个回调函数的this 的指向是 window，所以需要在外层的函数中，规定一个_this指向当前对象。
var _this = this;
然后 将获取过来的 res 数组 赋值给 _this 中的names
_this.name = [].concat(ans);
var obj = {
names:[],
network:function(){
var _this = this;
request("/names",function(ans){
_this.name = [].concat(ans);
})}因为箭头函数本身是没有 this的，js引擎会由内往外的找 this的指向。
发现 外层的 函数 this指向obj，于是 this 就指向了 obj。
var obj = {
names:[],
network:function(){
request("/names",(ans)=>{
this.name = [].concat(ans);
})}【相关推荐：javascript视频教程、web前端】
以上是JavaScript怎么拿捏箭头函数的详细内容。更多信息请关注PHP中文网其他相关文章！
