【零基礎】簡易JavaScript #7-Array,Object,Function

輕鬆學會JS、HTML 5、CSS 3 — 寫出港鐵到站時間網頁

Panda Man
Feb 8, 2021

本集重點:

  • 資料結構 — Array
  • 資料結構 — Object
  • Function 格式 及例子
  • 初學者Function常犯錯誤

如果本來已學會的朋友,可以直接跳過。

資料結構 — Array

先前已經學會const 和let 這些定義變數,但如果是一連串的資料,例如一班同學的名字,哪是不是100人有100個變數?

不是!Array就是幫您儲存一連串資料的結構。

它的格式是以 [] 包着數值,數值之間以逗號分開。要如何抽取內裏的數值呢?

Array有一套排位編號,排首位是0,接着是1。如此類推。

緊記是由0開始!

只要用原本的變數名稱,加上[],中間插入排位編號就可以抽取數值。上面的例子array[1] 就是dog。

資料結構 — Object

另一種常見的就是Object,它可以處理一組資料,例如一個朋友,有電話、姓名、地址等,是同一個人的資料。

Object 中有key 和value ,key 是欄目,可以任由你命名,不用”” 引號也可以,JavaScript不會把它當成variable 。例如你可以加插 address:"Hong Kong"在中間,key-value pair 之間以逗號分隔。

提取數值有兩個方法,一個是variable和key 中間加一點 people.age 或 用方括號包着欄目名稱,但留意欄目名稱要有引號,即people[“age”]。

這種複合型的資料結構,是很常見的類型,一個array,有很多object。像你的通訊錄,有很多朋友,每個朋友都有姓名和電話。只要一層層的拆就可以。

最外層是Array ,而目標是排位編號是2 ,因此第一步是peopleList[2]peopleList[2]是一個object ,我們以object 的方式拆解,欄目是age答案:peopleList[2].age 或 peopleList[2][‘age’]

Function 格式 及例子

Function 其實是一些重覆性的code ,我們把它簡化,讓它們可以輕易重用,像是一個劇本一樣,寫好了,就交給它們演吧!

function 有兩種格式,showAge是一個名字,可以任意改動。
只要在function 內加上return ,就可以回傳計算好的結果。此外,Function還可以從外部接收數值。

Function常犯錯誤

作者的話 (可以略過)「我要控制科技,而不是被科技控制我!」感謝您看我的文章。
我原本是一個新聞記者,但年近30,開始感到迷惘。
於是報讀了Coding Bootcamp,3個多月成功轉職「軟件工程師」。
很多朋友問我到底難不難?
我嘗試運用記者經驗,將問題深入淺出,簡短地讓沒有經驗的你,感受一下Programming適不適合自己。
另一個目的,我希望累積教學經驗。
日後有手足要幫忙,我可以幫到。
即使沒有財力開公司請人,也希望授之以漁。
所以有問題請留言,我也希望知道自己哪裏講得不夠好。
▲▲香港 時代▲▲

--

--

Panda Man
Panda Man

Written by Panda Man

前媒體人,年近30,在迷茫的人生路上渾渾噩噩。在媒體環境變得喘不過氣之時,卻發現科技潮流勢不可擋。 最後「裸辭」讀Programming,竟然成功轉職為Developer,開創了第二人生。

No responses yet