9-2 Object 物件表達式、取用方法、使用實例

Original: https://course.andys.pro/Javascript-Intro/09-2-object-object-expression-access-method-use-case/

講義

1. 取用物件屬性的兩種方法

要從物件中拿取資料，常用的有以下兩種記法：

• 點記法 (Dot Notation)：
  • 語法：person.name
  • 優點：簡潔易讀，是最常用的方式。
• 中括號記法 (Bracket Notation)：
  • 語法：person["name"]
  • 優點：支援動態取值。括號內可以放入變數。
  • 範例：

    var myKey = "name";
    console.log(person[myKey]); // 等同於 person.name

2. 修改與指派屬性值

物件建立後，可以隨時透過賦值運算子 = 來修改其屬性內容：

• person.name = "黃大明"; // 將原本的名字改掉
• 如果指派了一個原本不存在的屬性，JavaScript 會自動幫你新增該屬性。

3. 物件方法 (Methods) 的存取與執行

• 參考 (Reference)：person.sayHello
  • 這只是指引到該函式本身，並不會執行內容。
• 執行 (Execute)：person.sayHello()
  • 加上小括弧 () 才會真正跑起該函式內的程式碼。

4. 命名空間 (Namespace) 的概念

物件可以像資料夾一樣，一層包一層，這稱為命名空間。

• 範例：document.querySelector()
  • document 是一個全域物件。
  • querySelector 是在 document 這個命名空間下的其中一個方法。

5. 鍵 (Key) 與 值 (Value)

• Key：像是物件裡的「標籤」或「索引名稱」。
• Value：標籤對應的「內容資料」。

影片逐字稿 (AI 生成)

