前言

今天我們要進入一個全新的章節，陣列與物件。當你打開一個網頁，背後可能儲存了各式各樣的資料，諸如字串、數字等等，我們可以把這些資料放置在物件與陣列中。

物件 Object

除了布林值、 null 、 undefined 、數字、字串、 BigInt 和 Symbol 以外，所有東西都是物件。

它把資料放在大括號{}中，以逗號隔開不同項目的資料，裡頭可以放置布林值、數字、字串，和等等才會講到的陣列。儘管布林值、數字、字串本身並不是物件，但可以置放於物件中。太抽象嗎？讓我們實際寫寫看吧！

let house = {
    "username":"Sam",
    "room":2,
    "window":false
}

宣告房子是一個物件，使用者姓名是 Sam ，有兩間房間並且沒有窗戶。打完之後，當你在 console 面板輸入 house ，應該會跑出所有的資料：

除此之外，如果我想要在 console 面板單獨提取某一項資料，只要輸入如 house.room 即會得到 2 這個答案。在這裡， username 、 room 、 window 都是屬性，除了英文也可以是中文 "持有人":"小王" 或數字 "1":"第一名" 。但要取數字或是其他奇怪字元時，以 "1":"第一名" 這句為例，要改成打 house["1"] ，不然會讀不出來。

也可以一開始先設立空物件，之後才陸續把資料推進本來是空的物件裡面。例如：

let room = {};
room.username = "Tim";

以上當然也適用本來不是空物件，但有東西沒放到，之後想補放的情形。請特別注意，像這樣事後才推資料進去，要用等號而不是冒號。相反的，如果是一開始就寫在物件裡，用的是冒號。

把資料放進去之後，我們可以在需要的時候把它提取出來。還記得之前教到的 querySelector 和 innerHTML 嗎？首先我們可以在 html 先寫好部分文字，並且設好要放入文字的區塊如下：

總共有 <span class = "word"></span> 間房間

接著撰寫 js 部分。

let house = {
    "username":"Sam",
    "room":2,
    "window":false,
}

let word = document.querySelector(".word");
word.innerHTML = house.room;

如果你沒把之前學到的忘光光，上面的寫法應該不是很難理解。只有最後一句 word.innerHTML = house.room; 要注意，但其實也就只是跟剛剛前面在 console 面板單獨取值的方法一樣而已。

陣列 Array

看完了物件，讓我們來看陣列。陣列是將資料放在中括號[]中，以逗號隔開所有資料，並且可放入布林值、數字、字串等。

let ary = ["a","b","c"];

和物件一樣，也可以是空的，之後才補資料，只是它補資料的方式和物件稍有不同。舉例來說，我想要把 d 這個資料放進上面的陣列 ary 中，需要寫 ary.push("d"); 。透過 console 面板，可以看到 push 後 ary 新增了一筆資料在後面。

同時，因為陣列有時會一次放好幾筆資料，想要知道某筆陣列裡共有幾筆資料，只要寫 陣列名 + .length 就可以了，例如 ary.length 。

那麼，要怎麼去取值呢？以我們上面的 ary 為例，當我想要取 a 這個值時，我必須寫 ary[0] ，依此類推。也就是說，第一筆資料其實是 0 ，第二筆資料是 1 。如果我想要覆蓋第一筆資料，把 a 改成 A ，那麼我可以寫 ary[0] = "A" 。

最後，讓我們來練習看看，下面的題目，會出現什麼答案？

//第一題：請問下面 console.log 會出現哪個顏色？
let color = ["red","green","blue"];
console.log(color[2]); 

//第二題：承上，我要怎麼取出紅色？

//第三題：我想要新增橘色，變成陣列的第四筆資料，要怎麼寫？

//第四題：我發現我打錯了，第四筆資料應該是黃色才對，請問我要怎樣把第四筆資料改成黃色？

//第五題：我懶得數 color 裡有幾筆資料，我要怎麼打，讓電腦自動告訴我答案？

學習與參考資料

JS 學徒特訓班教學影片及練習題 15 關