這篇文章主要講解了“JavaScript如何使用箭頭函數(shù)”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來(lái)研究和學(xué)習(xí)“JavaScript如何使用箭頭函數(shù)”吧！
永豐網(wǎng)站建設(shè)公司創(chuàng)新互聯(lián),永豐網(wǎng)站設(shè)計(jì)制作，有大型網(wǎng)站制作公司豐富經(jīng)驗(yàn)。已為永豐數(shù)千家提供企業(yè)網(wǎng)站建設(shè)服務(wù)。企業(yè)網(wǎng)站搭建\成都外貿(mào)網(wǎng)站建設(shè)要多少錢(qián)，請(qǐng)找那個(gè)售后服務(wù)好的永豐做網(wǎng)站的公司定做！
在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ù)。
之前的方法
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)
如果箭頭函數(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 = () =>{} //此大括號(hào)是執(zhí)行體var arrFn = () =>{ name : "why"}// 此大括號(hào)是對(duì)象
所以為了區(qū)別執(zhí)行器，必須要給對(duì)象加（）
var arrFn = () =>({ name : "why"})
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() 用于對(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)行平方后求累加和。
用于遍歷數(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的標(biāo)識(shí)符
function foo(){
console.log("foo",this);}foo()//windowfoo.apply("aaa")//aaa
箭頭函數(shù)中，壓根沒(méi)有this。
var bar = ()=>{console.log("bar",this)}bar()//windowbar.apply("AAA")//window
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]
因?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);
})}
感謝各位的閱讀，以上就是“JavaScript如何使用箭頭函數(shù)”的內(nèi)容了，經(jīng)過(guò)本文的學(xué)習(xí)后，相信大家對(duì)JavaScript如何使用箭頭函數(shù)這一問(wèn)題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！
重慶分公司
重慶分公司