好,我們現在來看9-2,就是object的表達式那我們剛剛前面的9-1已經先讓大家提前看到了object怎麼樣的操作那我們來看物件的表達式,還有取用方法和使用的實例首先呢,剛剛我們前面有提到就是property那我們要怎麼拿一個property呢?我們有一樣的目標,就是我們要拿裡面的這個東西,把它直印出來那首先你可以用.name的方式如果person裡面有name的話,你可以點name拿到這個,它的value是黃曉銘這個自創那還有另外一個方法,比較像是array的拿法那只是在array就是數列,那數列的拿法這種寫法呢原本我們數列是不是拿index0123去拿第0個、第1個、第2個的東西那在這邊我們換成object,我們是拿的key放進去比如說我們這邊的key是name那大家會覺得說,那我就直接用點這種寫法就好啦那為什麼還要多學一個這個的做法有時候在我們寫call的時候呢有時候我想要動態的去拿person裡面的某一些類型這時候用這個方法,比如說你有name,然後就可以把字串放進去你可以用變數的方法來叫它比如說你可以在外面寫一個a等於name,然後你把a放進去person,括號a,然後就可以拿到它那這邊呢,比如說像如果我今天有一個物件然後它的name原本不是黃大名,它是黃曉銘嘛然後改名變成是黃大名這時候我們可以把這個person.name去把它名字改成黃大名好,那我們直接,我寫一個好,我們先建一個person然後等於然後等於然後等於裡面有寫一個它的name冒號黃曉銘好這邊呢我們把剛剛的例子印出來叫做person.name或者是我們先存檔真的啊,跑一次嗯嗯喔Person有沒有到到到到到到到到到到到到到到到到到到到到到到到到到到到到那我們可以來log另外一個寫法person好,那我們拋起來那就有兩個黃曉銘那剛同學有說欸,同學可能覺得奇怪老師在講說為什麼這種寫法有什麼好處這時候就可以Person那其實這個寫法跟上面寫法是一樣的只是我把這個字串在外面用另外一個變數存這邊記得先存檔再跑這個A就是把它變成這樣子它是一個變數放進來好的 那我們先來看如何指派那我在這邊講說Person.name等於黃大明這個時候Person裡面的就變成黃大明了那你如果想要確保就是它是這樣子的話那我們直接把這個Person印出來來看它裡面長得是怎麼樣OK這時候這個物件Person是不是它的名字已經改成黃大明了OK好那我們剛才前面也有提到就是說嗯…Function裡面我們也可以在物件中建立Function的話是這樣去建立或是我在宣告的時候我就已經把那個Function寫在裡面了好那我們把剛剛那份Code我們來寫一個say hello嗯…我寫在上面這裡好嗯…我寫在上面這裡好好了…那我們現在跑起來的話它…這裡大家有沒有看到這邊say hello它就多了一個Function因為我在這邊建立了一個Function那你其實可以在外面再把這個Function傳到裡面say hello或者是像剛剛我們一開始所講的我把…這個部分直接在裡面寫在裡面寫那在裡面寫的時候記得喔你要說它是say hello欸…這裡有點錯誤有沒有因為忘記加那個豆豪好…其實這兩種的做法是一樣的只是一個是寫在裡面一個是後面再把它…後面建好Function然後再把它傳進去OKOK喔…這邊…這邊…這邊…註解要…把註解拿出好了喔…這邊拿來喔在這邊我們還有提到另外一個東西叫做取用函式那這邊呢我們可以看到那個paper裡面的這邊課本的補充在呼叫與參考在課本的第104頁這邊要講的事情是說當你去person.say hello拿這個東西拿出來的時候當你後面沒有做小括號的時候他是把這個函式這個function當作一個你是拿到這個function本身拿到這個函式可是當你去做小括號後面加小括號你是去執行那這個部分是函式的一個做法就是說當你把它當變數拿的時候它是一個變數當你跑小括號的時候它才會開始跑好的那我們把剛剛這一份code啊我們把前面的部分這裡我們先把它我們把它在browser裡面跑那這邊剛剛要提到的事情是alert其實你如果是在vscode裡面我們可以跑給大家看就是如果我要我這邊都把它先註解好就是我如果person.say hello然後我在這裡面跑起來的話它會出現錯誤它會說alert is not defined這個問題是因為node其實沒有alert這個function因為node是後端javascript那我們現在在側的都是在前端在跑javascript所以alert是在瀏覽器裡面才可以跑起來所以我們要到瀏覽器然後我們到剛剛的google console這邊然後先把它清掉我們先把這些東西先定義起來那我們定義起來以後我們是不是可以看到person然後person有名字是黃曉明然後叫say hello這時候我可以拿這個person這個物件我可以說它的名字點name或者是我可以person點say hello可是當我say hello的時候他會跟我講這是一個f為什麼是一個f呢因為它是一個function它本身就是一個function我拿到一個function那我要讓這個function去執行我要這樣然後它就alert跑出high在這裡OK所以這兩個差別一個是拿這個盤式另外一個是去執行它那這邊的取用方法呢我們看到剛剛有一個點name是叫做點計法叫做dat notation然後這個刮弧叫做bracket的notation好這邊有提到name space就是說在這個物件底下呢的命名空間我們叫做就是裡面的我們叫做子命名空間就是說在這個物件在這個物件底下在這個物件底下OK所以我們點這個name和點say hello就是到它的子命名空間有點像是資料夾就是一層一層的進去OK那在這裡面我們叫它的子命名空間好好這邊有提到就是說物件的使用呢其實document也是一個物件那我們拿curry selector的時候其實就是在拿到它的function然後我們去執行它那只是不一樣的事情是我們在這個curry selector裡面我們是不是還有放一個csx selector就我們把一個字串傳給它叫它依據這個字串去查拿到我們要的東西給我們拿到我們要的東西給我們OK所以這個curry selector其實也是一個function喔我們來看一下document是一個物件裡面有很多的不同的methods嘛對不對和properties那如果當你拿到methods比如說像curry selector這個當你這樣子的時候呢你拿到的就是一個function這個function是裡面是native code它就是一個function那我要去執行它比如說像這樣子那因為你要先在curry selector我們要放比如說像這樣參數進去OK所以其實它就是一個在document指namespace底下的一個function所以你要這樣去操作它好的在這一行另外我們提到的這個東西就是在bracket的表示法裡面呢這邊有提到key跟value那大家可能就是不是很理解什麼是key什麼是value那我剛剛前面也是一直有提到主要key呢就是說我在這裡面有點像是array裡面的index可是這個key就是說有點像是一個鑰匙我在這個array對嗯那什麼叫array one就是應該叫object one好就是object裡面呢我我給它一個我去拿比如說像剛才的黃曉明我要拿他的名字我是不是要告訴他說欸我要拿你的姓名那這個姓名就是key然後我括號拿到這一整個東西其實就是拿到它的value拿出來OK大家大致可以理解好那lab2可能讓大家去操作看看那大家也可以先寫來看前面的sample code好那這邊是9-2的部分好

影片逐字稿largev2

