iT邦幫忙

4

[筆記][JavaScript]單一物件的基本操作

HIHI,因為最近在重看JavaScript,剛好讀到物件的使用方法,想說順便記錄一下,之後再陸續紀錄進階的使用方法和繼承。

簡單說,JavaScript的所有物件都是類似於「字典」的存在,物件中可以有許多「特性」,所謂的特性就是由一個鍵值「key」對應一個鍵值的內容「value」,要注意的是鍵值一定是文字字串,而鍵值內容可以是文字、數字或是一個函式方法,當做一個物件內的特性。

在JavaScript中可以直接將物件指定給一個變數。

//以下例子將一個物件指定給rex
//這個物件裡有兩個特性:「name」和「writeName」,他們裡面的值分別是字串和一個函式
//最後一個特性結束後尾隨逗號很有效,他可以在重新安排特性時不用特別留意出現遺漏逗號的問題
var rex = {
    name:'rex',
    writeName:function(){
        return 'Name is ' + this.name;
    },
};

Object.keys()可以回傳物件內的所有特性的key值

//object.keys()可以讀出該物件所有特性的key值
Object.keys(rex); //會回傳陣列,["name","writeName"]

創建好物件後我們可以使用點號運算子(.)來存取特性。

//取得物件rex特性
console.log(rex.name); //會取得'rex'

console.log(rex.writeName); //會取得一個函式內容

//如果試著取得一個不存在的特性會回傳undefined
console.log(rex.age); //會取得undefined

//使用物件rex內的writeName函式
rex.writeName(); //會印出'Name is rex'

//設定新的特性給rex物件
//如果物件中的一個特性還沒存在,那在設定他的同時會自動被建立
rex.age=18; //用等於將18這個值指定給rex.age這個新特性
console.log(rex.age); //會取得18

//如果該物件中的特性已經存在,那設定他會改變該特性的值
rex.age=20;
console.log(rex.age); //會取得20

也可以使用中括號來讀取特性

//和點號運算是比較不同的地方在於,中括號內的鍵值是可以是運算後的結果
rex['a'+'g'+'e'] //經過加號運算後會變成rex['age'],所以回傳20

//數字的運算也沒有問題
rex[1+1]='abc' //經過加法運算後會變成rex[2]='abc',所以會增加一個特性2的值為abc
//需要注意的是,之前有說物件內的特性鍵值都是文字字串,所以其實2會是字串'2'
Object.keys(rex); //會回傳陣列,["name","writeName","age","2"]

//不過在中括號使用上依然不會有差別,因為方括號會將裡頭的值強制轉成字串
rex[0+2]; //會回傳'abc'

//呼叫方法
rex[writeName](); //會印出'Name is rex'

//就連變數也難不倒中括號
var strI=2; //把2這個值指定給strI變數
rex[strI]; //中括號讀到strI裡面的值是2,所以會回傳'abc'

刪除特性可以用delete運算子處理

delete rex[2]; //會回傳true
Object.keys(rex); //回傳陣列的陣列中age已經被刪除掉了,["name","writeName","age"]
rex[2]; //回傳undefined

以上是最基本的物件使用方法,之後會慢慢講到比較艱深的地方,
如果有說明錯誤或漏掉哪些觀念的地方,就請各位再留言和我說明了!!
謝謝大家!!


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

1 則留言

1
小魚
iT邦大師 1 級 ‧ 2018-01-23 20:42:44

原來JavaScript的索引可以這樣接的啊,
之前沒試過呢!
/images/emoticon/emoticon07.gif

神Q超人 iT邦研究生 5 級 ‧ 2018-01-24 22:55:58 檢舉

哈哈 是指中括號嗎?
你也可以在裡面放變數哦~~
他會讀取變數裡面的值
我忘記打了 假日在把他補上去/images/emoticon/emoticon13.gif

我要留言

立即登入留言