iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 4
0
Modern Web

學會Elm寫前端系列 第 4

04 Elm的資料結構

  • 分享至 

  • xImage
  •  

Collection

可以把elm 當做是一般的語言來學,譬如就有人 拿來解 adventofcode[fn:1], 而一個語言最重要的就是 data structurealgorithm 了啊。我們來看看elm 的 資料結構:

lists

Array in JS List in Elm
[1, 2, 3].length List.length [1,2,3]
["one", "two"][0] List.head ["one", "two]
["one", "two"][1] X
[1,2].concat([3,4] [1,2] ++ [3,4]
[1,2].pust(3) List cannot be modified
[1,"book",3] List is the same type

看完上述的例子,你可以看到有什麼不同?

  • List 是一個module, 裡面有function 可以操作,和JS 不同是呼叫物件(object)的方法(method)
  • Listheadtail , 和本來的array不同,不是用position 定義的,tail就是一個list裡除了head以外,所有其他的東西。譬如 [1,2,3] 裡, head 就是 1,[2,3] 是 tail。這個叫linked list,如果要指定一個array裡頭的特定位置,可以用Elm 的 Array , 我們之後有機會再提
  • List 是無法改變的,如果你要加一個3到[1,2] 裡,要用 append [1,2] [3] 變成一個新的array, 在functional programming 裡所有的東西都是immutable的(謎之音:那haskell 的 IO Monad呢?也是immutable,functional programming 有其他方式來操作要改變的state們等,改天寫haskell系列再來寫這個)
  • List 裡面的類型要一樣,譬如如果是 String 就不可以放數字。這個等後面一點再來詳說。Elm 是有type的。

records

這裡的record 和 JS 的object比較類似,再開始說之前,我們再來看看比較表:

Object in JS Record in Elm
{name: "John", age: 48} {name = "John", age = 48}
{name: "John", age: 48}.age {name: "John", age: 48}.age

看起來很像對不對,但是Record在elm 裡沒有prototype, 所以你可以在JS 有 object.prototype, 或是你可以用 Object.age 這些在Elm都不可以,因為它不是object,而僅是一種資料的結構。 如果我們的這個 Person 多了一歲怎麼辦?

person = {name = "John", age = 48}
newPerson = {person | age = 49}

用一個 pipe, 左邊是你要留的,右邊是你要更改的。

還有些不一樣的地方:

  1. elm 的 record沒有什麼 undefined 也沒有 null
  2. 沒有 thisself

tuples

t = ("John", 48)
Tuple.first t # "John"
Tuple.second t # 48

這個就是tuple。tuple可以是不同類別的,比較常看到兩兩一組。使用時機,這…等到用上了再細說。內建的 Tuple.first,
Tuple.second, 在兩兩一組的tuple。不過你可以這樣想:把 tuple 當成是 record
的濃縮版就對了!像這裡,我們的名字叫做 John, 年紀是 48 歲,但是,我們把
record 裡的 nameage 省略,就變成tuple了!

整理

records tuples lists
固定長度(fixed) 固定長度(fixed) 變化長度(variable)
類別多種 類別多種 單一類別(same type)

明天再來請大家喝茶 TEA (The Elm Architecture) !

footnote

[fn:1] http://adventofcode.com/ 目前有2015,2016,2017正在進行中的小問題解答,可以在github上找到很多人用不同語言解


上一篇
03 瞭解 Elm 裡的 function
下一篇
05 來喝茶吧,認識 The Elm Architecture
系列文
學會Elm寫前端30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言