Immutable 觀念

說來慚愧, 已經學了快一年的js, 筆者今天才算是徹底了解了這個觀念, 不知道那些年我是怎麼debug的…
當初知道這個概念是看教學影片, 但是一知半解, 我一直以為就是很簡單的, 回傳的東西要用另外一個變數接收
但是根本只瞭解了一半而已…寫這篇文章不為別的, 就是為了要讓自己更了解.

Primitive type

中文翻譯為基本型別, 這就是我們今天的主角之一.
在mdn也寫得很清楚除了, 就是除了Object以外, 都是基本型別
包含了最常見到的: Number, String, Boolean, Null, Undefined 和比較不熟的BigInt和Symbol.

這基本型別的特色就是不可修改的 -> Immutable

什麼意思?

先來看範例

1 2	var a = 'hello' a = 'yo'

a: ‘hello’ 存在0x01的記憶體位置
a: ‘yo’ 不是把0x01改成hello, 而是新開記憶體位置0x02存yo

這其實也衍伸了一個常用範例

var a = 'hello'
a = a + yo

// 可以改寫為
a += 'yo' 

console.log(a) // helloyo

你不會寫成這樣, 因為寫成這樣, 記憶體位置一樣, 所以還是輸出’hello’

1 2	a + yo console.log(a) // hello

同樣的, 使用方法一樣也是, 因為要新開記憶體位置, 所以重新給變數是一定要的, 即使是一樣的變數也是可以接受的.

1
2
3

var a = 'hello'
a.toUpperCase() // 這步是錯的
console.log(a) //  hello

要改成這樣

1
2
3

var a = 'hello' 
a = a.toUpperCase() 
console.log(a) // HELLO

可以看成, 我先把a.toUpperCase = ‘Hello’, 存在0x02中, 再把它存到a裡面.

總結

除了物件, 陣列以外值都是不可變的, 所以call toUpperCase()是沒有結果.
(我之前在split被搞到印象很深刻)

Object Types

Object呢，你可以想像成蓋房子一樣，Primitive Types就像是一塊磚子，但能單靠一塊一塊磚子疊出來的房子不可能大到哪裡去，是吧 ?這時候我們是不是就需要鋼筋阿水泥阿混擬土阿，將各種元素包在一起的的結構去建造出更大結構的房子，Object就是這樣的一個存在，Object可以讓我們將多個Value包再一起，也可以Object包Object，藉此能做出一個更複雜的結構完成更複雜的事情。

上述是我在鐵人賽看到別人寫的, 讓我對Object更有想像.

Mutator Methods

會實際修改到Array的method

這種變種方法, 因為會直接改變arr, 都不用再用變數接收
如果有用變數接收可以看mdn的定義, 像是push是回傳陣列長度, 而splice回傳被刪除的陣列元素

var arr = [1,2,3]
arr.push(4)
arr.unshift(0)
arr.splice(1, 1)
console.log(arr)// [0,2,3,4]

arr = arr.push(4)
console.log(arr)  // 4 -> 這是陣列長度

arr = arr.splice(1, 1)  
console.log(arr) // 1 -> 這是被刪除的元素

mdn

Accessor methods

對比於Mutator method，這一類的method便是沒有實際更動到原array的methods，而是回傳一個全新的array instance。通常回傳的東西不是array了, 因此需要變數接收. (注意是通常, 非絕對)

1
2
3

var animalSign = [ '鼠', '牛', '虎', '兔', '龍', '蛇', '馬', '羊', '猴', '雞', '狗', '豬' ]
var newAnimal = animalSign.join('!')
console.log(newAnimal) // 鼠!牛!虎!兔!龍!蛇!馬!羊!猴!雞!狗!豬

> mdn

Iteration methods

迭代方法, 基本上就是針對陣列一個一個訪問.
這部分其實筆者在其他的篇章已經介紹很多次了, 直接附上連結.

Array-Cardio
Array-Cardio-II

> mdn