iT邦幫忙

1

JavaScript 基礎知識 - 探討物件

JavaScript 的物件結構,基本會是 {} 包覆 屬性:值,如下:

var person = {
    name: '小明',
    members: {
        father: '爸爸',
        mother: '媽媽',
        son: '小明'
    },
    callHome: function(){
        console.log('回家了');
    }
};

而屬性的值,也可以是另一個物件或者是 function

當我們要呼叫物件內的屬性可以使用 .
person.name

如果是物件型別的屬性,也可以接續下去
person.members.son

如果是一個 function
person.callHome()

而在物件內沒有定義的屬性,也可以直接透過 . 賦予值
person.room = 4
這時候在 console 看 person 這個物件,就會多了 room 這個屬性

但是當要嘗試去讀取一個物件內沒有的屬性時,這時候就會出現 undefined
console.log(person.floor);
console 會出現 undefined

而又要嘗試掛載屬性跟值到 undefined 下面時,會出現什麼呢 ?
person.floor.stair = 4;
這時候 console 會出現 Uncaught TypeError: Cannot set property 'stair' of undefined

除了新增屬性,當然也可以刪除屬性
delete person.name
這時候在 console 查看 person 這個物件,就會發現 name 這個屬性被移除掉了

而物件最大的特性就是傳參考的特性,舉個例子

var a = 1;
var b = a;
console.log(b);
// 這時候 console 會出現 1 ,很符合預期

如果這時候修改了 b 把值改為 2,重新在 console 查看,a 會是 1,b 會是 2
這一切都很符合預期,a 和 b 之間互不影響,但這是在純值的情況下

如果是在物件的情況下呢 ?

var person = {
    name: '小名'
};
var person2 = person;
person2.name = '大名';
console.log(person.name);

這個時候會發現 person 的 name 屬性也被修改了,但明明重新賦值的是 person2 的 name 屬性,這就是物件的傳參考的特性,因為 person 和 person2 都是指向同樣的記憶體空間,並非是複製值到另外一個變數身上
可以用 === 來驗證

console.log(person === person2);
// true

圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

2 則留言

0
screenleon
iT邦新手 1 級 ‧ 2020-06-11 09:25:05

也可以使用 person['name']的方式去取值
跟 person.name 取的內容是一樣的
至於哪個比較好,還沒有特別研究

const a = {"test@mail.com": "null"};

但是當你要取上述 test@mail.com 的值的時候,就必須用 a['test@mail.com']

感謝大大補充~

0
艾米
iT邦新手 4 級 ‧ 2022-01-17 00:15:03

感謝分享~

我要留言

立即登入留言