国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

【進階 6-1 期】JavaScript 高階函數淺析

yiliang / 1753人閱讀

摘要:引言本期開始介紹中的高階函數,在中,函數是一種特殊類型的對象,它們是。簡單來說,高階函數是一個接收函數作為參數傳遞或者將函數作為返回值輸出的函數。我們來看看使用它們與不使用高階函數的方案對比。

引言

本期開始介紹 JavaScript 中的高階函數,在 JavaScript 中,函數是一種特殊類型的對象,它們是 Function objects。那什么是高階函數呢?本節將通過高階函數的定義來展開介紹。

高階函數

高階函數英文叫 Higher-order function,它的定義很簡單,就是至少滿足下列一個條件的函數:

接受一個或多個函數作為輸入

輸出一個函數

也就是說高階函數是對其他函數進行操作的函數,可以將它們作為參數傳遞,或者是返回它們。 簡單來說,高階函數是一個接收函數作為參數傳遞或者將函數作為返回值輸出的函數。

函數作為參數傳遞

JavaScript 語言中內置了一些高階函數,比如 Array.prototype.map,Array.prototype.filter 和 Array.prototype.reduce,它們接受一個函數作為參數,并應用這個函數到列表的每一個元素。我們來看看使用它們與不使用高階函數的方案對比。

Array.prototype.map

map() 方法創建一個新數組,其結果是該數組中的每個元素都調用一個提供的函數后返回的結果,原始數組不會改變。傳遞給 map 的回調函數(callback)接受三個參數,分別是 currentValue、index(可選)、array(可選),除了 callback 之外還可以接受 this 值(可選),用于執行 callback 函數時使用的this 值。

來個簡單的例子方便理解,現在有一個數組 [1, 2, 3, 4],我們想要生成一個新數組,其每個元素皆是之前數組的兩倍,那么我們有下面兩種使用高階和不使用高階函數的方式來實現。

不使用高階函數

// 木易楊
const arr1 = [1, 2, 3, 4];
const arr2 = [];
for (let i = 0; i < arr1.length; i++) {
  arr2.push( arr1[i] * 2);
}

console.log( arr2 );
// [2, 4, 6, 8]
console.log( arr1 );
// [1, 2, 3, 4]

使用高階函數

// 木易楊
const arr1 = [1, 2, 3, 4];
const arr2 = arr1.map(item => item * 2);

console.log( arr2 );
// [2, 4, 6, 8]
console.log( arr1 );
// [1, 2, 3, 4]
Array.prototype.filter

filter() 方法創建一個新數組, 其包含通過提供函數實現的測試的所有元素,原始數組不會改變。接收的參數和 map 是一樣的,其返回值是一個新數組、由通過測試的所有元素組成,如果沒有任何數組元素通過測試,則返回空數組。

來個例子介紹下,現在有一個數組 [1, 2, 1, 2, 3, 5, 4, 5, 3, 4, 4, 4, 4],我們想要生成一個新數組,這個數組要求沒有重復的內容,即為去重。

不使用高階函數

const arr1 = [1, 2, 1, 2, 3, 5, 4, 5, 3, 4, 4, 4, 4];
const arr2 = [];
for (let i = 0; i < arr1.length; i++) {
  if (arr1.indexOf( arr1[i] ) === i) {
    arr2.push( arr1[i] );
  }
}

console.log( arr2 );
// [1, 2, 3, 5, 4]
console.log( arr1 );
// [1, 2, 1, 2, 3, 5, 4, 5, 3, 4, 4, 4, 4]

使用高階函數

const arr1 = [1, 2, 1, 2, 3, 5, 4, 5, 3, 4, 4, 4, 4];
const arr2 = arr1.filter( (element, index, self) => {
    return self.indexOf( element ) === index;
});

console.log( arr2 );
// [1, 2, 3, 5, 4]
console.log( arr1 );
// [1, 2, 1, 2, 3, 5, 4, 5, 3, 4, 4, 4, 4]
Array.prototype.reduce

reduce() 方法對數組中的每個元素執行一個提供的 reducer 函數(升序執行),將其結果匯總為單個返回值。傳遞給 reduce 的回調函數(callback)接受四個參數,分別是累加器 accumulator、currentValue、currentIndex(可選)、array(可選),除了 callback 之外還可以接受初始值 initialValue 值(可選)。

