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