iT邦幫忙

2022 iThome 鐵人賽

DAY 22
0
Modern Web

一步一腳印,我的前端工程師修煉系列 第 22

Day 22 | 常用到 Array 方法學習心得

  • 分享至 

  • xImage
  •  

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

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

基本介紹
Array 基本說明
Array
JavaScript 中的 Array 全域物件被用於建構陣列;陣列為高階(high-level)、似列表(list-like)的物件。陣列在Javascript…
developer.mozilla.org

根據 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。


上一篇
Day 21 | 好用的 git stash 相關指令介紹
下一篇
Day 23 | 用於除錯的語言機制
系列文
一步一腳印,我的前端工程師修煉30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言