如果沒有提供 initialValue,那么第一次調用 callback 函數時,accumulator 使用原數組中的第一個元素,currentValue 即是數組中的第二個元素。 在沒有初始值的空數組上調用 reduce 將報錯。

如果提供了 initialValue,那么將作為第一次調用 callback 函數時的第一個參數的值,即 accumulator,currentValue 使用原數組中的第一個元素。

來個簡單的例子介紹下,現在有一個數組 [0, 1, 2, 3, 4],需要計算數組元素的和,需求比較簡單,來看下代碼實現。

不使用高階函數

const arr = [0, 1, 2, 3, 4];
let sum = 0;
for (let i = 0; i < arr.length; i++) {
  sum += arr[i];
}

console.log( sum );
// 10
console.log( arr );
// [0, 1, 2, 3, 4]

使用高階函數

無 initialValue 值
const arr = [0, 1, 2, 3, 4];
let sum = arr.reduce((accumulator, currentValue, currentIndex, array) => {
  return accumulator + currentValue;
});

console.log( sum );
// 10
console.log( arr );
// [0, 1, 2, 3, 4]

上面是沒有 initialValue 的情況,代碼的執行過程如下,callback 總共調用四次。

callback accumulator currentValue currentIndex array return value
first call 0 1 1 [0, 1, 2, 3, 4] 1
second call 1 2 2 [0, 1, 2, 3, 4] 3
third call 3 3 3 [0, 1, 2, 3, 4] 6
fourth call 6 4 4 [0, 1, 2, 3, 4] 10
有 initialValue 值

我們再來看下有 initialValue 的情況,假設 initialValue 值為 10,我們看下代碼。

const arr = [0, 1, 2, 3, 4];
let sum = arr.reduce((accumulator, currentValue, currentIndex, array) => {
  return accumulator + currentValue;
}, 10);

console.log( sum );
// 20
console.log( arr );
// [0, 1, 2, 3, 4]

代碼的執行過程如下所示,callback 總共調用五次。

callback accumulator currentValue currentIndex array return value
first call 10 0 0 [0, 1, 2, 3, 4] 10
second call 10 1 1 [0, 1, 2, 3, 4] 11
third call 11 2 2 [0, 1, 2, 3, 4] 13
fourth call 13 3 3 [0, 1, 2, 3, 4] 16
fifth call 16 4 4 [0, 1, 2, 3, 4] 20
函數作為返回值輸出

這個很好理解,就是返回一個函數,下面直接看兩個例子來加深理解。

isType 函數

我們知道在判斷類型的時候可以通過 Object.prototype.toString.call 來獲取對應對象返回的字符串,比如:

let isString = obj => Object.prototype.toString.call( obj ) === "[object String]";

let isArray = obj => Object.prototype.toString.call( obj ) === "[object Array]";

let isNumber = obj => Object.prototype.toString.call( obj ) === "[object Number]";

可以發現上面三行代碼有很多重復代碼,只需要把具體的類型抽離出來就可以封裝成一個判斷類型的方法了,代碼如下。

let isType = type => obj => {
  return Object.prototype.toString.call( obj ) === "[object " + type + "]";
}

isType("String")("123");		// true
isType("Array")([1, 2, 3]);	// true
isType("Number")(123);			// true

這里就是一個高階函數,因為 isType 函數將 obj => { ... } 這一函數作為返回值輸出。

add 函數

我們看一個常見的面試題,用 JS 實現一個無限累加的函數 add,示例如下:

add(1); // 1
add(1)(2);  // 3
add(1)(2)(3); // 6
add(1)(2)(3)(4); // 10 

// 以此類推

我們可以看到結構和上面代碼有些類似,都是將函數作為返回值輸出,然后接收新的參數并進行計算。

我們知道打印函數時會自動調用 toString()方法,函數 add(a) 返回一個閉包 sum(b),函數 sum() 中累加計算 a = a + b,只需要重寫sum.toString()方法返回變量 a 就可以了。

function add(a) {
    function sum(b) { // 使用閉包
    	a = a + b; // 累加
    	return sum;
    }
    sum.toString = function() { // 重寫toString()方法
        return a;
    }
    return sum; // 返回一個函數
}

add(1); // 1
add(1)(2);  // 3
add(1)(2)(3); // 6
add(1)(2)(3)(4); // 10 

