iT邦幫忙

第 11 屆 iThome 鐵人賽

0
自我挑戰組

JavaScript核心篇系列 第 13

【JavaScript 核心】物件結構、取值、新增、刪除 #13

  • 分享至 

  • xImage
  •  

物件結構以及定義方法

1.物件實字:插入屬性與值,可插入純值、物件、函式

var family = {
  //property: value
    name: '小明家',
    deposit: 1000,
    members: {
        mom: '老媽',
        ming: '小明'
    },
    callFamily: function(){
        console.log('聯絡小明家');
    }

2.物件建構式

var newFamily = new Object(family);

物件取值

※ 使用 [] 中括號取值:可插入字串、變數來取值
屬性名稱永遠是字串

console.log(family.name);   // 小明家
console.log(family.members.mom);   // 老媽

var a = 'name';
console.log(family['name']);   // 小明家
console.log(family[a]);   // 小明家

family.callFamily();   // 執行函式: 聯絡小明家
family['family']();   // 執行函式: 聯絡小明家

物件新增值

family.dog = '小白';
family['kitten'] = '小貓';
family['$'] = 'money';

物件刪除

delete family.deposit;
delete family['$'];

變數及物件屬性的差異;
變數無法被刪除,屬性才可以!

var a = 1;
b = 2;   // b 等同於 window.b
console.log(window);

delete a;
delete b;

console.log(a);   // 1 變數無法被刪除
console.log(b);   // b is not defined


物件與純值

純值無法新增屬性

var family = {};
family.name = '小明家'
// 一般物件新增屬性

var newString = '小明家';
newString.name = '小明';
console.log(newString); // 小明家
// 純值無法新增屬性

使用建構式新增屬性

此種方式新增的字串,並非純值(是物件)

var newString2 = new String('小明家');
newString2.name = '小明';

console.log(newString2);
// String {"小明家", name: "小明"}

使用陣列新增屬性

因為陣列也屬於物件型別,所以可行

var newArray = [1,2,3];
newArray.name = '小明';

console.log(newArray);
// [1,2,3,name: "小明"]

使用函式新增屬性

function callName(){
  console.log('呼叫小明');
}
callName.ming = '小明';
console.dir(callName);
// 使用 console.dir 可以看到物件所有屬性內容
// callName() 打開可看到  ming: "小明"

物件屬性與 undefined 的關係

var family = {
  name: '小明家',
};
console.log(family.ming); 
// undefined
// 物件下並沒有這個屬性

方法 1 : 新增一個空物件,就可以正確插入屬性與值

var family = {
  name: '小明家',
  ming: {}
}

方法 2 : 定義一個物件結構

family.ming = {
  name: '小明'
}

※ 可以透過 console.log(window.屬性名) 去查詢有無該屬性


上一篇
【JavaScript 核心】Truthy & Falsy / 邏輯運算子
下一篇
【JavaScript 核心】傳值 & 傳參考 #14
系列文
JavaScript核心篇19
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言