JavaScript如何使用箭頭函數

這篇文章主要講解了“JavaScript如何使用箭頭函數”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“JavaScript如何使用箭頭函數”吧！

箭頭函數

在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如何使用箭頭函數”的內容了，經過本文的學習后，相信大家對JavaScript如何使用箭頭函數這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！