iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 11
0

前言

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

物件 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 關


上一篇
10 This
下一篇
12 陣列補充
系列文
花三十天找到 JavaScript 沙漠中的綠洲35
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言