陣列 Array

今天來分享一些在實務上常用到的Array操作，內容涵蓋較新語法
使用時最好是最好能夠將語法向下編譯至ES5提高瀏覽器支援度
目前最普遍的方式就是使用webpack搭配babel
使用教學網路上非常多，而我也將在之後的文章中分享我的個人設定

宣告

const arr1 = []
// arr1 = []

const arr2 = new Array()
// arr2 = []

const arr3 = new Array(5).fill('string')
// arr3 = ["string", "string", "string", "string", "string"]

說明
一般而言我們會使用arr1這種方式來宣告陣列，而不用使用arr2這樣的建構式方式
arr3是個實用的新使用方式，使用建構式搭配.fill方法建立帶有預設值的陣列相當實用

加入與移除元素

const arr = ['b', 'c', 'd']

arr.push('e')
// arr = ["b", "c", "d", "e"]

arr.unshift('a')
// arr = ["a", "b", "c", "d", "e"]

arr.pop()
// arr = ["a", "b", "c", "d"]

arr.shift()
// arr = ["b", "c", "d"]

arr.concat(4, 5, 6)
// arr = ["b", "c", "d"]

const newArr = arr.concat(4, 5, 6)
// newArr = ["b", "c", "d", 4, 5, 6]

const newArr2 = newArr.concat([7, 8, 9])
// newArr2 = ["b", "c", "d", 4, 5, 6, 7, 8, 9]

const newArr3 = newArr.concat([10, [11, 12]])
// newArr3 = ["b", "c", "d", 4, 5, 6, 10, [11, 12]]

說明
push添加元素至陣列尾端
unshift添加元素至陣列前端
pop移除陣列最尾端的一個元素
shift除陣列最前端的一個元素
concat將指定元素與暫列合併並回傳新陣列

concat能夠處裡給予的陣列，但無法處裡陣列中的陣列

取得子陣列 slice

slice不會修改元素本身，而是回傳一個新的陣列

const arr = [1, 2, 3, 4, 5]

arr.slice(3)      // return [4, 5]
arr.slice(2, 4)   // return [3, 4]
arr.slice(-2)     // return [4, 5]
arr.slice(1, -2)  // return [2, 3]
arr.slice(-2, -1) // return [4]

反轉

reverse直接反轉當前陣列

const arr = [1, 2, 3]
arr.reverse()
// arr = [3, 2, 1]

排序

sort直接排序當前陣列

const arr1 = [3, 5, 2, 4, 1]
arr1.sort()
arr1 = [1, 2, 3, 4, 5]

/* 使用**sort**排序物件元素沒有意義 */
const arr2 = [{a: 3}, {a: 1}, {a: 2}]
arr2.sort()
// arr2 = [{a: 3}, {a: 1}, {a: 2}]

/* sort 可以接受**排序函式** */
arr2.sort((a, b) => a.a > b.a)
// arr2 = [{a: 1}, {a: 2}, {a: 3}]

arr2.sort((a, b) => a.a < b.a)
// arr2 = [{a: 3}, {a: 2}, {a: 1}]

搜尋

搜尋陣列時會傳指定元素的引索值，若找不到該元素則回傳-1

// 尋字串、數值使用indexOf方法
const arr = [1, 'a', 3, { name: 'Peter'}, 'a']
arr.indexOf('a') // return 1
arr.lastIndexOf('a') // return 4

// 搜尋物件元素使用findIndex方法
const arr2 = [{ name: 'Peter'}, { name: 'Same'}]
arr2.findIndex(o => o.name === 'Sam') // return 1

map

將一個陣列轉換至另一個陣列

const arr1 = [
  {
    name: 'apple',
    price: 30
  }, {
    name: 'banana',
    price: 25
  }, {
    name: 'mango',
    price: 35
  }
]

const arr2 = arr1.map(f => f.name)
// arr2 = ["apple", "banana", "mango"]

filter

過濾一個陣列的內容

const arr1 = [
  {
    name: 'apple',
    price: 30
  }, {
    name: 'banana',
    price: 25
  }, {
    name: 'mango',
    price: 35
  }
]

const arr2 = arr1.filter(f => f.price >= 30)
// arr2 = [{name: 'apple', price: 30 }, {name: 'mango', price: 35}]

reduce

將一個陣列的內容及合成一個值
通常用來累加數值，或是將陣列集合成單一物件。

const total = [1, 2, 3, 4, 5].reduce((total, num) => total+=num, 0)
// total = 15

const arr1 = ["apple", "banana", "mango"]

const arr2 = arr1.reduce((arr, element, index) => {
  arr.push({
    id: index + 1,
    name: element
  })
  return arr
}, [])

// arr2 = [{id: 1,name: "apple"}, {id: 2,name: "banana"}, {id: 3,name: "mango"}]

補充
這邊示範了兩個範例
第一個範例比較普通，只簡單做個數字加總
第二個範例比較有趣，示範如何把單一字串元素的陣列轉成一個帶有物件元素的陣列
更完整有關reduce方法的使用方式請查看MDN reduce 文件

includes

確認陣列元素中是否存在指定元素

const arr = ['cat', 'dog', 'pig']
arr.includes('cat')    // return true
arr.includes('people') // return false

every

陣列中的每個元素都符合條件回傳true

const arr = [
    {
        name: 'Peter',
        age: 23
    }, {
        name: 'Sam',
        age: 31
    }, {
        name: 'John',
        age: 27
    }
]

arr.every(man => man.age > 20)  // return true
arr.every(man => man.age < 30)  // return false

some

陣列中只要有一個元素都符合條件就回傳true

const arr = [
    {
        name: 'Peter',
        age: 23
    }, {
        name: 'Sam',
        age: 31
    }, {
        name: 'John',
        age: 27
    }
]

arr.some(man => man.age > 20)  // return true
arr.some(man => man.age < 20)  // return false

這裡僅列出了我常用的API
更多更完整的Array的使用方式可以參考MDN Array API