---
# System prepended metadata

title: 物件與陣列
tags: [HyUI4.0]

---

---
type: slide
---
# 物件與陣列

###### tags: `HyUI4.0`

---

# object 物件型別

---

* 所有基本型別 (Primitives) 以外的值
  都是物件型別
 
* 當變數變多後 
  我們需要有效率的去整理這些相關資訊
  所以需要用`陣列`及`物件`來整理

---

# array 陣列

---

有兩種方式可以建立一個陣列

Array Constructor (陣列建構式)
Array Literal (陣列實字)

---

建立陣列可以透過 new 關鍵字來建立 


```=javascript

var a = new Array();

a[0] = "apple";
a[1] = "boy";
a[2] = "cat";

a.length;     // 3
```

---

陣列實字 (Array literal)

![](https://i.imgur.com/37U265g.png)

---

範例

```=javascript

var classMate  = ['賈寶玉','林黛玉','薛寶釵']

```

---

如果要取得 裡面的人名 可以用

**名稱[編號順序]**



```=javascript

var classMate  = ['賈寶玉','林黛玉','薛寶釵'] //從第0個開始數

var person  = classMate[0] // 賈寶玉

```

---


可透過 length 來獲取陣列長度

```=javascript

  classMate.length 

```

---


 length 這個屬性的值是可以被覆寫
 
 ```=javascript
 var classMate  = ['賈寶玉','林黛玉','薛寶釵'] //從第0個開始數
classMate.length; // 3

classMate.length = 1;
console.log(classMate); // ['賈寶玉']

classMate.length = 3;
console.log(classMate); // ['賈寶玉', undefined, undefined]

 ```
 
 

---

若是想要在陣列末端新增元素時

可以透過 ARRAY.push() 方法

```=javascript

var array = ['a', 'b', 'c'];
array.length;           // 3

array.push('d');
console.log(array);     // ['a', 'b', 'c', 'd']

```

---

參考影片 
2.1.1_陣列簡報介紹
2.1.2_陣列寫法教學

---

# object 物件

---

有兩種方式可以建立一個物件

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

---

**Object Constructor (物件建構式)**

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

```=javascript

var myObj = new Object();

```


---


**物件實字 (Object literal)**

看一下 我們熟悉的slick

---

<!-- ![](https://i.imgur.com/S5q55el.png) -->
<img src="https://i.imgur.com/S5q55el.png" style="width:600px;">


---


```=javascript
var 物件 = {
        屬性：值
    }

```

---

 一個屬性的「值」可以是某個基本型別
 
 也可以是另一個物件，甚至可以是一個函式
 
 
 <small>再看一下 我們熟悉的slick</small>
 

---


![](https://i.imgur.com/ZCbCBKW.png)


---

物件的屬性可以透過 `.`來進行存取：

```=javascript
var person = {
  name: '林黛玉',
  job: '葬花達人',
  sayName: function() {
    alert( this.name );
  }
};

person.name;         // '林黛玉'
person.sayName();    // '林黛玉'

```

---

或是可以透過 [ ] 來進行存取，如

```=javascript

var person = {
  name: '林黛玉',
  job: '葬花達人',
  sayName: function() {
    alert( this.name );
  }
};

person['name'];         // '林黛玉'
person['sayName']();    // '林黛玉'

```

---

若想為物件新增屬性 直接用 = 指定

```=javascript

var myObj = {};

// 建立一個叫 color 的屬性，值是 blue
myObj.color = 'blue';


```

---

![](https://i.imgur.com/N0TCTaW.png)

---


參考影片 
* 2.2.1_物件簡報介紹
* 2.2.2_物件寫法教學
* 2.2.3_物件+function 運用技巧

---

# 重點回顧

---

<!-- { } 物件 [ ] 陣列
 -->
陣列

* 建立陣列 可以用 陣列建構式 或 陣列實字 
  來創建
* 可透過 length 來獲取陣列長度
* length 可隨時被修改
* 陣列中無法取得的數值會變成“undefinde”

---

物件

* value 可以是某個基本型別、物件、function
* 運用{ } 建立物件的方式 稱為物件實字
* 可透過“ . ” 或是 “ [ ] ” 來存取值 
  EX: person .name、person["name"] 
  
* 若新增屬性的值 直接“＝” 賦予就可以
  EX: myObj.color = 'blue'

---


參考資料

[物件與陣列](https://www.fooish.com/javascript/object.html)
[物件、陣列以及型別判斷](https://ithelp.ithome.com.tw/articles/10190962)
[Array/push](https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Array/push)


<style>
    .reveal h1{
        font-size:2em;
    }
    .reveal h1,.reveal h2 {
         color:#c9f2ff;
}
    .reveal{
        font-size:26px;
    }
</style>