Day19 | JS 陣列與物件

發表於 分類於
陣列與物件

❒ 物件結構

宣告物件的兩種方式：

  • 物件實字 ( 較常用 )
  • 建構式

➊ 物件實字

1
2
// 結構
var family = {};

透過物件實字定義物件，就可於物件中加入值：

  • 物件內分別加入屬性 ( property ) 及屬性值 ( value )，如要增加多個可使用逗號隔開。
    • property
      • 一個屬性對應一個屬性值。
      • 屬性名稱不論是否為數字都會是字串型別。
    • value : 可以是物件、函式、純值。
1
2
3
4
5
6
// 透過物件實字定義物件，就可於物件中加入值
var family = {
 property: value,
 property2: value
 ...
};

➋ 建構式

1
2
// 架構
var family = new Object();

建構式與物件實字不同使用上要注意的部分：

1
2
var number = new Object(1);
var text = new Object('hey');
  • 插入數字在 new Object 括號內，會產生 number 的為包裹物件。
  • 插入字串在 new Object 括號內，會產生 string 的為包裹物件。
    截圖

❒ 物件取值、新增、刪除

關於物件與陣列的更多方法可參考下篇文章：Day20 | 陣列與物件常用的方法

取值

  1. . 的方式 → object.屬性
  2. 字串取值的方式 → object['屬性']

新增

  1. . 的方式 → object.屬性
  2. 字串取值的方式 → object['屬性']

刪除

  1. delete object.屬性
  2. delete object['屬性']

❒ 變數及物件屬性的差異

變數無法被刪除，屬性才可以被刪除

範例

1
2
3
var a = 1;
b = 2;
console.log(window);

  • 開發者工具中以 console.log(window); 可見 a 與 b 都在 window 根目錄下。
    開發者工具截圖

  • a 是透過變數的方式新增 ( var 、let、const 宣告的變數 )。

  • b 是透過屬性的方式新增，等同於 window.b ( window 內的屬性 )。

  • 承上，所以使用 delete b; 是可刪除 b 屬性，但使用 delete a; 是無法刪除 a 變數。

❒ 物件與純值

純值無法新增屬性，物件 ( 陣列、函式 ) 可以。

  • JavaScript 有兩種型別，分別為物件與純值。
    • 純值：基本型別 ( number、string、boolean、null、undefined )。
  • 除了物件外，陣列、函式也都是物件型別，所以可以新增屬性。
    • 函式比較特別的部分為使用 typeof 會印出 function，因為函式屬於物件型別下的一個子型別，可透過下方範例2 來驗證函式為物件型別。

範例 1. 純值無法新增屬性，物件可以

1
2
3
4
5
6
7
var nameIs = {};
nameIs.dog = '小黑';
console.log(nameIs);

var nameString = '小白';
nameString.dog = '小小白';
console.log(nameString);
  • console.log(nameIs); 印出 {dog: '小黑'}。
  • console.log(nameString); 印出 小白。因為純值無法新增屬性。

範例 2. 函式也為物件型別，可以新增屬性

1
2
3
4
5
function callName() {
  console.log('呼叫小明');
} 
callName.ming = '小明';
console.dir(callName);

  • console.dir 可看見物件的所有屬性內容，使用此方式可看到開發者工具中函式變成一個物件形式，裡面多了一個 caller ( 被呼叫的能力 )。
    開發者工具截圖

  • 於 callName 函式新增屬性，再看看開發者工具，裡面多了一個剛剛新增個屬性。
    開發者工具截圖

  • ❗ 注意：函式裡 name 屬性是無法被覆蓋的，所以函式新增屬性不可為 name。

❒ 未定義的物件屬性預設值

在物件下未定義的屬性它的屬性值會是 undefined，在 undefined 上是無法新增任何屬性，如下範例 1。

範例 1. 在物件下於未定義的屬性新增屬性值

1
2
3
4
var family = {
  dog: 2,
}
family.father.child = 3;
  • 會顯示錯誤訊息：Uncaught TypeError: Cannot set properties of undefined (setting 'child')
  • 因為 father 並沒有定義 ( 不存在 )，所以它的值為 undefined ，在 undefined 上是無法新增任何屬性。

範例 1. 的解決方法

➊ 於物件內新增 father 屬性，屬性值為空物件。

1
2
3
4
5
var family = {
  dog: 2,
 father: {}
}
family.father.child = 3;

➋ 在物件上新增屬性，此屬性直接定義物件結構

1
2
3
4
5
6
7
var family = {
  dog: 2,
}
family.father = {
  child: 3,
};
console.log(family);

❒ 陣列結構

陣列也是物件型別的一種，但使用上還是有些不同。

宣告陣列的方式：

  • 陣列實字

➊ 陣列實字

1
2
3
4
5
6
7
8
// 以中括號來定義一個陣列
var newArray = [ 
 1, 
 'text', 
 {
  name: '小明',
 }
];
  • 與物件不同的是陣列不需要屬性與屬性值，可直接插入數值或其他型別。
  • 另外陣列內也可以插入一個物件。

❒ 陣列取值、新增、取長度

關於物件與陣列的更多方法可參考下篇文章：Day20 | 陣列與物件常用的方法

取值

方式： 透過索引取值

  • 陣列中資料的索引位置從第 0 開始，要取得某筆資料就直接取陣列中第 n 筆資料 → Array[n]。

    1
    2
    3
    // 如果要取得陣列中的 true
    var newArray = [ 1, 'text', true];
    console.log(newArray[2]);

新增

方式：push()

  • 此新增方式會新增至陣列的最後一筆 → Array.push(放置要新增的資料);

    1
    2
    3
    var newArray = [ 1, 'text', true];
    newArray.push(5);
    console.log(newArray);

取陣列長度

方式：Array.length

1
2
var newArray = [ 1, 'text', true];
console.log(newArray.length); //3

陣列中新增屬性不影響陣列長度

範例：

1
2
3
4
var newArray = [ 1, 'text', true];
newArray.push(5);
newArray.dog = 2; // 陣列中新增屬性
console.log(newArray);
  • newArray 中新增 dog 屬性，可見陣列並沒有把此屬性列入陣列長度。
    開發者工具截圖

陣列沒有依照索引順序新增，跳過幾個索引新增資料會發生什麼事？

  • 使用中括號新增值時，如果中間有空的部分 ( 跳過某幾個索引位置 )， JS 會自動在這些位置補上空值 undefined，這會影響到陣列長度 ( 那些空值也會加入到索引長度中 )。
  • 陣列沒有依照索引順序新增跳過幾個索引，陣列長度會自動補齊但跳過的那幾個索引值會為 empty ( 不存在的空的陣列內容 )，取值時會呈現 undefined。

範例：

1
2
3
4
var newArray = [ 1, 'text', true];
newArray[4] = '我是索引4';
console.log(newArray);
console.log(newArray[3]);

  • newArray 陣列中跳過索引 3 直接在索引 4 新增一串文字 我是索引4，會看到索引 3 部分呈現 empty ，展開後也不會看到索引位置 3 的部分。
    開發者工具截圖

  • console.log(newArray[3]); 取索引 3 的值會印出 undefined。

印出陣列的所有內容

方式： 使用 for 迴圈

1
2
3
4
5
var newArray = [ 1, 'text', true];
newArray[3] = '我是索引4';
for (let i = 0; i < newArray.length; i++) {
  console.log(newArray[i]);
}
  • let i = 0;
    • 先宣告一個 i 索引，位置等於 0 。
  • i < newArray.length; i++
    • 當索引位置沒有比陣列長度長時，就會依序增加上去 ( 從 0 1 2 3 加上去 )。

參考資訊