iT邦幫忙

2023 iThome 鐵人賽

DAY 15
1
Software Development

再騙小心沒朋友🥵 用LIFF實作LINE整人工具系列 第 15

[Day15] 不懂JavaScript 只好等著被整😔 物件篇

  • 分享至 

  • xImage
  •  

昨天介紹了有順序的資料型態陣列(array) ,今天要來講解 JavaScript 中無順序的資料型態物件(object)。物件用來存放許多 鍵 (key) & 值 (value) 的成對資料。不同於陣列常用來存放相似性的資料,物件則是任何資料型態的資料都可以放進去,且每個資料都被賦予鍵值的名稱組合。

物件宣告語法

最簡單的方式可以使用{}new Object()建立一個新物件:

var myObj = {}; // Object Literal (物件實字)
var myObj = new Object(); // Object Constructor (物件建構式)

也可以在宣告物件的時候,同時建立屬性和放入值:

var obj = {
	property1: value1, 
	property2: value2, 
	..., 
	propertyN: valueN
};

物件實際範例

假設要建立一個 student 的物件,裡面要有學生姓名、年齡、是否為男生、各科成績等資訊,就很適合用物件來存放各種沒有相似性的不同資料型態資料:

var student = {
	name: "Lala",
	age: 24,
	is_male: false,
	score: [92,86,99]
};

讀取物件內容

從上面的範例可以看出,如果使用console.log(student);會輸出物件全部的資料。如果只想要讀取物件某個屬性的資料,就要用物件名稱.屬性名稱來讀取特定的值:

var student = {
	name: "Lala",
	age: 24,
	is_male: false,
	score: [92,86,99]
};
console.log(student.is_male);

使用student.is_male只會取出 false ,不會把整個物件全部讀取出來。

更新物件內容

過了一年後,學生的年齡已經變成 25 歲,需要更新 age 屬性的值,可以直接使用=指派新的 age 值:

var student = {
	name: "Lala",
	age: 24,
	is_male: false,
	score: [92,86,99]
};
student.age = 25;
console.log(student);


考完了第四次段考,學生考了 93 分的成績,需要把 93 加入 score 屬性的值中,可以用昨天講的 push() 方法將資料加到 score array 的最末位:

var student = {
	name: "Lala",
	age: 24,
	is_male: false,
	score: [92,86,99]
};
student.score.push(93);
console.log(student);

追加物件屬性

全球疫情大爆發,學校要調查所有學生的疫苗接種狀況,於是需要在 student 物件內新增一個是否接踵疫苗屬性和值,可以直接在 student 物件內新增屬性並指派值:

studentvar student = {
	name: "Lala",
	age: 24,
	is_male: false,
	score: [92,86,99]
};
student['is_vaccinated'] = true;
console.log(student);


上一篇
[Day14] 不懂JavaScript 只好等著被整😔 陣列篇
下一篇
[Day16] 不懂JavaScript 只好等著被整😔 例外處理篇
系列文
再騙小心沒朋友🥵 用LIFF實作LINE整人工具30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言