# **==小小陣列篇==**
### 陣列的建立
```javascript=
let colors = ["Red", "Green", "Blue"]
````
```javascript=
let colors = [] // 空陣列
colors[0] = 'Red'
colors[1] = 'Green'
colors[2] = 'Blue'
console.log(colors) // ["Red", "Green", "Blue"]
````
### 陣列的應用
---
#### push 推送資料到陣列最後一筆
```javascript=
let colors = ["Red", "Green"]
colors.push("Blue")
console.log(colors) // ["Red", "Green", "Blue"]
````
#### pop 移除資料最後一筆
```javascript=
let colors = ["Red", "Green", "Blue"]
colors.pop()
console.log(colors) // ["Red", "Green"]
```
#### shift 移除第一筆資料並回傳
```javascript=
let array1 = [1, 2, 3]
let firstElement = array1.shift()
console.log(array1)// [2, 3]
console.log(firstElement) // 1
```
#### length 計算陣列有幾筆
```javascript=
let colors = ["Red", "Green", "Blue"]
console.log(colors.length) // 3
```
#### concat 合併陣列
```javascript=
let colors = ["Red", "Green"]
let colors2 = ["Blue"]
console.log(colors.concat(colors2)) // ["Red", "Green", "Blue"]
// 陣列合併字串會變陣列 字串合併陣列會變字串
```
#### fill 陣列中索引的第一個到最後一個的每個位置全部填入一個靜態的值
```javascript=
let colors = ["Red", "Green", "Blue"]
console.log(colors.fill('Hello', 1, 3)) // ["Red", "Hello", "Hello"]
// 可以代入 '要取代的值' '開始索引' (如沒有預設0) '結束索引' (如沒有預設最後一筆)
```
#### Array.from 類陣列(array-like)或是可迭代(iterable)物件建立一個新的 Array
```javascript=
let colors = 'red'
console.log(Array.from(colors)) //字串也算是類陣列 ["r", "e", "d"]
let arr = new Set(['foo', 'bar'])
console.log(Array.from(arr)) // set 出來的結果是物件的類陣列["foo", "bar"]
```
```javascript=
// 過濾重複的元素
let arr = ['A', 'B', 'C', 'A', 'D', 'E', 'D', 'F', 'G']
let result = new Set(arr)
result = Array.from(result)
console.log(result) // ["A", "B", "C", "D", "E", "F", "G"]
let result2 = [...(new Set(arr))]
console.log(result2) // ["A", "B", "C", "D", "E", "F", "G"]
```
#### filter 每個元素過濾指定條件並返回新陣列
```javascript=
let words = ['spray', 'exuberant', 'destruction', 'present']
let result = words.filter(word => word.length > 6)
console.log(result) // ["exuberant", "destruction", "present"]
// 過濾出超過長度6 的字串並返回一個新陣列
```
```javascript=
let name = 'I m D a v i d'
let nameArr = name.split('').filter(word => word !== ' ').join('')
console.log(nameArr) // ImDavid 過濾掉字串中的空格
```
```javascript=
// 過濾重複的元素
let arr = ['A', 'B', 'C', 'A', 'D', 'E', 'D', 'F', 'G']
let result = arr.filter(
onlyarr = (element, index, thisArg) => {
// element 原陣列目前所迭代處理中的元素
// index 原陣列目前所迭代處理中的元素之索引。
// thisArg 可選的。執行 callback 回呼函式的 this 值。
return thisArg.indexOf(element) === index
// 利用 indexOf 特性 過濾 重複的
}
)
let repeat = arr.filter(
Nonlyarr = (element, index, thisArg) => {
return thisArg.indexOf(element) !== index
// 利用 indexOf 特性 過濾 非重複的
}
)
console.log(result) // 不重複 ["A", "B", "C", "D", "E", "F", "G"]
console.log(repeat) // 重複 ["A", "D"]
```
#### reverse 陣列反轉 ---會更動到原陣列
```javascript=
let name = 'ImDavid'
let nameArr = name.split('').reverse().join('')
console.log(nameArr) // divaDmI
```
```javascript=
let colors = ["Red", "Green", "Blue"]
let NewColors = colors.reverse()
console.log(colors) // ["Blue", "Green", "Red"]
console.log(NewColors) // ["Blue", "Green", "Red"]
```
#### slice 陣列複製 / 陣列擷取
```javascript=
let animals = ['ant', 'bison', 'camel', 'duck', 'elephant']
console.log(animals.slice(2, 4)) // ["camel", "duck"]
// ()內第一個值為 開始索引值,第二個為結束索引值
```
```javascript=
let colors = ["Red", "Green", "Blue"]
let NewColors = colors.slice(0).reverse()
console.log(colors) // ["Red", "Green", "Blue"]
console.log(NewColors) // ["Blue", "Green", "Red"]
```
#### map 每個元素經過算運指定條件 且返回一個新陣列
#### sort 陣列排序 ---會更動到原陣列
```javascript=
let array1 = [1, 4, 9, 16]
let map1 = array1.map(x => x * 2)
console.log(map1) // [2, 8, 18, 32]
```
```javascript=
let arr = [0,1,2,3,4,5,6,7,8,9]
let total = 0
let arr2 = arr.map(x => total += x)
let arr3 = arr2.slice(0).sort((a, b) => {
return b - a
}) // sort會改變原陣列故克隆一個陣列出來做排序 sort b - a 大到小 a - b 小到大
console.log(arr2) // [0, 1, 3, 6, 10, 15, 21, 28, 36, 45]
console.log(arr3[0]) // 45
console.log(arr2.indexOf(45)) // 9
```
#### for of 疊代陣列
```javascript=
let colors = ["Red", "Green", "Blue"];
for(let color of colors){
console.log(color)
}// "Red" "Green" "Blue"
```
#### find 回傳第一個滿足所提供之測試函式的元素值。否則回傳 undefined
#### findIndex 跟find相似只是回傳的是索引值
```javascript=
let array1 = [5, 12, 8, 130, 44];
let found = array1.find(element => element > 10);
let found2 = array1.findIndex(element => element > 10);
console.log(found); // 12
console.log(found2); // 1
```
#### indexOf 回傳給定元素於陣列中第一個被找到之索引,若不存在於陣列中則回傳 -1
```javascript=
let beasts = ['ant', 'bison', 'camel', 'duck', 'bison'];
console.log(beasts.indexOf('bison')); // 1
console.log(beasts.indexOf('bison', 2)); // 4
// 2代表找第2筆 若沒有第2筆回傳 -1
console.log(beasts.indexOf('giraffe')); // -1
```
#### 試試這題
```javascript=
let names = ['David Lee', 'Momo Lee', 'Hohn Doe', 'Bobo bar']
function arrFun () {
return function () {
let newArr = []
for(let name of names) {
newArr.push(name.split(' ').filter(word => word !== 'Lee').join(''))
}
console.log(newArr) // ?
return newArr.indexOf('Momo Lee') === 1 ? true : false }
}
console.log(arrFun()()) // ?
```