# 【Day15】陣列array-常見方法array methods
###### tags: `JavaScript` `14th鐵人賽`
接續上篇陣列內容，陣列是 JavaScript 裡重要的技巧，其中有許多陣列方法(array methods)可做轉換或運算，本篇將介紹一些常見的陣列的方法(methods)：
**本篇陣列方法舉例皆會改變原始陣列**
- `length`
- 新增資料 `push( )`、`unshift( )`
- 刪除資料 `pop( )`、`shift( )`
- 指定位置新增or移除資料`splice( )`

---

## length 元素數量

在字串時可以使用`length`計算長度，在陣列中則可使用`length`計算組數的長度

let dogs = ["大耳狗","布丁狗","臘腸狗","拉不拉多","吉娃娃"];
console.log(dogs.length); // 5 

let dogsAge = [
  ["大耳狗", 8],
  ["布丁狗", 5],
  ["臘腸狗", 9],
  ["拉不拉多", 10],
	["吉娃娃", 12],
];
console.log(dogsAge.length); // 5

在上一篇陣列文章內說到若要取代可直接使用`[]`索引並取代，但若要修改是以增減的方式，則需使用`push( )`、`pop( )`、`splice( )`

## 新增資料

### push( ) 添加元素到陣列的最後

let dogs = ["大耳狗","布丁狗","臘腸狗","拉不拉多","吉娃娃"];
dog.push("阿狗"); // ['大耳狗','布丁狗','臘腸狗','拉不拉多','吉娃娃', '阿狗']

### unshift( ) 新增元素在陣列最前面

let dogs = ["大耳狗","布丁狗","臘腸狗","拉不拉多","吉娃娃"];
dog.unshift("阿狗"); // ['阿狗','大耳狗','布丁狗','臘腸狗','拉不拉多','吉娃娃']

## 刪除資料

### pop( ) 刪除陣列最後的元素

let dogs = ["大耳狗","布丁狗","臘腸狗","拉不拉多","吉娃娃"];
dogs.push("貴賓犬"); 
dogs.pop();
dogs.pop();
dogs.push("傑克羅素㹴犬");
dogs.pop();
dogs.push("約克夏");

console.log(dogs); // ['大耳狗', '布丁狗', '臘腸狗', '拉不拉多', '約克夏']

### shift( ) 刪除陣列最前面的元素

let dogs = ["大耳狗","布丁狗","臘腸狗","拉不拉多","吉娃娃"];
dogs.shift() // ['大耳狗','布丁狗','臘腸狗','拉不拉多','吉娃娃']

## 指定新增or刪除

### splice( ) 於陣列中任何位置增加或刪除

`arrayName.splice(x索引位置, y欲刪除的數量, z1,z2,z3索引位置欲添加的項目)`

- x索引位置：強制參數。用於指定增加或刪除的索引位置。若要從末端開始則使用負數
- y欲刪除的數量：可選參數。刪除的元素數量若設置0則不會刪除任何元素
- z1,z2,z3索引位置欲添加的項目

let dogs = ["大耳狗","布丁狗","臘腸狗","拉不拉多","吉娃娃"];
dogs.splice(-3, 1, "熱狗", "薩摩耶");
// 於倒數第三個位置為索引 刪除一個後增加"熱狗"、"薩摩耶" 
//['大耳狗', '布丁狗', '熱狗', '薩摩耶', '拉不拉多', '吉娃娃']

關於陣列的方法還有很多，本篇僅舉出常使用的介紹，有興趣的可以參考：

[MDN陣列方法傳送門](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array)

大家可以試著用以上方法修改陣列內容，若有問題或補充都歡迎留言唷!