JavaScript學習之旅-9（原創）

在上一篇文章中，主要學習了JavaScript中this關鍵字的基本使用，apply函式和call函式的基本使用。這一篇文章我們主要學習JavaScript中的高階函式。本篇文章跟之前文章略有不同，本篇文章更加傾向的是如何通過程式碼去完成實際開發的應用場景。

1：比如我們有一個函式，要求對陣列內每個數字求平方。我們可以使用 map 關鍵字去操作

對陣列求平方

什麼是map()？

map() 方法返回一個新陣列，陣列中的元素為原始陣列元素，呼叫函式處理後的值。

map() 方法按照原始陣列元素順序依次處理元素。

注意： map() 不會對空陣列進行檢測。

注意： map() 不會改變原始陣列。

首先我們自己定義一個 square的函式，這個函式的功能就是引數求平方。然後 呼叫arr物件的map方法，本質上來講，就是將陣列內的每個元素對其進行函式的運算。所以當 陣列 呼叫map，map裡面呼叫square的時候，最後列印的就是對每個元素求平方的結果。

2：將陣列內的數字，變為字串陣列

數字陣列轉換為字串陣列

3：將陣列內的字串，各元素變為首字母大寫的字串陣列

變為首字母大寫

4：將字串陣列轉換為int陣列

將字串陣列轉換為int陣列

reduce

reduce也是一個關鍵字。這個reduce主要是對Array的每個元素，自定義的函式作用在這個Array的每個元素上，比如說，我們對一個陣列進行元素內的求和以及求基，那麼使用reduce就可以快速實現這功能

陣列內元素求和

陣列內元素求積

通過map和reduce，我們可以實現，將一個數字字串轉換為數字

數字字串轉換為數字

filter

filter關鍵字也是一個常用的操作，它用於把Array的某些元素過濾掉，然後返回剩下的元素。和map()類似，Array的filter()也接收一個函式。和map()不同的是，filter()把傳入的函式依次作用於每個元素，然後根據返回值是true還是false決定保留還是丟棄該元素。

比如，我們過濾掉陣列內的偶數：

過濾掉陣列內的偶數

過濾奇數：

過濾奇數

把一個Array中的空字串刪掉：

刪除空字串

filter()接收的函式，其實可以有多個引數。上面的例子僅使用了第一個引數，表示Array的某個元素。這個函式還可以接收另外兩個引數，表示元素的位置和陣列本身：

filter三個引數

利用filter，去除Array的重複元素：

去除Array的重複元素-1

這種去除重複，是通過filter關鍵字幫我們實現的，如果我們不使用這個關鍵字，自己該如何實現咧？

簡單分析下，首先我們可以定義一個陣列，先遍歷原始陣列，如果原始陣列的屬性值不相同，新陣列就新增這個屬性值，於是乎我們就可以有了以下程式碼：

去除Array的重複元素 - 2

排序演算法 Sort

我們知道，Java中可以使用sort為我們進行排序，同樣，在JavaScript裡面也有sort進行排序

但是，這個sort排序有些意識，

sort簡單使用

嗯，看上去sort已經預設為我們排序完畢了，但是

sort排序數字陣列

what？結果居然有問題？10比2還小？這是啥情況？

因為Array的sort()方法預設把所有元素先轉換為String再排序，結果'10'排在了'2'的前面，因為字元'1'比字元'2'的ASCII碼小。但是，sort()方法也是一個高階函式，它可以接收一個比較函式來實現自定義的排序。也就是說我們可以自定義規則。在自定義規則之前，我們首先要理清楚：

JavaScript通常規定，對於兩個元素x和y，如果認為x < y，則返回-1，如果認為x == y，則返回0，如果認為x > y，則返回1，這樣，排序演算法就不用關心具體的比較過程，而是根據比較結果直接排序。

明白這個概念以後，我們就可以定義規則，首先定義一個從小到大的計算規則：

從小到大排序

舉一反三，我們就可以知道 從大到小該如何排序了：

從大到小排序

說完了數字我們在說說字串的比較，比如我們經常要對使用者的姓進行A-Z的排序，

首先看看原始的sort排序是什麼樣的效果

sort原始排序字串陣列

結果發現，這種不是我們想要的完美結果，解決辦法跟上面的類似，我們自定義sort函式，比如我們忽略大小寫來比較兩個字串，實際上就是先把字串都變成大寫（或者都變成小寫），再比較。

sort自定義函式排序字串陣列

本篇文章主要學習的是關於map、reduce、filter、Sort關鍵字的使用。本章的基本內容就結束了。

未完待續。。。

如果這篇文章對您有開發or學習上的些許幫助，希望各位看官留下寶貴的star，謝謝。

Ps:著作權歸作者所有,轉載請註明作者, 商業轉載請聯絡作者獲得授權，非商業轉載請註明出處(開頭或結尾請新增轉載出處，新增原文url地址),文章請勿濫用,也希望大家尊重筆者的勞動成果。