iT邦幫忙

2022 iThome 鐵人賽

DAY 9
0
自我挑戰組

JavaScript101與人生幹話系列 第 9

JavaScript101與人生幹話-變數的原始型別-物件2

  • 分享至 

  • xImage
  •  

什麼是物件

舉例來說,陣列像是一個大的倉庫,可以整個貨櫃進去,那物件有點像是可以分門別類擺放東西的整理盒

那為甚麼要用物件

舉個學生姓名與成績的例子

let student1 = 'May';
let mayMath = 95;
let mayEnglish = 65;
let student2 = 'Harvey';
let harveryMath = 77;
let harverEnglish = 84;
let student3 = 'John';
let johnMath = 50;
let johnEnglish=77;
let student4 = 'Joy';
let joyMath = 52;
let joyEnglist = 66;

但是這個樣子的話變數會變得很多。

所以先將一個人的姓名與成績寫成物件的格式

let students = {name:'Mary',Math:95,English:65}

以上就完成一個人的物件格式,其中name,Math,English為物件中的屬性,那在冒號後面為值

我要怎麼讀取物件的資料呢?

舉個例子我要讀取學生的姓名要怎麼做呢?

let students = {name:'Mary',Math:95,English:65};
let showStudentName = students.name;
console.log(shoeStudentName)//Mary

要讀取數學成績的話只要把name這個屬性換成Math就行,這裡要注意的是屬性的的大小寫不同會被視為不同的屬性,如果是用math做為屬性讀取的話,會因為找不到而出現undefined

比較不一樣的讀取方法

let students = {name:'Mary',Math:95,English:65};
let showStudentName = students['name'];
console.log(shoeStudentName)//Mary

就是把.換成['']這樣子屬性就會以字串的方式取得屬性的值
此外也可以把屬性的字串宣告為變數,然後再[]內放入變數

let students = {name:'Mary',Math:95,English:65};
let studentName = 'name' ;
let showStudentName = students[studentName];
console.log(shoeStudentName)//Mary

注意到了對吧,[]內已經改為studentName這個變數名稱了

那為什麼要使用屬性字串的方始讀取值呢,因為在JSON的格式中,key也就是Javescript中的屬性可以是數字或是中文,遇到這種情況要取值的時候就可以使用['key']的方法取到值了

要怎麼新增新的屬性與值到物件內呢?

以Mary要新增Science與History的學科成績為例

let students = {name:'Mary',Math:95,English:65};

students.Science = 99

students.History = 72

console.log(students)//{name:'Mary',Math:95,English:65,Science:99,History:72}

要怎麼新增新的屬性與值到物件內容呢?

假設Mary改名為Lisa而且English的分數要加5分程式碼要怎麼執行?


let students = {name:'Mary',Math:95,English:65};

students.name = 'Lisa'

students.English +=5

console.log(students)//{name:'Lisa',Math:95,English:70}

從上面的例子可以看到物件內屬性的值可以修改,就像重新賦值一樣,此外屬性也可以與變數一樣使用 += 、-=做計算,計算的結果也會寫入物件內。

要怎麼刪除物件的內容呢?

要刪除物件的內容,首先屬性與值是一體的,會一起被刪除。
我們要刪除Mary的English成績要怎麼做?


let students = {name:'Mary',Math:95,English:65};

delete students.English;

console.log(students)//{name:'Mary',Math:95}

這樣子English成績就刪除了

把陣列與物件一起連用吧!

接著我們用一個array把所有學生的資料放入


let students = [{name:'Mary',
                 Math:95,
                 English:65},
                 {name:'Harvey',
                 Math:77,
                 English:84},
                 {name:'John',
                 Math:50,
                 English:77},
                 {name:'Joy',
                 Math:52,
                 English:66}]

這個時候就會有疑問了那到底要怎麼取資料呢?

已取Jone的English成績來看好了

let students = [{name:'Mary',
                 Math:95,
                 English:65},
                 {name:'Harvey',
                 Math:77,
                 English:84},
                 {name:'John',
                 Math:50,
                 English:77},
                 {name:'Joy',
                 Math:52,
                 English:66}];
let getJhonEnglishScore = students[2].English
console.log(getJhonEnglishScore)//77                

分析一下到底是怎麼取道資料的。

1.首先先看看students的資料格式是甚麼?? 是陣列。

所以需要使用陣列的方式讀取資料 student[]

2.看看資料在內容是甚麼?? 資料內容是物件,而且在陣列的第3個

所以student[2]

3.再來看看我們想要資料屬性是甚麼?? 是English

最後student[2].English,這樣就取道資料啦

你知道嗎?陣列可以包物件,也可以陣列包陣列、物件包陣列、物件包物件喔

let students = [{name:'Mary',
                 Math:95,
                 English:{firstEnglishScore:80,
                 secondEnglishScore:60,
                 thirdEnglishScore:99}},
                 {name:'Harvey',
                 Math:77,
                 English:{firstEnglishScore:53,
                 secondEnglishScore:85,
                 thirdEnglishScore:74}},
                 {name:'John',
                 Math:50,
                 English:{firstEnglishScore:55,
                 secondEnglishScore:68,
                 thirdEnglishScore:72}},
                 {name:'Joy',
                 Math:52,
                 English:{firstEnglishScore:53,
                 secondEnglishScore:56,
                 thirdEnglishScore:88}}];

我們可以看到其中的English這個屬性裡面包了一個物件裡面有三次的考試成績

那我要如何取得Joy的第二次English成績呢?

let students = [{name:'Mary',
                 Math:95,
                 English:{firstEnglishScore:80,
                 secondEnglishScore:60,
                 thirdEnglishScore:99}},
                 {name:'Harvey',
                 Math:77,
                 English:{firstEnglishScore:53,
                 secondEnglishScore:85,
                 thirdEnglishScore:74}},
                 {name:'John',
                 Math:50,
                 English:{firstEnglishScore:55,
                 secondEnglishScore:68,
                 thirdEnglishScore:72}},
                 {name:'Joy',
                 Math:52,
                 English:{firstEnglishScore:53,
                 secondEnglishScore:56,
                 thirdEnglishScore:88}}];
                 
let getJoySecondEnglishScore = students[3].English.secondEnglishScore;
console.log(getJoySecondEnglishScore)//56

1.首先先看看students的資料格式是甚麼?? 是陣列。

所以需要使用陣列的方式讀取資料 student[]

2.看看資料在內容是甚麼?? 資料內容是物件,而且在陣列的第4個

所以student[3]

3.再來看看往我們想要的資料的下次是甚麼?? 是物件中的屬性English

student[2].English,

4.再來是第二次的English屬性secondEnglishScore

students[3].English.secondEnglishScore

人生幹話-我把賺來的辛苦錢又還回去啦!!

在我第二個生技公司的工作就是管理動物房、抗體製程開發、抗體製程優化、等等..還有球員兼裁判的工作,就是自己生產的抗體自己檢驗,然後通過,在剛開始工作的時候就吃了老闆畫的空氣大餅,大概是說公司的產品明年就要上市了,到時候大家就加薪,拿獎金,而且現在員工認股很便宜一股才10元,到時候就可以開保時捷獨棟透天,事實上加薪、拿獎金只是凹你免費加班的理由,員工認股是薪水回收的藉口,那個時候實在是太蠢了才會相信這種空氣大餅,工作沒加班費就算了,還很蠢的認了幾股公司的股票,把少的可憐的薪水又還回去了。


上一篇
JavaScript101與人生幹話-變數的原始型別-物件1
下一篇
JavaScript101與人生幹話-什麼是函式??
系列文
JavaScript101與人生幹話30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言