---
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)
---
範例
```=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
---
<!--  -->
<img src="https://i.imgur.com/S5q55el.png" style="width:600px;">
---
```=javascript
var 物件 = {
屬性：值
}
```
---
一個屬性的「值」可以是某個基本型別
也可以是另一個物件，甚至可以是一個函式
<small>再看一下 我們熟悉的slick</small>
---
---
物件的屬性可以透過 `.`來進行存取：
```=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';
```
---
---
參考影片
* 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>
Sign in with Wallet
Connect another wallet