[JavaScript] 常用到 Array 方法學習心得

前言

這篇文章，前半部會介紹一些 Array 常用的基本方法，下面列的方法是目前本人在實際專案時，有運用到的方法，因此各別再去了解，這些方法背後的做的意義。

下半部會列出本人目前在實際專案時，公司所提出的需求，哪針對這個需求，又是如何使用下列 Array 所提供的方法來解決。

基本介紹

Array 基本說明

Array

根據 MDN 對於陣列的解釋，我覺得它是寫的最完整的了，請參考。

陣列：總而言之，我們可以想像陣列是一個資料的集合，然後儲存於陣列中的每一格的值，就把它稱為元素，並且可以新增、刪除、合併、取代陣列中的元素。

陣列的表示方式為：會使用逗號來區隔每個值，最外面則會使用中括號來包住 [...]。

存取陣列的語法為：存取陣列的值時，我們會使用索引值做為鍵值，要注意的是索引值是從 0 開始依序編號為 0、1、2...，其語法為陣列名稱[索引值]。

範例 1

存取巢狀陣列的語法為：陣列名稱[索引值][索引值]

範例 2

Array 物件 - length 方法說明

length：指的是陣列長度。

Arrar 物件 - isArray方法說明

isArray：要檢查的物件是否為陣列。

Array 物件 - concat 方法說明

concat：把兩個同樣都是陣列的型別，串接再一起。

Array 物件 - push 方法說明

push：從陣列的最末端，增加新的元素。

範例 3

Array 物件 - filter 方法說明

filter：使用特定的函式逐一檢驗陣列之元素，以篩選出符合條件的唯一元素。

語法：array.filter (callback) [,that]

語法剖析：

• array：陣列物件
• callback：檢驗各元素的函式
• that：函式中以 this 表示之物件

範例 4

Array 物件 - map 方法說明

map：指的是針對陣列的元素，依序透過要執行要的函式，來另外加工處理。

語法：array.map (callback) [,that]

語法剖析：

• array：陣列物件
• callback：檢驗各元素的函式
• that：函式中以 this 表示之物件

範例 5

實際專案的應用案例分享

案例一分享：

範例 6

案例二分享：

範例 7

結論

陣列的語法有很多，其實沒有必要真的去死記，要記要學的東西太多太多了，當有需求時再來參考，陣列提供的方法中，我要使用到哪個語法可以解決我的問題，這才是重要的。

• 有需求。
• 想想陣列哪些語法可以解決。
• 寫 code 實際去 run。