接下來介紹處理陣列的方法

這些方法對於資料處理很重要

那就一起來看下去吧

處理陣列的方法

.forEach()

陣列用來跑迴圈，括號內放入function

.forEach() 內放入的function 可以回傳三個值 item, index, array
item 為陣列內的值
index 為陣列內的索引
array 為陣列本身

    // 此程式碼會跑陣列的長度的次數
    const array =  ['a', 'b', 'c', 'd', 'e']
    array.forEach(function (item, index, array){
    console.log(item, index, array)})

額外補充

名詞解釋匿名函式與箭頭函式

    const array =  ['a', 'b', 'c', 'd', 'e']
    //沒給function 名字稱為匿名函式
    array.forEach(function (item, index, array){
    console.log(item, index, array)})
    // 把function 拿掉加入 => 稱為箭頭函式
    arr1.forEach((item, index, array) => {
      console.log(item, index, array)
    })

若使用.forEach() 想更改陣列內的值該如何修改
直接將item (陣列內的值)進行修改
console 出來後發現陣列內的值並未修改

    const array =  ['a', 'b', 'c', 'd', 'e']
    array.forEach((item, index, array) => {
      console.log(item, index, array)
      item = '1'
    })

需要指定陣列的索引值才能將陣列內的值逐一更改(寫code 的時候需要注意一下)

    const array =  ['a', 'b', 'c', 'd', 'e']
    array.forEach((item, index, array) => {
      console.log(item, index, array)
      array[index] = '1'
    })

這個感覺有點像for of, for in 的感覺
補充：.forEach() 只能對一般陣列跑，有些資料回傳資料型態看似陣列而非陣列則不可使用此方法(可能要踩幾次雷才會知道其中的奧義)

.join()

把陣列使用指定的字串連接再一起

這個在資料處理上會搭配其他的方法一起使用

    const array = ['John', 'Cena', 'Good']
    console.log(array.join(' ')); // John Cena Good
    console.log(array.join('.')); // John.Cena.Good
    console.log(array.join('')); // JohnCenaGood

.push()

新增一個資料在陣列最後面，回傳新增後的陣列長度(常使用到)

.push() 可以用來新增一筆資料，可以用到的地方太多(什麼都可以忘.push()不能忘！)

    const array = [1, 2, 3, 4, 5]
    array.push(9)
    console.log(array); // 回傳新增的陣列 [1, 2, 3, 4, 5, 9]
    console.log(array.push(9)); // 回傳長度 7

.unshift()

新增一個資料在陣列最前面，回傳新增後的陣列長度

有新增到最後面的資料就有新增到最前面的資料，可以把他跟.push() 一起記起來

    const array = [1, 2, 3, 4, 5]
    array.unshift(6)
    console.log(array); // 回傳新增的陣列 [6, 1, 2, 3, 4, 5]

.pop()

刪除最後一筆資料，會回傳刪除的東西

有增加資料就有刪除資料，這個跟 .push() 一樣重要

    const array = [1, 2, 3, 4, 5]
    array.pop()
    console.log(array); // 回傳刪除的陣列 [ 1, 2, 3, 4]

.shift()

刪除第一筆資料，會回傳刪除的東西

.shift() 跟 .unshift 可以一起記
順便查一下單字的意思，應該是轉移的意思，稍微想像一下把資料轉移變成刪除（？）
應該會好記一點

    const array = [1, 2, 3, 4, 5]
    array.shift()
    console.log(array); // 回傳刪除的陣列 [ 2, 3, 4, 5]

.splice()

從指定位置刪除指定的資料值再新增資料

寫了一堆看起來頭更暈的註解，到底是什麼意思呢，直接看範例比較快

    // splice(起始位置,刪除數量[新增值1,值2,值3])
    const array = [1, 2, 3, 4, 5]
    // 刪除第 3 個位置 1 個數字再新增值 1, 1, 1
    // 刪掉陣列的 4 再新增值
    array.splice(3,1,1,1,1)
    console.log(array); // 回傳陣列 [1, 2, 3, 1, 1, 1, 5]

看範例好像有一點點看懂了
再多看幾個範例吧

    const array = [1, 2, 3, 4, 5]
    // 在 0 的位置刪除 0 個陣列在加入 0  
    array.splice(0, 0, 0)
    console.log(array); // 回傳陣列 [0, 1, 2, 3, 4, 5]

.splice(0, 0, 0) 換言之就是在最前面新增一筆資料 0，跟剛剛提到的 .unshift()功能一樣
所以 .splice() 也可以在最後加一筆資料跟.push()一樣
當然也可以刪除指定位置的資料也俱有.pop() .shift() 功能，只能說.splice() 使用彈性大

到這先歇一會兒
前面有提到字串的處理.split(), slice() 現在到了陣列處理多了.splice()
這三個東西真的長得很像加上英文普普，常常搞混到底要用哪一個
我們先來翻譯一下這三個東西
.split() 分裂, .slice() 切片, .splice() 拼接
.split() 使用指定的字串切割文字
.slice(開始[,結束]) 切割文字，可以放入開始位置與結束位置(但不包含結束位置)

    const array = "1, 2, 3, 4, 5"
    const arrsplit = array.split(",")
    console.log(arrsplit); //  ['1', '2', '3', '4', '5']
    const arrslice = arrsplit.slice(2,4)
    console.log(arrslice); // ['3', '4']

