iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 29
0
自我挑戰組

JavaScript之一定要了解的 Array 與方法系列 第 29

JS ECMAScript 5 的陣列 Array 方法淺析

Day 29

生活要簡約,寫程式也是。但是,可能嗎?

ECMAScript 5 的陣列方法,除了前兩篇介紹的indexOf()lastIndexOf()外,還有許多非常好用的方法,這些方法包含了對陣列做迭代(iterating)、對映(mapping)、過濾(filtering)、測試(testing)、約簡(reducing)這是什麼?! 和搜尋(search)的功能。

剛開始接觸這些「動詞」時,實在有點不知所措,我們先來了解一下這些詞的意義。因為這些詞用在不同的領域會有不太相同的解釋,所以我們以 JavaScript 的解釋為主。中文翻譯部分也會以「JavaScript 大全中文版」為主。

https://ithelp.ithome.com.tw/upload/images/20191014/20104175XLumawbfhE.png

迭代(iterating)

  • forEach()

Iterate 的中文是「重複」,在程式裡指的是反覆運算,如果我們希望程式重複的做一件事,最常想到的是迴圈,重複執行一項指令。而迭代也和迴圈相似,反覆的運算直到不符合我們給的條件而停止。迭代也常被拿來和「遞迴」(Recursively)一起討論,遞迴算是迭代的升級版,和迭代最大的不同是,遞迴會把我們運算出來的結果,當作下一次重複的初始值,直到找到符合我們要的值與到達終止的條件。
參考:疊代 - 維基百科,自由的百科全書

對映(mapping)

  • map()

有些書上也會把 mapping 翻譯成鏡射或是映射。較容易理解的解釋是我們對每一個陣列上的元素做一些「加工」,然後加工後的結果,再依原本的陣列順序「存放」在另一個新的陣列裡。例如,我們希望對每個陣列裡的數字做「同樣」的運算,然後再把這些運算完的結果,照順序放到另一個陣列裡。
參考:Mapping - Wikipedia

過濾(filtering)

  • filter()

相較於其他,過濾很容易懂。顧名思義就像是過濾器,很像我們常用的 if 語句,只把我們想要的(符合條件)留下來,集合起來成另一個陣列。

測試(testing)

  • every()
  • some()

測試這個詞大家都懂,但是本人覺得這裡的測試,比較像是「是非題」,檢查陣列元素時,如果有一個符合我們給的條件,就會回傳 true,全部都不符合條件就會回傳 false。感覺這樣的運作方式很像 JavaScript 裡的邏輯運算子的 AND &&和 OR||,如果是||,只要有一個是true就算其他的都是false也會回傳true

約簡(reducing)

  • reduce()
  • reduceRight()

Reducer 的中文是「減速器」是在簡約什麼?,這聽起來有點古怪,被稱為 reduce 的原因是因為,我們通常會用它來將陣列精簡成一個值,例如加總或計算陣列的平均值。也就是說,依據我們指定的函式,結合陣列的元素而產生一個值。這樣的方式常被拿來用在程式中的運算,所以也會被成為注入(inject)或折疊(fold)。

搜尋(searching)

  • indexOf()
  • lastIndexOf()

search 相信大家都知道,這個詞就是搜尋和查找的意思,這些方法會依照我們給的值,去陣列裡查找,並將找到的這個值的位置回傳給我們。這兩個搜尋的方法,是少數不以函式當參數的陣列方法。

ECMAScript 5 的陣列方法共同的特徵

以上就是 ECMAScript 5 的陣列方法的淺略解析,基本上這些方法都有一些共同的特徵:

  1. 這些方法的基礎都是使用「迭代」,對陣列元素重複做同一件事。
  2. 這些方法的參數大多是函式,以呼叫(callback)函式的方法,來當此方法的參數,且會對陣列裡的元素執行一次此函式。
  3. 如果陣列是稀疏的,指定使用的函式不會在這些稀疏陣列上起作用。
  4. 陣列方法的參數函式會用三個引數來調用:陣列的元素值、陣列的索引值以及陣列本身。通常只需引數的第一個,可忽略第二、三個引數。
  5. 陣列方法的參數函式也可接受額外的第二引數(如語法的[, thisArg]),如果有此第二引數,那麼傳入的參數函式會被當作第二引數的方法來調用,等同於我們傳入的第二引數會變成傳入的參數函式內的this關鍵字的值。這部分是不是感覺有點混亂? 我也是我們之後有更詳細的說明。

如果能了解上面的特性與規則,相信碰上 ECMAScript 5 的陣列方法,用起來就會更得心應手了。

原本是想要今天開始進入 ECMAScript 5 陣列方法的重心的 進入內心戲,但是看來應該是要在鐵人賽之後了,明天是鐵人賽的最後一天,總是要聊一下參賽感言,感言講完了,我們再好好的來聊聊這幾個 ECMAScript 5 非常重要的陣列方法囉!沒錯!我想繼續鐵人!

如有需要改進的地方,拜託懇求請告知,我會盡量快速度修改,感謝您~


上一篇
JS 陣列 Array 方法,找出最後一個元素的索引值 lastIndexOf()
下一篇
JS 陣列 Array 之小菜還沒出完
系列文
JavaScript之一定要了解的 Array 與方法34
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言