JS 基礎篇 (2) 物件、陣列及型別的判斷

物件 Object

一個物件可以是多種屬性的集合，用來記錄一組彼此有關係的資料，比如person會有姓名、工作、年齡等資料。
物件可以由 new 關鍵字建立，在新增屬性及方法

let person = new Object();
person.name = 'Lin';
person.job = 'teacher';

或由 { } 直接建立並指定屬性，此種方法稱為【物件實字】

let person = {
  name: 'Lin',
  job: 'teacher',
}

物件屬性存取

使用 . 來存取

let person = {
  name: 'Lin',
  job: 'teacher',
}
person.name // 'Lin'

或使用 [ ] 來存取

let person = {
  name: 'Lin',
  job: 'teacher',
  1: '1',
  '$-小名家': '$-小名家 string',
}
person['name'] // 'Lin'

// 也可以帶入變數取值
let a = 'name';
person[a] // 'Lin'

// 可以帶入數字取值
person[1] // '1'

// 可以帶入字串取值
person['$-小名家'] // '$-小名家 string'

屬性新增

若想為物件新增屬性的話，直接用 = 指定就可以了：

let person = {
  name: 'Lin',
}
person.job = 'teacher';
person['age'] = 18;

屬性刪除

若要刪除屬性，則透過 delete 關鍵字刪除。

let person = {
  name: 'Lin',
  age: 18,
}
delete person.name;
delete person['age'];
person.name // undefined
person['age'] // undefined

另外要提到一點， js裡變數無法被刪除，屬性才可以

var a = 1;
b = 2;

delete a; // false
delete b; // true

console.log(a) // 1
console.log(b) // b is not defined

上面 a 是經過 var 宣告的變數，不可被刪除。b 沒有經過變數宣告，會直接成為全域物件 window 內的屬性，可以被刪除。

判斷屬性是否存在

當要判斷物件中存不存在某個屬性時，可檢查該屬性是否為 undefined。

const obj = {};
console.log(obj.name) // undefined

或者用 hasOwnProperty() 或 in 來檢查

let obj = {
  name: 'nike'
}

// 用 in 檢查
console.log('name' in obj) // true
console.log('value' in obj) // false

// hasOwnProperty()
obj.hasOwnProperty('name') // true
obj.hasOwnProperty('value') // false

未定義的物件屬性預設值

當查找一個物件中不存在的屬性時，會回傳 undefined，並且物件中無法在不存在的屬性上新增值

let obj = {
  name: 'nike'
}
obj.ming // undefined
obj.ming.name = '小名' // cannot set property of undefiend

解決方法是新增一個 空物件再去設值

let obj = {
  name: 'nike',
  ming: {}
}
obj.ming.name = '小名'

另一種是無法一開始就確定結構時，直接指定屬性為物件。

let obj = {
  name: 'nike',
}
obj.ming = {
  name: '小名'
}

陣列

JS的陣列可以看做是一種特別的物件，同一個陣列內可以是原始資料類型、另一個陣列、物件或是函式。與物件不同，陣列是有順序性的集合，所以只能透過[ ]加上索引來存取。

陣列可透過 new 關鍵字建立

const a = new Array();
a[0] = 'apple';

或是陣列實字的方式

const a = [];
a[0] = 'apple';
a[1] = 'banana';

const b = ['a', 'b', 'c'];

陣列長度

陣列的長度可以用 .length 取得

const ary = ['a', 'b', 'c'];
ary.length // 3

也可以由 .length 來更改

const ary = ['a', 'b', 'c'];
ary.length // 3

ary.length = 1;
console.log(ary) // ['a'];

ary.length = 3;
console.log(ary) // ['a', undefined, undefined]

取得陣列項目

陣列的索引由 0 開始計算，也就是說要取得陣列的第一個元素，要用 array [0]來取得，如下:

const ary = ['a', 'b', 'c'];
ary[0] // 'a';

判斷是否為陣列

當用 typeof 來判斷一個陣列時，會得到 Object。但若真想判斷某變數是陣列而非物件時，用 isArray():

Array.isArray([]) // true
Array.isArray(new Array()) // true
Array.isArray({}) // false

陣列方法

• 項目新增: 想要在陣列末端新增元素時，可以用 push()方法

• 移除陣列末端項目 pop()

• 移除陣列前端項目 shift()

• 加入項目至陣列前端 unshift()

• 在陣列中尋找項目的索引值 indexOf

• 移除指定位置項目 splice()