好了感覺有清楚一點點了(吧？！)
繼續介紹其他方法

.concat()

併兩個陣列並產生新的陣列

放置array.concat(array1) 前後擺放會有差異，使用時要注意

    const array = [1, 2, 3]
    const array1 = [7, 8, 9]
    const array2 = array.concat(array1)
    console.log(array2); //  [1, 2, 3, 7, 8, 9]

.reverse()

將陣列反轉

    const array = [1, 2, 3, 4, 5]
    array.reverse()
    console.log(array); //  [5, 4, 3, 2, 1]

.indexOf()

尋找陣列內是否有存在指定值，有則回傳位置，無則回傳 -1

字串處理也有.indexOf()
這個方法常用尋找是否有符合的資料

    const array = [1, 2, 3, 4, 5]
    const indexOf = array.indexOf(3)
    console.log(indexOf); //  2 找到數值 3 在位置 2
    const indexOf1 = array.indexOf(8)
    console.log(indexOf1); //  -1 找不到值

.includes()

確認陣列內是否有相符的值，並回傳布林值

字串處理也有.includes()
可用來驗證是否有相同的會員資料

    const array = [1, 2, 3, 4, 5]
    const includes = array.includes(3)
    console.log(includes); //  true
    const includes1 = array.includes(8)
    console.log(includes1); //  false

.some()

.some(item, index, array)

陣列用來跑迴圈找出是否有判斷的值

.some() 內放入的function 可以回傳三個值 item, index, array
item 為陣列內的值
index 為陣列內的索引
array 為陣列本身
只要有一個值相符合就會回傳true, 若都無相符則回傳false

    array = [
      { name: 'class A', student: 22 },
      { name: 'class B', student: 25 },
      { name: 'class C', student: 30 },
      { name: 'class D', student: 35 },
    ]
    const has26student = array.some(item => {
        return item.student >= 26
    })
    console.log(has26student); // true

.findIndex()

.findIndex(item, index, array)

陣列用來跑迴圈找出是否有判斷值若有則回傳第一個找到值的索引

    array = [
      { name: 'class A', student: 22 },
      { name: 'class B', student: 25 },
      { name: 'class C', student: 30 },
      { name: 'class D', student: 35 },
    ]
    const has30student = array.findIndex(item => {
      return item.student >= 30
    })
    console.log(has30student); // 2

.filter()

.filter(item, index, array)

陣列用來跑迴圈找出是否有判斷值並進行篩選並回傳陣列內資料

    array = [
      { name: 'class A', student: 22 },
      { name: 'class B', student: 25 },
      { name: 'class C', student: 30 },
      { name: 'class D', student: 35 },
    ]
    const filtered = array.filter(item => {
      return item.student >= 30
    })
    console.log(filtered); // [{name:'class C',student:30},{name:'class D',student:35}]

.map()

.map(item, index, array)

重組陣列內容後產生新陣列，function 需return 新的值

    const array = [1, 2, 3, 4, 5]
    const array1 = array.map(item => {
        return item * 2
    })
    console.log(array1); // [2, 4, 6, 8, 10]

再看另外一個範例
將陣列的學生數目 * 2 並將所有陣列加入地址 New Taipei City

    array = [
      { name: 'class A', student: 22 },
      { name: 'class B', student: 25 },
      { name: 'class C', student: 30 },
      { name: 'class D', student: 35 },
    ]
    const array1 = array.map(item => {
        item.student *= 2
        item.address = 'New Taipei City'
        return item 
    })
    console.log(array1); 
    /* array = [
      { name: 'class A', student: 44, address: 'New Taipei City' },
      { name: 'class B', student: 50, address: 'New Taipei City' },
      { name: 'class C', student: 60, address: 'New Taipei City' },
      { name: 'class D', student: 70, address: 'New Taipei City' },
    ] */

.reduce()

.reduce(function, 初始值)

將陣列所有的值進行數學運算

做個加法的範例，function 內的運算式可依照自己需求運算

    const array = [1, 2, 3, 4, 5]
    const plus = (a, b) => {
      return a + b
    }
    const sum = array.reduce(plus)
    console.log(sum); // 15
    const sum1 = array.reduce(plus,5)
    console.log(sum1); // 20

.sort()

將陣列進行排序

function 內需傳入兩個值比大小並回轉值
若 a - b < 0, a 會排在 b 前面
a - b > 0 則反之
詳細驗證可以youtube 搜尋相關影片

    const array = [1, 100, 20, 30, 15, 5]
    const array1 = array.sort((a,b) => {
        return a - b
    }
    console.log(array1); // [1, 5, 15, 20, 30, 100]
    const array2 = array.sort((a,b) => {
        return b - a
    }
    console.log(array2); // [100, 30, 20, 15, 5, 1]

分了好幾次終於打完了，現在看到很多javascript 內建函式與方法，分開都聽得懂(很模糊)，但實際演練應用需要做相關程式邏輯的題目才會更了解使用方式，後續會再新增相關演練題目

拖了一陣子終於打完了，開心～