---
# System prepended metadata

title: '**==小小陣列篇==**'

---

# **==小小陣列篇==**
### 陣列的建立
```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()()) // ?
```

