欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JavaScript高級教程之如何玩轉箭頭函數(shù)

 更新時間:2022年11月28日 10:46:57   作者:沈七QWQ  
箭頭函數(shù)是在es6中添加的一種規(guī)范,箭頭函數(shù)相當于匿名函數(shù),簡化了函數(shù)的定義,下面這篇文章主要給大家介紹了關于JavaScript高級教程之如何玩轉箭頭函數(shù)的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下

箭頭函數(shù)

在ES6中新增了函數(shù)的簡寫方式----箭頭函數(shù),箭頭函數(shù)的出現(xiàn)不僅簡化了大量代碼,也讓代碼看起來更加優(yōu)雅,同時也解決了this指向問題,下面我們就來詳細講解如何玩轉箭頭函數(shù)。

語法規(guī)則

之前的方法

function foo1(){}
var foo2 = function(name,age){
	console.log("函數(shù)體代碼",this,arguments);
  console.log(name,age);
}

箭頭函數(shù)完整寫法

var foo3 = (name,age) => {
	console.log("箭頭函數(shù)的函數(shù)體")
  console.log(name,age);
}

箭頭函數(shù)遍歷數(shù)組

曾經(jīng)的寫法

var names = ["abc","cba","nba"];
names.forEach(function(item)){
	console.log(item);
})

箭頭函數(shù)的寫法

names.forEach((item,idx,arr)=>{
  console.log(item,idx,arr);
	} 
)

image.png

setTimeout(()=>{
	console.log("setTimeout");
},3000)

簡寫規(guī)則

如果箭頭函數(shù)只有一個函數(shù),那么()可以省略

name.forEach(item =>{
console.log(item);
}

filter()配合箭頭函數(shù),可以高效的篩選出符合條件的數(shù)字。

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

如果函數(shù)體中只有一行執(zhí)行代碼,那么{} 可以省略. 并且這行代碼的返回值會作為整個函數(shù)的返回值,所以不需要加 return

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

filter()函數(shù)在只有一行執(zhí)行,可以直接省略{}

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

如果默認返回值是一個對象,那么這個對象必須加()

注意:在react 的 redux 經(jīng)常使用。

我們會發(fā)現(xiàn)當箭頭函數(shù) 同時遇到 執(zhí)行體的大括號和對象的大括號時,箭頭函數(shù)無法區(qū)分

var arrFn = () =>{<!--{C}%3C!%2D%2D%20%2D%2D%3E-->} //此大括號是執(zhí)行體
var arrFn = () =>{<!--{C}%3C!%2D%2D%20%2D%2D%3E--> name : "why"}// 此大括號是對象

所以為了區(qū)別執(zhí)行器,必須要給對象加()

var arrFn = () =>({<!--{C}%3C!%2D%2D%20%2D%2D%3E--> name : "why"})

常見應用

map

map() 方法定義在JS的Array中,它返回一個新的數(shù)組,數(shù)組中的元素為原始數(shù)組調(diào)用函數(shù)后處理的值。

值得注意的是:

  • map()函數(shù)不會對空數(shù)組進行檢測。
  • map()函數(shù)不會改變原始數(shù)組,它形成的是一個新數(shù)組。
  • array.map(function(currentValue, index, arr), thisIndex)

參數(shù)說明:

  • function(currentValue,index,arr):必填
    • 數(shù)組中的每個元素都會執(zhí)行這個函數(shù)。
    • currentValue:必填,表示當前元素的值。
    • index:可選,當前元素的索引也就是第幾個數(shù)組元素。
    • arr:可選,當前元素屬于的數(shù)組對象。
  • thisValue:可選,對象作為該執(zhí)行回調(diào)時使用,傳遞給函數(shù),用作“this”的值。

例1:對原數(shù)組進行平方后賦值給新數(shù)組。

let arry = [1,2,3,4];
let newArray = array.map((item)=>{
  return item*item;
})

也可以化簡成下面一行代碼。

let newArray = array.map(item =>item * item)

例2:對原數(shù)組的偶數(shù)進行平方后賦值給新數(shù)組。

filter

filter() 用于對數(shù)組進行過濾。

  • 原理是它創(chuàng)建一個新數(shù)組,新數(shù)組的元素是通過檢查指定數(shù)組中符合條件的所有元素。
  • filter把傳入的函數(shù)依次作用在每一個元素,然后根據(jù)返回值是true還是false決定保留還是丟棄元素。
  • Array.filter(function(currentValue, indedx, arr), thisValue)

參數(shù)說明:

  • function(currentValue,index,arr):必填
    • 數(shù)組中的每個元素都會執(zhí)行這個函數(shù)。
    • currentValue:必填,表示當前元素的值。
    • index:可選,當前元素的索引也就是第幾個數(shù)組元素。
    • arr:可選,當前元素屬于的數(shù)組對象。
  • thisValue:可選,對象作為該執(zhí)行回調(diào)時使用,傳遞給函數(shù),用作“this”的值。
let newArray = array.filter(item=>item%2===0).map(item =>item * item)

例3:對原數(shù)組中的偶數(shù)下標進行平方后賦值給新數(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:對原數(shù)組的偶數(shù)進行平方后求累加和。

reduce

  • 用于遍歷數(shù)組,可以設置初始值,大大增強了代碼的可讀性,同時還有一個參數(shù)可以做累計計算。
  • array.reduce((pre, cur, index, arr),init)

參數(shù)說明:

  • function((pre, cur, index, arr)):必填
    • pre: 必填,積累值
    • cur: 必填。當前元素。
    • index: 可選。當前下標。
    • arr: 可選。當前數(shù)組。
  • init: 可選。傳遞給函數(shù)的初始值,但傳入?yún)?shù)為兩個時,init 是累計值 pre的初始值。

