Day18 【牙起來】 物件、陣列 - Typescript

非原始型別(object)

小寫的 object 指的是 non-primitive非原始型別
大寫的 Object 指的是實例(instance)

物件(Object)

大括號{}表示物件
如果要加以型別的話會使用 any

key的寫法，需不需要單引號？

• 直接裸key，key名稱不能使用特殊符號
• 也可用單引號'把key包起來，較為嚴謹

兩者意義上完全相同，可擇一使用
但不能兩者同時出現，這樣會打架

let a = {};

let b: any = {
    a: 10,
    'b': 'key可以是任何字',
    'c': true,
    '+-*/': "特殊符號",
}

console.log(a)  // {}
console.log(b.a)  // 10
console.log(b.b)  // key可以是任何字
console.log(b['c'])  // true
console.log(b['+-*/'])  // 特殊符號

• 可透過符號點. 取得物件底下的成員
• 也可透過字串索引來取得物件底下的成員

陣列(Array) 重複元素

有兩種方式可以代表陣列

• 可以使用 Array<Type>
• 可以寫成較為簡短的寫法 Type[]

這兩種寫法沒有任何差異，都是表示有多個重複的Type元素

let a : string[] = []
let b : Array<string> = []
let c : Array<string> = ['1', '2', '3', 'String']

console.log(a)  // []
console.log(b)  // []
console.log(c)  // [ '1', '2', '3', 'String' ]
console.log(c[1])  // 2

大腸包小腸

物件包陣列

物件內有陣列的情況

let a = {
    a: ['字', '字字', '字字字'],
    b: [123, '字字字字'],
};

console.log(a)  // { a: [ '字', '字字', '字字字' ], b: [ 123, '字字字字' ] }
console.log(a.a)  // [ '字', '字字', '字字字' ]
console.log(a.b[0])  // 123

物件包物件

let a = {
    a: {
        a: {
            a: '禁止套娃'
        }
    }
};

console.log(a)  // { a: { a: { a: '禁止套娃' } } }
console.log(a.a)  // { a: { a: '禁止套娃' } }
console.log(a['a']['a'])  // { a: '禁止套娃' }
console.log(a.a.a.a)  // 禁止套娃

陣列包陣列

let a = [
    [111, 222, 333],
    ['字']
];

console.log(a)  // [ [ 111, 222, 333 ], [ '字' ] ]
console.log(a[0])  // [ 111, 222, 333 ]
console.log(a[0][2])  // 333
console.log(a[1][0])  // 字

陣列包物件

陣列內有物件的情況
這時Typescript已無法推斷出陣列底下物件的型別

let a = [
    '123',
    { b: [456] }
];

console.log(a)
console.log(a[0])
console.log(a[1])
console.log(a[1]['b'])