# 11.27 JS-陣列
###### tags: `Javascript`、`MFEE`
## 零、目錄&待辦事項
## 壹、陣列
[講義](https://eddy-chang.gitbook.io/javascript-start-from-es6/part3/array)
* 陣列簡介
* 拷貝陣列的作法
1. 用for迴圈
```javascript=
const a = [1,2,3]
const b =[]
for (let i = 0; i < a.length; i++){
b[i] = a[i]
}
// i其實就是index的意思
```
2. 用...語法
```javascript=
const c =[...a]
// 這是所謂的展開運算符，把a陣列給展開來放到c裡面，完成複製
```
## 貳、陣列重要屬性及方法
### 劇透：有副作用的方法
1. push()、pop()、unshift()、shift()
2. sort()、reverse()
3. forEach(function(v, i, array){
return xxx
})
### 一、檢查是否為陣列：array.isArray()
檢查陣列不能用typeof()，若用typeof會回傳物件，無法判斷是不是陣列。
要用isArray()。
```javascript=
const a = [1,2,3]
Array.isArray(a)
// console會回傳true
```
### 二、屬性：array.length，回傳陣列內資料的個數，重要
```javascript=
const a = [1,2,3,4]
a.length = 4
```
length其實可以更改陣列內的資料組成，因此可以用.length = 0來清空陣列。
```javascript=
const a = [1,2,3,4]
a.length = 5
console.log(a)
// 會印出[1,2,3,4,empty]
a.length = 2
console.log(a)
// 會印出[1,2]
// 因此若要清空陣列可以用 .length = 0
```
### 三、array.indexOf()，不重要，用findIndex()
找到第一個相符的會回傳他的索引值，後續就不找。若沒找到會回傳-1。
```javascript=
const a = [1,2,3,4,2,2]
a.indexOf(2) = 1
// 只會回傳第一個找到的index
```
### 四、array.push()、pop()、shift()、unshift()，重要
* **這四個方法有副作用，會改變原來的陣列**
* 這四個陣列有回傳值，但通常用不到所以不重要
1. push，從後面加進去。(有p是屁屁)
2. pop，把陣列最後一個值彈出來。(有p是屁屁)
3. shift，把陣列第一個值彈出來。
4. unshift，從前面加進去。(跟push一樣有u，是加進去)
```javascript=
const a = [1,2,3,4,5]
a.push(7)
// a = [1,2,3,4,5,7]
a.pop()
// a = [1,2,3,4,5]
a.unshift(6)
// a = [6,1,2,3,4,5]
a.shift()
// a = [1,2,3,4,5]
```
### 五、array.concat，合併陣列，被...取代，不重要
* 現在這個語法被...取代掉了，所以學...的做法就好
* 就是複製貼上嘛~
```javascript=
const a = [1,2,3,4]
const b = [5,6,7,8]
const c = [...a, ...b]
```
* 陣列不能用 + 的方式處理，會被轉成二組字串相加
```javascript=
const a = [1,2,3,4]
const b = [5,6,7,8]
const c = a + b
console.log(c)
// 印出 '1,2,3,45,6,7,8'
//真的是45，不是4,5
```
### 六、array.slice(頭,尾)，分割陣列，包頭不包尾，重要
* **沒有副作用!! 不會更改到原本的陣列!!**
* 也可以用來做拷貝陣列
```javascript=
const a = [1,2,3,4,5,6,7]
a.slice(1,4)
// 回傳[2,3,4]
// 但a = [1,2,3,4,5,6,7]，因為沒有副作用!
const b = a.slice(0)
// b = [1,2,3,4,5,6,7]
```
### 七、array.splice，不重要，跳過這個吧。
這個語法雖然功能多，但是參數太多了，不如直接用for迴圈去寫。
### 八、array.join()，把陣列組成字串
沒有副作用
```javascript=
const a = ['Hello', 'my', 'friend']
a.join()
// 系統預設幫你用,分割
// a = 'Hello,my,friend'
a.join(', ')
// a = 'Hello, my, friend'
a.join('')
// a ='Hellomyfriend'
```
### 九、array.split()，把字串拆成陣列
* 適用於csv檔案，用,分割的文字檔
```javascript=
const monthString = 'Jan,Feb,Mar,Apr,May'
const monthArray1 = monthString.split(',')
//["Jan", "Feb", "Mar", "Apr", "May"]
//以下為錯誤示範
const monthArray2 = monthString.split()
// 他不知道怎麼分，沒有變化
//["Jan,Feb,Mar,Apr,May"]
const monthArray3 = monthString.split('')
//按字元分割
//["J", "a", "n", ",", "F", "e", "b", ",", "M", "a", "r", ",", "A", "p", "r", ",", "M", "a", "y"]
```
### 十、修改陣列的內容，array.forEach(value, index, array){}
類似於for迴圈，但他們設計原理不同，也有一些明顯的差異。
不同之處在於以下幾點:
* forEach無法提早結束或中斷
* forEach被呼叫時，this會傳遞到回調函式(callback)裡
* **forEach方法具有副作用**
下面二個方法程式碼其實是一樣的
```javascript=
const a = [1, 2, 3, 4, 5]
for (let i = 0; i < a.length; i++) {
console.log(i, a[i])
}
///1,2,3,4,5
```
```javascript=
const a = [1, 2, 3, 4, 5]
aArray.forEach(function(value, index, array){
// 對陣列元素作某些事
console.log(index, value)
// 0,1
// 1,2
// 2,3
// 3,4
// 4,5
})
```
### 十一、複製一個新的陣列做運用，array.map(value, index, array){}
* map比較常用。
* 會創造一個新的陣列，所以並不會產生副作用。
```javascript=
const a = [1, 2, 3, 4];
const new = a.map(function (value, index, array) {
return value + 100
})
//原陣列不會被修改
console.log(a) // [1, 2, 3, 4]
console.log(new) // [101, 102, 103, 104]
```
### 十二、reduce，太難了放棄，老師也放棄了
### 十三、array.sort()，排序
* **有副作用!**
* 數字陣列直接於 .sort() 預設下則是以 ASCII 字符順序，不是數字大小。
```javascript=
const a = [1,5,2,87,10,54]
a.sort()
// [1, 10, 2, 5, 54, 87]
```
* 要多function(a,b)才是按數字由小到大 (由大到小就改成b-a)
* a, b 是把陣列的二個值放進來比較
```javascript=
const a = [1,5,2,87,10,54]
a.sort(function (a, b) {
return a - b
})
```
### 十四、array.reverse()，反轉排序
* **有副作用!**
```javascript=
const fruit = ['蘋果', '芒果', '櫻桃', '香蕉' ]
fruit.reverse()
console.log(fruit)
//["香蕉", "櫻桃", "芒果", "蘋果"]
```
### 十五、array.find/findIndex(function(value, index, array){return value >= / <= / === 值})
* find是找值，findIndex是找索引(index)。
* 學findIndex就夠用了。找到符合某個值的參數後，再用array[i]的方式叫出那個值。
```javascript=
const aArray = [1, 3, 5, 7, 10, 22]
const bValue = aArray.find(function (value, index, array){
return value > 6
})
const cIndex = aArray.findIndex(function (value, index, array){
return value > 6
})
console.log(bValue) //7
console.log(cIndex) //3
console.log(aArray[cIndex]) // 7
```
### 十六、array.includes()
includes() 方法會判斷陣列是否包含特定的元素，並以此來回傳 true 或 false。
```javascript=
const a = [1, 2, 3];
console.log(a.includes(2)); // true
```
### 十七、array.filter(function(value, index array){})
filter通常用來依照條件過濾陣列，創造一個新的陣列
```javascript=
const a = [1, 3, 5, 7, 10, 22]
const b = a.filter(function (value, index, array){
return value > 6
})
console.log(a) //[1, 3, 5, 7, 10, 22]
console.log(b) //[7, 10, 22]
```
也可以用來去除掉某個值
```javascript=
const a = [1, 2, 2, 7, 2, 87]
const b = a.filter(function (value, index, array){
return value !== 2
})
console.log(a) //[[1, 2, 2, 7, 2, 87]
console.log(b) //[1, 7, 87]
```
## 參、
## 肆、
## 伍、
## 陸、
## 柒、
## 捌、
## 玖、
## 拾、
Sign in with Wallet
Connect another wallet