JavaScript高級(jí)教程之如何玩轉(zhuǎn)箭頭函數(shù)
箭頭函數(shù)
在ES6中新增了函數(shù)的簡(jiǎn)寫(xiě)方式----箭頭函數(shù),箭頭函數(shù)的出現(xiàn)不僅簡(jiǎn)化了大量代碼,也讓代碼看起來(lái)更加優(yōu)雅,同時(shí)也解決了this指向問(wèn)題,下面我們就來(lái)詳細(xì)講解如何玩轉(zhuǎn)箭頭函數(shù)。
語(yǔ)法規(guī)則
之前的方法
function foo1(){} var foo2 = function(name,age){ console.log("函數(shù)體代碼",this,arguments); console.log(name,age); }
箭頭函數(shù)完整寫(xiě)法
var foo3 = (name,age) => { console.log("箭頭函數(shù)的函數(shù)體") console.log(name,age); }
箭頭函數(shù)遍歷數(shù)組
曾經(jīng)的寫(xiě)法
var names = ["abc","cba","nba"]; names.forEach(function(item)){ console.log(item); })
箭頭函數(shù)的寫(xiě)法
names.forEach((item,idx,arr)=>{ console.log(item,idx,arr); } )
setTimeout(()=>{ console.log("setTimeout"); },3000)
簡(jiǎn)寫(xiě)規(guī)則
如果箭頭函數(shù)只有一個(gè)函數(shù),那么()可以省略
name.forEach(item =>{ console.log(item); }
filter()配合箭頭函數(shù),可以高效的篩選出符合條件的數(shù)字。
var newNums = nus.filter(item =>{ return item % 2; })
如果函數(shù)體中只有一行執(zhí)行代碼,那么{} 可以省略. 并且這行代碼的返回值會(huì)作為整個(gè)函數(shù)的返回值,所以不需要加 return
names.forEach(item => console.log(item));
filter()函數(shù)在只有一行執(zhí)行,可以直接省略{}
varans = worker.filter( item=>item % 2 )
如果默認(rèn)返回值是一個(gè)對(duì)象,那么這個(gè)對(duì)象必須加()
注意:在react 的 redux 經(jīng)常使用。
我們會(huì)發(fā)現(xiàn)當(dāng)箭頭函數(shù) 同時(shí)遇到 執(zhí)行體的大括號(hào)和對(duì)象的大括號(hào)時(shí),箭頭函數(shù)無(wú)法區(qū)分
var arrFn = () =>{<!--{C}%3C!%2D%2D%20%2D%2D%3E-->} //此大括號(hào)是執(zhí)行體
var arrFn = () =>{<!--{C}%3C!%2D%2D%20%2D%2D%3E--> name : "why"}// 此大括號(hào)是對(duì)象
所以為了區(qū)別執(zhí)行器,必須要給對(duì)象加()
var arrFn = () =>({<!--{C}%3C!%2D%2D%20%2D%2D%3E--> name : "why"})
常見(jiàn)應(yīng)用
map
map() 方法定義在JS的Array中,它返回一個(gè)新的數(shù)組,數(shù)組中的元素為原始數(shù)組調(diào)用函數(shù)后處理的值。
值得注意的是:
- map()函數(shù)不會(huì)對(duì)空數(shù)組進(jìn)行檢測(cè)。
- map()函數(shù)不會(huì)改變?cè)紨?shù)組,它形成的是一個(gè)新數(shù)組。
array.map(function(currentValue, index, arr), thisIndex)
參數(shù)說(shuō)明:
- function(currentValue,index,arr):必填
- 數(shù)組中的每個(gè)元素都會(huì)執(zhí)行這個(gè)函數(shù)。
- currentValue:必填,表示當(dāng)前元素的值。
- index:可選,當(dāng)前元素的索引也就是第幾個(gè)數(shù)組元素。
- arr:可選,當(dāng)前元素屬于的數(shù)組對(duì)象。
- thisValue:可選,對(duì)象作為該執(zhí)行回調(diào)時(shí)使用,傳遞給函數(shù),用作“this”的值。
例1:對(duì)原數(shù)組進(jìn)行平方后賦值給新數(shù)組。
let arry = [1,2,3,4]; let newArray = array.map((item)=>{ return item*item; })
也可以化簡(jiǎn)成下面一行代碼。
let newArray = array.map(item =>item * item)
例2:對(duì)原數(shù)組的偶數(shù)進(jìn)行平方后賦值給新數(shù)組。
filter
filter() 用于對(duì)數(shù)組進(jìn)行過(guò)濾。
- 原理是它創(chuàng)建一個(gè)新數(shù)組,新數(shù)組的元素是通過(guò)檢查指定數(shù)組中符合條件的所有元素。
- filter把傳入的函數(shù)依次作用在每一個(gè)元素,然后根據(jù)返回值是true還是false決定保留還是丟棄元素。
- Array.filter(function(currentValue, indedx, arr), thisValue)
參數(shù)說(shuō)明:
- function(currentValue,index,arr):必填
- 數(shù)組中的每個(gè)元素都會(huì)執(zhí)行這個(gè)函數(shù)。
- currentValue:必填,表示當(dāng)前元素的值。
- index:可選,當(dāng)前元素的索引也就是第幾個(gè)數(shù)組元素。
- arr:可選,當(dāng)前元素屬于的數(shù)組對(duì)象。
- thisValue:可選,對(duì)象作為該執(zhí)行回調(diào)時(shí)使用,傳遞給函數(shù),用作“this”的值。
let newArray = array.filter(item=>item%2===0).map(item =>item * item)
例3:對(duì)原數(shù)組中的偶數(shù)下標(biāo)進(jìn)行平方后賦值給新數(shù)組。
let array = [1, 2, 3, 4]; let newArray = array.filter((item,idx)=>idx%2===0).map(item =>item * item)
例4:巧妙利用 arr 參數(shù),給數(shù)組去重.
var newArray = array.filter((item,idx,arr)=>arr.indexOf(item) === idx)
例2:對(duì)原數(shù)組的偶數(shù)進(jìn)行平方后求累加和。
reduce
- 用于遍歷數(shù)組,可以設(shè)置初始值,大大增強(qiáng)了代碼的可讀性,同時(shí)還有一個(gè)參數(shù)可以做累計(jì)計(jì)算。
array.reduce((pre, cur, index, arr),init)
參數(shù)說(shuō)明:
- function((pre, cur, index, arr)):必填
- pre: 必填,積累值
- cur: 必填。當(dāng)前元素。
- index: 可選。當(dāng)前下標(biāo)。
- arr: 可選。當(dāng)前數(shù)組。
- init: 可選。傳遞給函數(shù)的初始值,但傳入?yún)?shù)為兩個(gè)時(shí),init 是累計(jì)值 pre的初始值。
如果reduce
的參數(shù)只有一個(gè),那么累計(jì)值的初始值是數(shù)組的第一個(gè)值。
如果reduce
的參數(shù)有兩個(gè),那么積累值初始值就是設(shè)置好的 參數(shù)init
初始值。
在每一次迭代中,返回的值都作為下一次迭代的 pre
累計(jì)值。
var ans = arr.filter(item=>item%2).map(item=>item*item).reduce((x,y)=>x+y,0);
箭頭函數(shù)中的this使用
普通函數(shù)中是有this的標(biāo)識(shí)符
function foo(){ console.log("foo",this); } foo()//window foo.apply("aaa")//aaa
箭頭函數(shù)中,壓根沒(méi)有this。
var bar = ()=>{console.log("bar",this)} bar()//window bar.apply("AAA")//window
concat
concat()方法是用于連接兩個(gè)或多個(gè)數(shù)組。
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的查找規(guī)則
因?yàn)榧^函數(shù)中沒(méi)有this的標(biāo)識(shí)符,所以當(dāng)箭頭函數(shù)內(nèi)部開(kāi)始調(diào)用this時(shí)。
JavaScript引擎就從作用域由里到外的找含有this指向的作用域。
var obj ={ name:"obj", foo:function(){ var bar = ()=>{ console.log("bar",this); } return bar; } }
第一層 bar箭頭函數(shù):沒(méi)有。
第二層 function 函數(shù):指向obj。
所以例子中的 this 指向obj。
var obj ={ name:"obj", foo:()=>{ var bar =()=>{ console.log("bar:",this); } return bar; } }
- 第一層 bar箭頭函數(shù):沒(méi)有。
- 第二層 foo箭頭函數(shù):沒(méi)有。
- 第三層 全局作用域:指向window。
所以例子中的 this 指向window。
模擬網(wǎng)絡(luò)發(fā)送請(qǐng)求
封裝 request 工具函數(shù)
function request(url,callback){ var res = ["abc","cba","nba"]; callback(res); }
實(shí)際操作的位置
- 早期的寫(xiě)法
因?yàn)榇藭r(shí)傳入 request 的function ,就是 request 定義中的 callback()。
所以 function 中的參數(shù)就是 request 定義中的 res 數(shù)組,然后賦值給了 此對(duì)象中names
但因?yàn)?function 是個(gè)回調(diào)函數(shù)的this 的指向是 window,所以需要在外層的函數(shù)中,規(guī)定一個(gè)_this指向當(dāng)前對(duì)象。
var _this = this;
然后 將獲取過(guò)來(lái)的 res 數(shù)組 賦值給 _this 中的names
_this.name = [].concat(ans);
var obj = { names:[], network:function(){ var _this = this; request("/names",function(ans){ _this.name = [].concat(ans); }) }
箭頭函數(shù)的寫(xiě)法
因?yàn)榧^函數(shù)本身是沒(méi)有 this的,js引擎會(huì)由內(nèi)往外的找 this的指向。
發(fā)現(xiàn) 外層的 函數(shù) this指向obj,于是 this 就指向了 obj。
var obj = { names:[], network:function(){ request("/names",(ans)=>{ this.name = [].concat(ans); }) }
下面對(duì)比寫(xiě)es5 es6 直接關(guān)于箭頭函數(shù)的對(duì)比使用
//es5 var fn = function(a, b){return a+b} //es6 直接被return時(shí)候可以省略函數(shù)體的括號(hào) const fn=(a,b) => a+b; //es5 var foo = function(){ var a=20; var b= 30; return a+b; } //es6 const foo=()=>{ const a= 20; const b=30; return a+b } // 注意這里 箭頭函數(shù)可以替代函數(shù)表達(dá)式但是不能替代函數(shù)聲明
再回到this 上面來(lái),箭頭函數(shù)樣意義上面來(lái)說(shuō)沒(méi)有this. 如果使用了this 那么就一定是外層this .不會(huì)自動(dòng)指向window對(duì)象。所以也就不能使用call/apply/bind來(lái)改變this指向
var person = { name: 'tom', getName: function() { return this.name; } } 使用es6 來(lái)重構(gòu)上面的對(duì)象 const person = { name:'tom', getName:()=>this.name } 這樣編譯的結(jié)果就是 var person ={ name:'tom', getName:function getName(){return undefined.name} }
在ES6中,會(huì)默認(rèn)采用嚴(yán)格模式,因此this也不會(huì)自動(dòng)指向window對(duì)象了,而箭頭函數(shù)本身并沒(méi)有this,因此this就只能是undefined,這一點(diǎn),在使用的時(shí)候,一定要慎重慎重再慎重,不然踩了坑你都不知道自己錯(cuò)在哪!這種情況,如果你還想用this,就不要用使用箭頭函數(shù)的寫(xiě)法。
// 可以稍做改動(dòng) const person = { name: 'tom', getName: function() { return setTimeout(() => this.name, 1000); } } // 編譯之后變成 var person = { name: 'tom', getName: function getName() { var _this = this; // 使用了我們?cè)趀s5時(shí)常用的方式保存this引用 return setTimeout(function () { return _this.name; }, 1000); } };
完結(jié)散花
到此這篇關(guān)于JavaScript高級(jí)教程之如何玩轉(zhuǎn)箭頭函數(shù)的文章就介紹到這了,更多相關(guān)JS箭頭函數(shù)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
參考文獻(xiàn)
coderwhy老師JS高級(jí)視頻教程
相關(guān)文章
ES6 let和const定義變量與常量的應(yīng)用實(shí)例分析
這篇文章主要介紹了ES6 let和const定義變量與常量的應(yīng)用,結(jié)合實(shí)例形式分析了ES6使用let定義變量以及使用const定義常量的相關(guān)操作技巧,需要的朋友可以參考下2019-06-06uniapp開(kāi)發(fā)App出現(xiàn)網(wǎng)絡(luò)異常的解決方法
這篇文章主要給大家介紹了uniapp開(kāi)發(fā)App出現(xiàn)網(wǎng)絡(luò)異常的解決方案,文中有相關(guān)的解決方法和步驟,具有一定的參考價(jià)值,需要的朋友可以參考下2023-09-09關(guān)于JavaScript中高階函數(shù)的魅力詳解
高階函數(shù):英文叫Higher-order function。JavaScript的函數(shù)其實(shí)都指向某個(gè)變量。下面這篇文章主要給大家介紹了關(guān)于JavaScript中高階函數(shù)的魅力,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2018-09-09深入理解ES6之?dāng)?shù)據(jù)解構(gòu)的用法
本文介紹了深入理解ES6之?dāng)?shù)據(jù)解構(gòu)的用法,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-01-015個(gè)你不知道的JavaScript字符串處理庫(kù)(小結(jié))
這篇文章主要介紹了5個(gè)你不知道的JavaScript字符串處理庫(kù),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-06-06