前言

金魚腦記不起這麼多，只好寫寫文章速查用

JS30 Array Cardio

基礎操作

• 盡量不要去操作原始資料，先複製一份做操作更佳

• Array.isArray(arr) 判斷是否為陣列

• unshift(0) 加入首項

• shift() 移除首項

• push(4) 加入末項

• pop() 移除末項

    let arr = [1, 2, 3]
    let obj = {}
    console.log(Array.isArray(arr)) //true
    console.log(Array.isArray(obj)) //false

    arr.unshift(0)
    console.log(arr) // 加入首相[0, 1, 2, 3]
    arr.shift()
    console.log(arr) // 移除首項[1, 2, 3]
    arr.push(4)
    console.log(arr) // 加入末項[1, 2, 3, 4]
    arr.pop() 
    console.log(arr) // 移除末項[1, 2, 3]

陣列插入 & 刪除 & 修改元素 splice

splice 整理文章才發現 可以用來插入元素 Orz....

• 參數: 從哪裡開始刪除、刪除幾個、要加入的新元素(可多個)

1. 插入元素
2. 刪除元素
3. 修改元素 (刪除該位置元素，再從該位置新增元素)

• split 為字串方法 用於切割字串，不可用於陣列!! (老是搞混這兩個傢伙..)

    const testArr = [0, 1, 2, 3]
    
    // 可用參數: index,count,newElemA,newElemB
    
    // splice 純粹加入元素
    // 在 index0位置 刪除0個元素=不刪 插入 'HEAD'
    testArr.splice(0, 0, 'Head')
    console.log(testArr)  // ['Head', 0, 1, 2, 3]
    
    // splice 純粹刪除元素
    // 於 index 4 刪除一個元素 即3
    testArr.splice(4, 1)
    console.log(testArr) // ['Head', 0, 1, 2]

    // splice 刪除既有元素，在該位置新增元素
    testArr.splice(0, 1, 'newElemA', 'newElemB')
    console.log(testArr) // ["newElem", ,'newElemB', 0, 1, 2]

    // split 字串方法
    const str = 'hey yo'
    str.split(' ') // 以空白為切割點

陣列切割 & 拷貝 slice

• slice 用來複製陣列、切割產出新陣列，不影響原始資料
• copyWithin 淺拷貝一部分陣列丟回原陣列某位置，陣列長度不變
• copyWithin 會影響原始資料！！

    // slice
    // 傳入參數:始、末  (切割結果不含末元素)
    // 淺拷貝、原始陣列不會被修改
    const sliceArr = [1, 2, 3, 4, 5]
    
    // 用來複製陣列並產生出新陣列
    const copyArr = sliceArr.slice(0)
    console.log(copyArr) // [1, 2, 3, 4, 5]

    // 產生子陣列，省略末即切到底
    const partArr1 = sliceArr.slice(2)
    console.log(partArr1) // [3, 4, 5]
    
    // 始為 0 切至 index 1
    const partArr2 = sliceArr.slice(0, 2)
    console.log(partArr2) // [1, 2]
    
    // copyWithin
    // 參數: 搬遷位置、開始複製點、結束複製點
    
    const arr1 = [1, 2, 3, 4, 5, 6]
    const arr2 = [1, 2, 3, 4, 5, 6]
    
    // 複製456 貼至 index 0 的位置，因為長度不改變，覆蓋元素
    arr1.copyWithin(0, 3, 6)
    console.log(arr1) // [4, 5, 6, 4, 5, 6]

    // 預設始為0、末為陣列長度
    // 將 整個陣列從 index 3的位置開始複蓋
    arr2.copyWithin(3)
    console.log(arr2) // [1, 2, 3, 1, 2, 3]

splice slice比較

• splice 用於 插入 & 刪除 & 更改元素
• slice 用於 切割 & 複製
• 以下為 slice 實現 splice 功能 (手癢寫著練練)

    // 修改 slice 即可做到 splice效果，但就沒那麼漂亮
    const arr = [1, 2, 3, 4, 5, 6]
    const arrHead = arr.slice(0, 3)
    const arrFoot = arr.slice(3, 7)
    const newArr = [...arrHead, 'newStuff', ...arrFoot]
    console.log(arr) // 原始陣列不被更改
    console.log(newArr)

    // splice
    const spliceArr = [...arr]
    spliceArr.splice(3, 0, 'newStuff')
    console.log(spliceArr)

陣列合併

• concat 合併 "多個" 陣列 (亦可用於字串串接)
• 利用 rest parameter 合併陣列

    const arr1 = [1, 2, 3]
    const arr2 = [4, 5, 6]
    const arr3 = [7, 8, 9]
    
    // concat [1, 2, 3, 4, 5, 6, 7, 8, 9]
    console.log(arr1.concat(arr2,arr3))
    
    // rest parameter [1, 2, 3, 4, 5, 6]
    console.log([...arr1, ...arr2])

陣列 找值

• includes() 回傳Boolean (IE不支援)
• find() 回傳第一個滿足的值，無則undefined

    const arr = ['a', 'a', 'b', 'c', 'd']
    
    // includes
    console.log(arr.includes('a'))// true
    console.log(arr.includes('z'))// false
    
    // find
    console.log(arr.find(elem => elem === 'a')) // 'a'
    console.log(arr.find(elem => elem === 'z')) // undefined

陣列 找Index

• indexOf() 回傳第一個滿足的Index，無則-1
• findIndex() 回傳第一個滿足的Index，無則-1
• jQuery $.inArray() 回傳Index，無則-1

    const arr = ['a', 'a', 'b', 'c', 'd']
    
    // indexOf
    console.log(arr.indexOf('a')) // 0
    
    // findIndex
    console.log(arr.findIndex(elem => elem === 'a')) // 0
    console.log(arr.findIndex(elem => elem === 'z')) // -1

    // jQuery $.inArray方法
    $.inArray('a', arr) // 0
    $.inArray('z', arr) // -1 不存在

jQ $in.Array方法原始碼

    inArray: function( elem, array, i ) {
      var len;
      if ( array ) {
        if ( indexOf ) { return indexOf.call( array, elem, i ); }
        len = array.length;
        i = i ? i < 0 ? Math.max( 0, len + i ) : i : 0;
        for ( ; i < len; i++ ) {
          // Skip accessing in sparse arrays
          if ( i in array && array[ i ] === elem ) { return i; }
        }
      }
      return -1;
    }

JSON資料找值

• 先做找到Index位置，在抓出該筆資料

    // 找John並噴出該資料
    const people = [
      { name: 'Peter', age: 10 },
      { name: 'John', age: 3 },
      { name: 'Nina', age: 15 },
    ]
    const targetIndex = people.findIndex(elem => elem.name === 'John')
    const target = people[targetIndex]
    console.log(target)

畫餅環節..

• 陣列去重 寫一篇文
• Set / Map 寫一篇文
• 整理Array文章超連結

參考資料

MDN
andyyou
Summer。桑莫。夏天
StackOverFlow產數字陣列
copyWithin用法