好,我們現在來看9-2,就是Object的表達式那我們剛剛前面的9-1已經先讓大家提前看到了Object怎麼樣操作那我們來看物件的表達式,還有取用方法和使用的實例首先呢,剛剛我們前面有提到就是Property那我們要怎麼拿一個Property呢?我們有一樣的目標,就是我們要拿裡面的這個東西把它指印出來那首先你可以用.name的方式就是如果Person裡面有name的話,你可以.name拿到這個,它的value是黃曉明這個字串那還有另外一個方法比較像是array的拿法那只是在array就是數列那數列的拿法這種寫法呢它原本我們數列是不是拿index 0,1,2,3去拿第0個、第1個、第2個的東西那在這邊我們換成Object,我們是拿的key放進去比如說我們這邊的key是name那大家會覺得說,那我就直接用.這種寫法就好啦那為什麼還要多學一個這個的做法有時候在我們寫code的時候呢有時候我想要動態的去拿Person裡面的某一些類型這時候用這個方法,比如說你有name然後你就可以把字串放進去你可以用變數的方法來叫它比如說你可以在外面寫一個a等於name然後你把a放進去,person括號a然後就可以拿到它那這邊呢,比如說像如果我今天有一個物件然後它的name原本不是黃曉明然後它改名變成是黃大明這時候我們可以把這個person.name去把它的名字改成黃大明好,那我們直接寫一個我們先建一個person然後等於裡面有寫一個它的name號號黃曉明好這邊呢我們把剛剛的例子印出來叫做person.name或者是我們先存檔跑一次喔有了好,黃曉明好的那我們也可以來log寫法好,那我們跑起來然後就有兩個黃曉明那剛剛同學有說,同學可能覺得很奇怪老師在講說為什麼這種寫法有什麼好處比如說我今天再建一個var a等於name這時候我就可以persona這個寫法跟上面寫法是一樣的只是我把這個字串存到外面在外面用另外一個變數存這邊記得先存檔再跑ok這個a就是把它變成這樣子它是一個變數放進來好的那我們先來看如何指派那我在這邊講說person.name等於黃大明這個時候person裡面的就變成黃大明那你如果想要確保它是這樣子的話那我們直接把這個person印出來來看它裡面長什麼樣子ok這時候這個物件person是不是它的名字已經改成黃大明了ok好那我們剛剛前面也有提到function裡面我們也可以在物件中建立function的話是這樣去建立或是我在宣告的時候我就已經把那個function寫在裡面了好那我們把剛剛那份code我們來寫一個say hello我寫在上面這裡好了ok好了那我們現在跑起來的話它這裡大家有沒有看到這邊say hello它就多了一個function因為我在這邊建立了一個function那你其實可以在外面再把這個function傳到裡面say hello就像剛剛我們一開始所講的我把這個部分直接在裡面寫那在裡面寫的時候記得喔你要說它是say hello這裡有點錯誤因為忘記加那個逗號好其實這兩種的做法是一樣的只是一個是寫在裡面一個是後面再把它後面建好function再把它傳進去okfunction這邊註解要把註解拿出來這邊拿來function好好在這邊我們還有提到另外一個東西叫做取用函式那這邊呢我們還可以看到那個paper裡面的這邊課本的補充在呼叫與參考在課本的第104頁這邊要講的事情是說當你去personsay hello拿這個東西拿出來的時候當你後面沒有做小括號的時候它是把這個函式這個function當作一個你是拿到這個function本身拿到這個函式可是當你去做小括號後面加小括號你是去執行那這個部分是函式的一個做法當你把它當變數拿的時候它是一個變數當你跑小括號的時候它才會開始跑那我們把剛剛這一份code我們把前面的部分先把它不好意思我們把它在browser裡面跑這邊要提到的事情是alert其實你如果是在VSCode裡面我們可以跑給大家看如果我要我這邊都把它先註解好就是我如果person.sayhello然後我在這裡面跑起來的話它會出現錯誤它會說alert is not defined這個問題是因為你node其實沒有alert這個function因為node是後端的是後端JavaScript那我們現在在測的都是在前端在跑JavaScript所以alert是在瀏覽器裡面才可以跑起來所以我們要到瀏覽器然後我們到剛剛的Google Console這邊然後先把它清掉我們先把這些東西定義起來那我們定義起來以後我們是不是可以看到person然後person有名字是黃曉明然後要sayhello這時候我可以拿這個person這個物件我可以說它的名字點內或是我可以person.sayhello可是當我sayhello的時候它會跟我講這是一個F為什麼是一個F呢?因為它是一個function它本身就是一個function那我要讓這個function去執行我要先然後它就alert跑出hi在這裡所以這兩個的差別是一個是拿這個函式另外一個是去執行它那這邊的取用方法呢我們可以看到剛剛有一個.name是叫做點記法叫做dot notation然後這個括弧叫做bracket的notation好這邊有提到namespace就是說在這個物件底下呢的命名空間我們叫裡面的我們叫做子命名空間就是說在這個物件在這個物件底下ok所以我們點這個name和點sayhello就是到它的子命名空間有點像是資料夾就是一層一層的進去那在這裡面我們叫它子命名空間好這邊有提到就是說物件的使用呢其實document也是一個物件那我們拿query selector的時候其實就是在拿到它的function然後我們去執行它那只是不一樣的事情是我們在這個query selector裡面我們是不是還有放一個css的selector就我們把一個字串傳給它叫它依據這個字串去查拿到我們要的東西給我們所以這個query selector其實也是一個function喔來看一下document是一個物件裡面有很多的不同的methods嘛對不對和properties嘛那如果當你拿到methods比如說像query selector這個當你這樣子的時候呢你拿到的就是一個function這個function是就是一個function那我要去執行它比如說像這樣子那因為你要先在query selector我們要放比如說像這樣參數進去ok所以其實它就是一個在document子空間子name space底下的一個function所以你要這樣去操作它好的在這一行另外我們提到的這個東西就是在bracket的表示法裡面呢這邊有提到key跟value那大家可能就是不是很理解什麼是key什麼是value那我剛剛前面也是一直有提到主要key呢就是說我在這裡面有點像是array裡面的index可是這個key就是說有點像是一個鑰匙我在這個array就是應該叫object1就是object裡面呢我給它一個比如說像剛才的黃曉明我要拿他的名字我是不是要告訴他說我要拿你的姓名那這個姓名就是key然後我括號拿到這一整個東西其實就是拿到他的value拿出來ok大家大致可以理解那lab2可能讓大家去操作看看那大家也可以先寫寫看前面的sample code那這邊是9-2的部分