1. Object

相對於其他數據類型，object在JavaScript中用來儲存鍵值對(Key-Value Pair)，或是用來儲存更複雜的實體。

1.1 物件新增方法

Object宣告的方法有兩種:

• Object Literal(物件實字):

可以通過括號來創建，括號內的屬性列表是可選的，一個屬性就是一個鍵值對(key : value)，其中鍵(key)是字符串，值(value)可以是任何值。

let a = {...}

• Object Constructor(物件建構式) :

用new關鍵字加上Object()來宣告一個物件。

let b = new Objetc()

1.2 物件屬性(Object properties)

Object中新增property有兩種方法:

• . --- 點號運算子
• [] --- 括號運算子

let myObj = new Object();
let str = 'myString';
let randNum = Math.random();
let obj = new Object();

myObj.type = 'Dot syntax';
myObj['date created'] = 'String with space';
myObj[str] = 'String value';
myObj[randNum] = 'Random Number';
myObj[obj] = 'Object';
myObj[''] = 'Even an empty string'

console.log(myObj)

//
type: "Dot syntax"
myString: "String value"
date created: "String with space"
[object Object]: "Object"
0.4381989149265799: "Random Number"
"": "Even an empty string"

屬性的簡寫:

function makeCar(type, color) {
    return {
        type, // 等於 type : type
        color // 等於 color : color
    }
}

1.3 屬性名稱限制

變數不能是保留字，例如: for、let、return等，但是屬性名稱是沒有限制的。

let obj = {
    for:123,
    let:456,
    return:789
}

其他類型也會自動被轉換為字串:

let obj = {
    0:"test" // 等同於 "0":"test"
}

console.log(obj[0]) // test

這裡有個例外，__proto__這個屬性是不能被設定為屬性的，在後面的文章會提到。

1.4 屬性存在的判斷

Object還有一個特別的地方就是去讀取不存在的屬性不會報錯，只會回傳undefined，所以可以很簡單的做一個屬性存在的判斷:

let user = {}

console.log(user.id) //undefined

但是如果屬性的值剛好是undefined的話，上面這個方法就不行，改用另一個檢查方法是操作符"in":

let user = {
    id:1,
    name:'John',
    age:20
}

console.log('name' in user); // true
console.log('height' in user); // false

"in"操作符的左邊必須是屬姓名，通常是字串，如果省略引號的話就視為變數:

let user = {
    id:1,
    name:'John',
    age:20
}

let key = "age"

console.log(key in user)

1.5 for..in循環

這個方法可以遍歷object的屬性。

語法:

for(key in object) {
    //這邊可以針對key這個屬性作一些操作
}

舉一個簡單的例子:

let user = {
    id:1,
    name:'John',
    age:20
}

for(let key in user) {
    console.log(key)
}

所有遍歷的屬性是有規則的:

• 優先顯示非負整數屬性，整數屬性由小到大。
• 整數屬性以外類別的則按照新增的順序。

舉個例子會比較快明白:

let classmates = {
    "10":"David",
    "9":"Tina",
    //...
    "1":"John"
}

for(let studentId in classmates) {
    console.log(studentId) // 1 9 10
}

非負整數屬性: 如果一個字符串把它轉換為整數後再轉換為數字，如果與原本一樣，就是整數屬性。

console.log(String(Math.trunc(Number("10")))) //10 相同，整數屬性
console.log(String(Math.trunc(Number("+10")))) //10 不同
console.log(String(Math.trunc(Number("10.5")))) //10 不同 
console.log(String(Math.trunc(Number("-10")))) //-10 不同 歸類為其他類別 

一樣用一個簡單的例子:

let classmates = {
    "10":"David",
    "+9":"somebody"
    "9":"Tina",
    //...
    "1":"John",
    "0":"Teacher"
    "-1":"NegativeNum"
    "otherType":"otherTypeValue"
}

for(let key in classmates) {
    console.log(key)
}

//
0
1
9
10
+9
-1
otherType

結論

1. 物件的新增方法有兩種:

• Object Literal(物件實字)
• Object Constructor(物件建構式)

2. 物件屬性新增方法有兩種:

• . --- 點號運算子
• [] --- 括號運算子

3. 屬性名稱是沒有限制的，除了__proto__這個屬性比較特別。
4. "in"操作符可以判斷屬性是否存在，for..in則可以遍歷這些屬性。

參考資料:

Object
JavaScript Info
JavaScript | 關於 Object ，一口氣全說完
JavaScript Object (物件)