如果reduce的參數(shù)只有一個,那么累計值的初始值是數(shù)組的第一個值。

如果reduce的參數(shù)有兩個,那么積累值初始值就是設置好的 參數(shù)init初始值。

在每一次迭代中,返回的值都作為下一次迭代的 pre累計值。

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

箭頭函數(shù)中的this使用

普通函數(shù)中是有this的標識符

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

箭頭函數(shù)中,壓根沒有this。

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

concat

concat()方法是用于連接兩個或多個數(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ī)則

因為箭頭函數(shù)中沒有this的標識符,所以當箭頭函數(shù)內(nèi)部開始調(diào)用this時。

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

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

第一層 bar箭頭函數(shù):沒有。

第二層 function 函數(shù):指向obj。

所以例子中的 this 指向obj。

var obj ={
	name:"obj",
  foo:()=>{
  	var bar =()=>{
      console.log("bar:",this);
    }
    return bar;
  }
}
  • 第一層 bar箭頭函數(shù):沒有。
  • 第二層 foo箭頭函數(shù):沒有。
  • 第三層 全局作用域:指向window。

所以例子中的 this 指向window。

模擬網(wǎng)絡發(fā)送請求

封裝 request 工具函數(shù)

function request(url,callback){
  	var res = ["abc","cba","nba"];
    callback(res);
}

實際操作的位置

  • 早期的寫法

因為此時傳入 request 的function ,就是 request 定義中的 callback()。

所以 function 中的參數(shù)就是 request 定義中的 res 數(shù)組,然后賦值給了 此對象中names

但因為 function 是個回調(diào)函數(shù)的this 的指向是 window,所以需要在外層的函數(shù)中,規(guī)定一個_this指向當前對象。

var _this = this;

然后 將獲取過來的 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ù)的寫法

因為箭頭函數(shù)本身是沒有 this的,js引擎會由內(nèi)往外的找 this的指向。

發(fā)現(xiàn) 外層的 函數(shù) this指向obj,于是 this 就指向了 obj。

var obj = {
	names:[],
  network:function(){
    request("/names",(ans)=>{
    this.name = [].concat(ans);
  })
}

下面對比寫es5 es6 直接關于箭頭函數(shù)的對比使用

//es5
var fn = function(a, b){return a+b}
//es6   直接被return時候可以省略函數(shù)體的括號
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ù)表達式但是不能替代函數(shù)聲明

再回到this 上面來,箭頭函數(shù)樣意義上面來說沒有this. 如果使用了this 那么就一定是外層this .不會自動指向window對象。所以也就不能使用call/apply/bind來改變this指向

