JavaScript怎麼拿捏箭頭函數

這篇文章為大家帶來了關於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);}

• filter （）配合箭頭函數，可以高效率的篩選出符合條件的數字。

var newNums = nus.filter(item =>{
  return item % 2;})

• 如果函數體中只有一行執行程式碼，那麼{} 可以省略.

  ##並且這行程式碼的回傳值會作為整個函數的回傳值，所以不需要加return

• names.forEach(item => console.log(item));

filter（）函數在只有一行執行，可以直接省略{}

• varans = worker.filter( item=>item % 2 )

• 如果預設回傳值是一個對象，那麼這個對象就必須加（）
  # #注意：在react 的redux 經常使用。
我們會發現當箭頭函數同時遇到執行體的大括號和物件的大括號時，箭頭函數無法區分

var arrFn = () =>{} //此大括号是执行体

var arrFn = () =>{ name : "why"}// 此大括号是对象

所以為了區別執行器，必須要為物件加上（）

var arrFn = () =>({ name : "why"})

常見應用

map

map() 方法定義在JS的Array中，它傳回一個新的數組，數組中的元素為原始數組呼叫函數後處理的值。

值得注意的是：
map（）函數不會對空數組進行偵測。

map（）函數不會改變原始數組，它形成的是一個新數組。
• array.map(function(currentValue, index, arr), thisIndex)
• 參數說明：

#function（ currentValue，index，arr）：必填

數組中的每個元素都會執行這個函數。
• currentValue：必填，表示目前元素的值。
  • index：可選，目前元素的索引也就是第幾個陣列元素。
  • arr：可選，目前元素屬於的陣列物件。
  • thisValue：可選，物件作為該執行回呼時使用，傳遞給函數，用作「this」的值。
• 範例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() 用於對陣列進行過濾。

原理是它建立一個新數組，新數組的元素是透過檢查指定數組中符合條件的所有元素。

• filter
把傳入的函數依序作用在每一個元素，然後根據回傳值是
• true還是false決定保留還是丟棄元素。 Array.filter(function(currentValue, indedx, arr), thisValue)
• 參數說明：

#function（ currentValue，index，arr）：必填

數組中的每個元素都會執行這個函數。
• currentValue：必填，表示目前元素的值。
  • index：可選，目前元素的索引也就是第幾個陣列元素。
  • arr：可選，目前元素屬於的陣列物件。
  • thisValue：可選，物件作為該執行回呼時使用，傳遞給函數，用作「this」的值。

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：將原數組的偶數平方後求累加和。

reduce

• 用于遍历数组，可以设置初始值，大大增强了代码的可读性，同时还有一个参数可以做累计计算。
• array.reduce((pre, cur, index, arr)，init）

参数说明：

• function（(pre, cur, index, arr)）：必填
  • pre: 必填，积累值
  • cur： 必填。当前元素。
  • index： 可选。当前下标。
  • arr： 可选。当前数组。
• init: 可选。传递给函数的初始值，但传入参数为两个时，init 是累计值 pre的初始值。

如果reduce的参数只有一个，那么累计值的初始值是数组的第一个值。

如果reduce的参数有两个，那么积累值初始值就是设置好的 参数init初始值。

在每一次迭代中，返回的值都作为下一次迭代的 pre累计值。

var ans = arr.filter(item=>item%2).map(item=>item*item).reduce((x,y)=>x+y,0);

箭头函数中的this使用

普通函数中是有this的标识符

function foo(){
	console.log("foo",this);}foo()//windowfoo.apply("aaa")//aaa

箭头函数中，压根没有this。

var bar = ()=>{console.log("bar",this)}bar()//windowbar.apply("AAA")//window

concat

concat（）方法是用于连接两个或多个数组。

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的标识符，所以当箭头函数内部开始调用this时。

JavaScript引擎就从作用域由里到外的找含有this指向的作用域。

var obj ={
	name:"obj",
  foo:function(){
    var bar = ()=>{
      console.log("bar",this);
    }
    return bar;
  }}

• 第一层 bar箭头函数：没有。
• 第二层 function 函数：指向obj。

所以例子中的 this 指向obj。

var obj ={
	name:"obj",
  foo:()=>{
  	var bar =()=>{
      console.log("bar:",this);
    }
    return bar;
  }}

• 第一层 bar箭头函数：没有。
• 第二层 foo箭头函数：没有。
• 第三层 全局作用域：指向window。

所以例子中的 this 指向window。

模拟网络发送请求

• 封装 request 工具函数

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中文網其他相關文章！