HackMD
{ 物件教學 Object }
本篇會談到
- 物件宣告
- 物件寫法
- 新增、讀值、刪除 delete
- 屬性可以被刪除，那變數可以嗎？
✐ 物件宣告
可以透過 Object Literal 或 Object Constructor 去宣告物件
➤ Object Literal (物件實字)
利用大括號去定義物件，裡面插入屬性與值，值可以是 number, string, function 都可以，而兩個屬性中間可以利用逗號, 去隔開。
// 1. 物件用大括號包起
var object1 = {
property: 'value',
// 2. 屬性property(可自訂名稱)，提供屬性值用冒號刮起。
// 3. 值value 可以是任何資料型態
// 4. 物件區隔用 逗號 , 分開
}
屬性定義一律要使用字串
➤ Object Constructor (物件建構式)
利用 new 加上 Object()，直接插入一個物件，所產生的結果是物件，但大多情況下還是會比較常用『物件實字』的方式新增物件，這樣比較容易閱讀。
var object1 = {
property: 'value',
}
var object2 = new Object(object1);
// 宣告一個 object2 ，新增物件 object1 到 object2 中
如果插入一個數，會得到 number
var object2 = new Object(1);
// Number{1}
// 出現 number 的物件
如果插入一個字串，會得到 string
var object2 = new Object('1');
// String{1}
// 出現 string 的物件
✐ 物件寫法
➤ 新增 屬性與值到物件內
新增物件的屬性也有兩種方法：
➷ （一） 使用 . 點記法
物件名稱.屬性 = value
let farm={
farmer: 'Tom',
}
farm.chicken = 15;
console.log(farm);
// Object:{farmer: 'Tom',chicken:15}
console.log(farm.chicken);
// 15
➷ （二） 使用 [' '] 括弧記法
- 使用中括號的方式，不只可以使用『字串』去取值，也可以使用『變數』方式取值。
- 物件中有些屬性是數字 number ，這時候用點記法取值，無法取得，所以要改用中括號
- 可以插入變數或特殊字元
var family = {
name: '小明家',
1: '123'
}
// 1. 字串賦值
family['dog']='Tommy';
family['$'] = 311;
console.log(family);
// {name: "小明家", dog: "Tommy", $: 311}
// 2. 字串取值
console.log(family['name']);
// 小明家
// 2. 變數取值
let a = 'name';
consol.log(family[a])
// 小明家
console.log(family[1])
// 1
➤ 物件讀值
物件讀取物件也有兩種方式：
➷ （一） 使用 . 點記法
- 通常情況下會使用.取值
- 以字串的方式尋找該object的屬性
var family = { 'name': '小明家', }; console.log('1',family.name); // 1 小明家
- 執行物件裡的方法（點記法與括弧記法都可以！）
var family = { name: ‘小明家’, deposit: 1000, members: { mom: ‘老媽’, ming: ‘小明’ }, callFamily: function() { console.log(‘聯絡小明家’); } }; family.callFamily(); // 聯絡小明家
➷ （二） 使用 [' '] 括弧記法
-
var family = { 'name': '小明家', }; console.log('2',family['name']); // 2 小明家
屬性為各種數字或特殊字元時，或要讀取變數的情況下皆會使用[]。
-
允許以變數的方式取到值
var family = { name: '小明家' }; var a = 'name'; console.log(family.a); // undefined // 利用 . 點記法方式取值，因為 family 沒有 a ，所以 undefined console.log(family[a]); // 小明家 // 利用 a = 'name' 代入中括號，得到 family['name']，可以取得值 -
執行物件裡的方法（點記法與括弧記法都可以！）
var family = { name: '小明家', deposit: 1000, members: { mom: '老媽', ming: '小明' }, callFamily: function() { console.log('聯絡小明家'); } }; family['callFamily'](); // 聯絡小明家
➤ 物件刪除物件屬性
➷ 使用delete操作符。
範例1:
var family = {
name: '小明家',
deposit: 1000,
members: {
mom: '老媽',
ming: '小明'
},
$:300,
}
delete family.members.ming;
delete family['$'];
✐ 屬性可以被刪除，那變數可以嗎？
變數不可以被刪除，屬性才可以
下方 JavaScript 中，a 宣吿後給予值， b 沒有宣告就給值，會發生？
var a = 1;
// a 賦予到 window 上
b = 2;
// b 也會賦予到 window 上
// 可看成 window.b = 2;
console.log(window);
// 操作 delete 看看
delete a; // false 無法被刪除
delete b; // true
console.log(window);
// b 消失， a 還存在
// 現在，再看一下 a, b
console.log(a);
// 1
console.log(b);
// b id not defined
a 與 b 同時出現在 window 下