var person = {
    name: 'tom',
    getName: function() {
        return this.name;
    }
}

使用es6 來重構上面的對象
const person = {
    name:'tom',
    getName:()=>this.name
}
這樣編譯的結果就是
var person ={
    name:'tom',
    getName:function getName(){return undefined.name}
}

在ES6中,會默認采用嚴格模式,因此this也不會自動指向window對象了,而箭頭函數(shù)本身并沒有this,因此this就只能是undefined,這一點,在使用的時候,一定要慎重慎重再慎重,不然踩了坑你都不知道自己錯在哪!這種情況,如果你還想用this,就不要用使用箭頭函數(shù)的寫法。

// 可以稍做改動
const person = {
    name: 'tom',
    getName: function() {
        return setTimeout(() => this.name, 1000);
    }
}

// 編譯之后變成
var person = {
    name: 'tom',
    getName: function getName() {
        var _this = this;  // 使用了我們在es5時常用的方式保存this引用

        return setTimeout(function () {
            return _this.name;
        }, 1000);
    }
};

完結散花

到此這篇關于JavaScript高級教程之如何玩轉箭頭函數(shù)的文章就介紹到這了,更多相關JS箭頭函數(shù)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!

參考文獻

coderwhy老師JS高級視頻教程

相關文章

  • ES6 let和const定義變量與常量的應用實例分析

    ES6 let和const定義變量與常量的應用實例分析

    這篇文章主要介紹了ES6 let和const定義變量與常量的應用,結合實例形式分析了ES6使用let定義變量以及使用const定義常量的相關操作技巧,需要的朋友可以參考下
    2019-06-06
  • js實現(xiàn)自定義右鍵菜單

    js實現(xiàn)自定義右鍵菜單

    這篇文章主要為大家詳細介紹了js實現(xiàn)自定義右鍵菜單,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2020-05-05
  • uniapp開發(fā)App出現(xiàn)網(wǎng)絡異常的解決方法

    uniapp開發(fā)App出現(xiàn)網(wǎng)絡異常的解決方法

    這篇文章主要給大家介紹了uniapp開發(fā)App出現(xiàn)網(wǎng)絡異常的解決方案,文中有相關的解決方法和步驟,具有一定的參考價值,需要的朋友可以參考下
    2023-09-09
  • 關于JavaScript中高階函數(shù)的魅力詳解

    關于JavaScript中高階函數(shù)的魅力詳解

    高階函數(shù):英文叫Higher-order function。JavaScript的函數(shù)其實都指向某個變量。下面這篇文章主要給大家介紹了關于JavaScript中高階函數(shù)的魅力,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下
    2018-09-09
  • Swiper實現(xiàn)輪播圖效果

    Swiper實現(xiàn)輪播圖效果

    這篇文章主要為大家詳細介紹了Swiper實現(xiàn)輪播圖效果,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2017-07-07
  • 用js判斷用戶瀏覽器是否是XP SP2的IE6

    用js判斷用戶瀏覽器是否是XP SP2的IE6

    用js判斷用戶瀏覽器是否是XP SP2的IE6...
    2007-03-03
  • JavaScript 獲得選中文本內(nèi)容的方法

    JavaScript 獲得選中文本內(nèi)容的方法

    今天希望實現(xiàn)一個,直接在網(wǎng)頁上選中文本,點擊收藏夾的鏈接(javascript)即可彈出新窗口(類似“百度搜藏”和“QQ書簽”),新窗口中的文本框即顯示了選中的文本。
    2009-02-02
  • 深入理解ES6之數(shù)據(jù)解構的用法

    深入理解ES6之數(shù)據(jù)解構的用法

    本文介紹了深入理解ES6之數(shù)據(jù)解構的用法,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-01-01
  • 5個你不知道的JavaScript字符串處理庫(小結)

    5個你不知道的JavaScript字符串處理庫(小結)

    這篇文章主要介紹了5個你不知道的JavaScript字符串處理庫,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2020-06-06
  • js中for in語句的用法講解

    js中for in語句的用法講解

    這篇文章主要介紹了js中for in語句的用法講解,本文用多個實例講解了for in語句的用法及適合場景,需要的朋友可以參考下
    2015-04-04

最新評論