思考題

已知如下數組,編寫一個程序將數組扁平化去并除其中重復部分數據,最終得到一個升序且不重復的數組

var arr = [ [1, 2, 2], [3, 4, 5, 5], [6, 7, 8, 9, [11, 12, [12, 13, [14] ] ] ], 10];

參考解析:扁平化并去重

參考文章

理解 JavaScript 中的高階函數

Array.prototype.map()

Array.prototype.filter()

Array.prototype.reduce()

文章穿梭機

【進階5-3期】深入探究 Function & Object 雞蛋問題

【進階5-2期】圖解原型鏈及其繼承優缺點

【進階5-1期】重新認識構造函數、原型和原型鏈

交流

進階系列文章匯總如下,覺得不錯點個Star,歡迎 加群 互相學習。

github.com/yygmind/blo…

我是木易楊,公眾號「高級前端進階」作者,跟著我每周重點攻克一個前端面試重難點。接下來讓我帶你走進高級前端的世界,在進階的路上,共勉!

文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。

轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/7220.html

相關文章

  • 進階 6-2 】深入高階函數應用之柯里化

    摘要:引言上一節介紹了高階函數的定義,并結合實例說明了使用高階函數和不使用高階函數的情況。我們期望函數輸出,但是實際上調用柯里化函數時,所以調用時就已經執行并輸出了,而不是理想中的返回閉包函數,所以后續調用將會報錯。引言 上一節介紹了高階函數的定義,并結合實例說明了使用高階函數和不使用高階函數的情況。后面幾部分將結合實際應用場景介紹高階函數的應用,本節先來聊聊函數柯里化,通過介紹其定義、比較常見的...

    stackvoid 評論0 收藏0
  • 2017-06-27 前端日報

    摘要:前端日報精選漫談函數式編程一十年蹤跡的博客前端每周清單的優勢與劣勢有望超越在嵌入式及物聯網的應用現狀進階系列高階組件詳解一前端之路譯如何充分利用控制臺掘金程序猿升級攻略眾成翻譯中文譯如何充分利用控制臺掘金前端從強制開啟壓縮探 2017-06-27 前端日報 精選 漫談 JS 函數式編程(一) - 十年蹤跡的博客前端每周清單: Vue的優勢與劣勢;Node.js有望超越Java;JS在嵌...

    Eidesen 評論0 收藏0
  • 進階3-2JavaScript深入之重新認識箭頭函數的this

    摘要:箭頭函數的尋值行為與普通變量相同,在作用域中逐級尋找。題目這次通過構造函數來創建一個對象,并執行相同的個方法。 我們知道this綁定規則一共有5種情況: 1、默認綁定(嚴格/非嚴格模式) 2、隱式綁定 3、顯式綁定 4、new綁定 5、箭頭函數綁定 其實大部分情況下可以用一句話來概括,this總是指向調用該函數的對象。 但是對于箭頭函數并不是這樣,是根據外層(函數或者全局)作用域(...

    Rainie 評論0 收藏0
  • 進階1-1】理解JavaScript 中的執行上下文和執行棧

    摘要:首次運行代碼時,會創建一個全局執行上下文并到當前的執行棧中。執行上下文的創建執行上下文分兩個階段創建創建階段執行階段創建階段確定的值,也被稱為。 (關注福利,關注本公眾號回復[資料]領取優質前端視頻,包括Vue、React、Node源碼和實戰、面試指導) 本周正式開始前端進階的第一期,本周的主題是調用堆棧,,今天是第一天 本計劃一共28期,每期重點攻克一個面試重難點,如果你還不了解本進...

    import. 評論0 收藏0
  • 進階2-2JavaScript深入之從作用域鏈理解閉包

    摘要:使用上一篇文章的例子來說明下自由變量進階期深入淺出圖解作用域鏈和閉包訪問外部的今天是今天是其中既不是參數,也不是局部變量,所以是自由變量。 (關注福利,關注本公眾號回復[資料]領取優質前端視頻,包括Vue、React、Node源碼和實戰、面試指導) 本周正式開始前端進階的第二期,本周的主題是作用域閉包,今天是第7天。 本計劃一共28期,每期重點攻克一個面試重難點,如果你還不了解本進階計...

    simpleapples 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<