---
# System prepended metadata

title: 陣列 - Array 寫法教學
tags: [JavaScript - 學徒篇]

---

# 陣列 - Array 寫法教學

###### tags: `JavaScript - 學徒篇`

- 陣列的寫法:

  本節的重點語法:
  
```
.push()   // 新增一個值在此陣列的最後方
var arrayName = []; // 宣告此變數名稱為一個空的陣列
arrayName[1]; // 表示陣列裡第2個數值
.length // 獲得此陣列總資料筆數
```  

  一般情況下，我們會用宣告變數來記錄值。

  例如我有三個玉米田，第一個有3個玉米、第二個有4個 .. 然後要一直去手動宣告，這樣其實很麻煩!

```
// 三個玉米田，分別有幾個玉米?

var cornField1 = 3;
var cornField2 = 4;
var cornField3
    ... 不斷的增加
```  

- 這個時候-陣列 Array 就該出現了:

```
// 用陣列的方式就不需要一個一個去新增變數:
   方便多了!

var cornFild = [3, 4, 8];
console.log(cornFild);
```

- 該如何撈取陣列裡面的數值?

```
// 承上，我們用 console.log 的方式來撈:
   假設要讀取第一個玉米田，我們預期會得到3
   
var cornFild = [3, 4, 8];
console.log(cornFild[0]);

// Array 的欄位來說，「0」即代表一般數字排序上的第一位   

```

- 假如某一變數要撈取陣列特定的值，該如何進行?

```
var cornFild = [3, 4, 8];

// 假設我今天宣告其變數，我想知道第三個玉米田有幾個玉米，該怎麼做?

var cornField3 = cornFild[2];
console.log('第3個玉米田有:' + cornField3 + '個玉米');
// 第3個玉米田有:8個玉米

// 陣列 cornField 裡面第三區的值 = 8，輸入cornField[2]
// 陣列由0開始是第一個，故: 0→1→2
```

### 空陣列寫法:

```
// 空陣列寫法:

var cornField = [];
```

### 手動增加一筆資料到陣列內:

- `.push()`，可增加陣列裡面的數值，且可用，來增加數個 data

```
var cornField = [];

cornField.push(5, 10, 20);
console.log(cornField);
```

### 修改陣列裡面的數值:

```
var cornField = [];

cornField.push(5, 10, 20);
console.log(cornField);

// 假設要中途修改陣列裡第2筆的數值?

   直接輸入 cornField[1] = value;
cornField[1] = 100;
// 並用console.log 來查詢:

console.log('原本玉米田2:10個玉米，後來成長到了:' + cornField[1]);
```

### 除了 .push()，也可以直接額外新增數值:

- `.push()`，在陣列新增數值的方式是在最後一個位置去新增，假設以上面的範例來說已經有3個玉米田了，我想新增第四座也可以這樣寫:

```
var cornField = [];

cornField.push(5, 10, 20);
console.log(cornField);

// 假設要中途修改陣列裡第2筆的數值?
cornField[1] = 100;

console.log('原本玉米田2:10個玉米，後來成長到了:' + cornField[1]);


// 開闢第四個玉米田[3] - 不透過.push 語法新增

cornField[3] = 1000;

console.log('農夫開闢了第四個玉米田，總共有:' + cornField[3] + '真是大豐收呢');


//農夫開闢了第四個玉米田，總共有:1000真是大豐收呢
```

### 使用 .length，獲得當前陣列有幾個數值:

```
// 了解當前變數有幾個陣列值
// 想知道目前有幾個玉米田:

console.log('我目前有:' + cornField.length + '個玉米田!');
```

###### tags: `JavaScript - 學徒篇`