---
# System prepended metadata

title: Array

---

# Array
###### tags: `NKFW 網頁設計入門`

---

## 陣列介紹

---

### 基本介紹:
主要有四個部份:
1. 宣告：`var nameOfArray = [元素一, 元素二, 元素三...]`，裡面的每一個元素可以是不同的形態，數字或是字串等。

2. 陣列的長度：如果陣列裡面存了3個元素，那長度就是3，使用`nameOfArray.length`取得長度

3. 陣列的index：index是一個數字，是每一個元素的編號，範圍是`0~(陣列的長度-1)`，注意是從0開始

---

4. 取陣列值：`nameOfArray[index]`

5. 從陣列最後面增加元素：`nameOfArray.push(新的元素)`

---


下圖範例: 
* 宣告:
```javascript!
var x=["abc","mart","converse"];
```
* 取陣列值
```javascript!
var shoes=x[2];
console.log(shoes) //shoes="converse"//
```
* 陣列長度
```javascript!
var num=x.length;
```

---

* 增加元素
```javascript!
x.push("ddd");
```
* 刪除最後一個元素
```javascript!
x.pop();
```

---

* 整合在一起:
```javascript!
var x=["abc","mart","converse"];
x.push("ddd");
var num=x.length;
console.log(x[0]+" "+num);
```

---

結果:
![](https://i.imgur.com/hsVEalK.png)

---

## Project1
:::info
利用所學，讀取一連串輸入加到一個Array裡面直到輸入為"end"，最後印出該Array。
* 輸出的示意圖如下
![](https://hackmd.io/_uploads/ryq6cmBr3.png)

:::

---

## Project2
:::info
延續上一個project將該Array顛倒並輸出到console出來。先不要偷用現成有的講義
* 輸出的示意圖如下
![](https://hackmd.io/_uploads/Sk6IsXHS3.png)
:::

---

:::spoiler 解答
```javascript=
    <script>
        list2=[]
        new_list=[]
        let n;
        while(true){
            n=prompt("請輸入東西直到輸入end")
            if(n=="end"){
                break;
            }
            list2.push(n)
        }
        console.log(list2)
//第二題
        for(let i=1;i<=list2.length;i++){
            new_list.push(list2[list2.length-i])
        }
        console.log(new_list)
    </script> 
```
:::