JavaScript的數組經常使用的方法（上）

會改變自身的方法有9種：

1.copyWithin()：淺複製數組的一部分到同一數組的另外一個位置，並返回它，不會改變原數組的長度

2.fill()：用一個固定值填充一個數組中從起始索引到結束索引內的所有元素，但不包括結束索引，並返回該數組，不會改變原數組的長度

3.pop()：從數組中刪除最後一個元素，並返回該元素的值。此方法更改數組的長度

4.shift()：從數組中刪除第一個元素，並返回該元素的值。此方法更改數組的長度

5.push()：在數組的末尾增長一個或多個元素，並返回數組的新長度

6.unshift()：在數組的開頭增長一個或多個元素，並返回數組的新長度

7.splice()：在任意的位置給數組添加或刪除任意個元素

8.sort()：對數組元素進行排序，並返回當前數組

9.reverse()：將數組中元素的位置顛倒，並返回該數組。該方法會改變原數組

1.copyWithin()：淺複製數組的一部分到同一數組的另外一個位置，並返回它，不會改變原數組的長度

/**
     * 方法：copyWithin
     * 做用：淺複製數組的一部分到同一數組的另外一個位置，並返回它，不會改變原數組的長度
     * 語法：arr.copyWitin(target[, start[, end]])
     *      arr.copyWitin(target)
     *      arr.copyWitin(target, start)
     *      arr.copyWitin(target, start, end)
     *      arr.copyWitin(目標索引, 起始索引, 結束索引)
     * 參數：
     *    target 目標索引
     *    0 爲基底的索引，複製序列到該位置。
     *    若是是負數，target 將從末尾開始計算。
     *    若是 target 大於或等於 arr.length，將會不發生。
     *    若是 target 在 start 以後，複製的序列將修改以符合 arr.length。
     * 
     *    start 起始索引
     *    0 爲基底的索引，開始複製元素的起始位置。
     *    若是是負數，start 將從末尾開始計算。
     *    若是 start 被忽略，copyWithin 將會從0開始複製。
     * 
     *    end 結束索引
     *    0 爲基地的索引，開始複製元素的結束位置。copyWithin 將會拷貝到該位置，但不包括 end 這個位置的元素。
     *    若是是負數，end 將從末尾開始計算。
     *    若是 end 被忽略，copyWithin 方法將會一直複製至值數組結尾（默認爲arr.length）
     * 返回值：改變後的數組
     * 描述：
     *    參數target、start、end 必須是整數
     *    若是start爲負，則其指定索引值等同於length+start，length爲數組的長度。end也是如此
     **/

    var arr = [1,2,3,4,5]
    // 取索引爲0到結尾的數據（start/end的索引不填，意味着從索引0開始找/找到數組結尾），從末尾開始計算的第3個開始替換
    console.log(arr.copyWithin(-3))
    [1, 2, 1, 2, 3]

    var arr = [1,2,3,4,5]
    // 取索引爲3到結尾的數據（end的索引不填，意味着找到數組結尾），從索引0開始替換
    console.log(arr.copyWithin(0, 3))
    //[4, 5, 3, 4, 5]

    var arr = [1,2,3,4,5]
    // 取索引爲3到4的數據，不包括索引4的數據，從索引0開始替換
    console.log(arr.copyWithin(0, 3, 4))
    //[4, 2, 3, 4, 5]

    var arr = [1,2,3,4,5]
    // 取從末尾開始計算的第3個到第1個，不包括從末尾開始的第1個，從末尾開始計算的第2個開始替換
    console.log(arr.copyWithin(-2, -3, -1))
    //[1,2,3,3,4]

    var arr = [1,2,3,4,5]
    // 取索引爲1到3的數據，不包括索引3的數據，從索引2開始替換
    console.log(arr.copyWithin(2, 1, 3))
    //[1,2,2,3,5]

2.fill()：用一個固定值填充一個數組中從起始索引到結束索引內的所有元素，但不包括結束索引，並返回該數組，不會改變原數組的長度

/**
     * 方法：fill
     * 做用：用一個固定值填充一個數組中從起始索引到結束索引內的所有元素，但不包括結束索引，並返回該數組，不會改變原數組的長度
     * 語法：arr.fill(value[,start[,end]])
     *      arr.fill(value)
     *      arr.fill(value, start)
     *      arr.fill(value, start, end)
     *      arr.fill(填充數組的值, 起始索引, 結束索引)
     * 參數：
     *      value 用來填充數組的值
     *      start 起始索引，默認值爲0
     *      end 結束索引，默認值爲this.length
     * 返回值：修改後的數組
     * 描述：
     *      fill方法接受的三個參數value，start，end，起始start，end是可選的，其默認值分別爲0，this.length
     *      若是start爲負，則其指定索引值等同於length+start，length爲數組的長度。end也是如此
     * */ 

    var arr = [1,2,3,4,5]
    // 用4替換從索引0到結尾的值
    console.log(arr.fill(4))
    //[4,4,4,4,4]

    var arr = [1,2,3,4,5]
    // 用4替換從索引1到結尾的值
    console.log(arr.fill(4, 1))
    //[1,4,4,4,4]

    var arr = [1,2,3,4,5]
    // 用4替換從索引1到3的值，不包括索引3的值
    console.log(arr.fill(4, 1, 3))
    //[1,4,4,4,5]

    var arr = [1,2,3,4,5]
    // 用4替換從索引2到3的值，不包括索引3的值
    arr.length = 5 => 5 + (-3) = 2 => 5 + (-2) = 3 
    console.log(arr.fill(4, -3, -2))
    //[1,2,4,4,5]

3.pop()：從數組中刪除最後一個元素，並返回該元素的值。此方法更改數組的長度

/**
     * 方法：pop
     * 做用：從數組中刪除最後一個元素，並返回該元素的值。此方法更改數組的長度
     * 語法：arr.pop()
     * 參數：不須要傳參
     * 返回值：
     *      從數組中刪除的元素
     *      若是數組爲空則返回undefined 
     * 描述：
     *      pop方法從數組中刪除並返回最後一個元素
     *      若是空數組調用pop方法，返回undefined
     * */ 

    var arr = [1,2,3,4,5]
    // 從arr中刪除並返回最後一個元素，原數組長度改變
    console.log(arr.pop())
    console.log(arr)
    //5
    //[1,2,3,4]

4.shift()：從數組中刪除第一個元素，並返回該元素的值。此方法更改數組的長度

/**
     * 方法：shift
     * 做用：從數組中刪除第一個元素，並返回該元素的值。此方法更改數組的長度
     * 語法：arr.shift()
     * 參數：不須要傳參
     * 返回值：
     *      從數組中刪除的元素
     *      若是數組爲空則返回undefined 
     * 描述：
     *      pop方法從數組中刪除並返回最後一個元素
     *      若是空數組調用pop方法，返回undefined
     * */ 

    var arr = [1,2,3,4,5]
    // 從arr中刪除並返回第一個元素，原數組長度改變
    console.log(arr.shift())
    console.log(arr)
    //1
    //[2,3,4,5]

5.push()：在數組的末尾增長一個或多個元素，並返回數組的新長度

/**
     * 方法：push
     * 做用：在數組的末尾增長一個或多個元素，並返回數組的新長度
     * 語法：arr.push(element1,...,elementN)
     * 參數：被添加到數組末尾的元素
     * 返回值：
     *      返回新的length屬性值，即返回新的數組長度
     * 描述：
     *      push 方法降值追加到數組中
     * */ 

    // 添加元素
    var arr = [1,2,3,4,5]
    // 把6追加到arr中，並返回arr的長度
    console.log(arr.push(6))
    console.log(arr)
    //6
    // [1,2,3,4,5,6]

    // 添加數組
    var arr = [1,2,3,4,5]
    var arrNew = [6,7,8]
    // 把arrNew追加到arr中，並返回arr的長度
    console.log(arr.push.apply(arr,arrNew))
    console.log(arr)
    //8
    //[1,2,3,4,5,6,7,8]

6.unshift()：在數組的開頭增長一個或多個元素，並返回數組的新長度

/**
     * 方法：unshift
     * 做用：在數組的開頭增長一個或多個元素，並返回數組的新長度
     * 語法：arr.unshift(element1,...,elementN)
     * 參數：被添加到數組開頭的元素
     * 返回值：
     *      返回新的length屬性值，即返回新的數組長度
     * 描述：
     *      unshift 方法將值插到數組開始位置
     * */ 

    // 添加元素
    var arr = [1,2,3,4,5]
    // 把6追加到arr中，並返回arr的長度
    console.log(arr.push(6))
    console.log(arr)
    //6
    // [1,2,3,4,5,6]

    // 添加數組
    var arr = [1,2,3,4,5]
    var arrNew = [6,7,8]
    // 把arrNew追加到arr中，並返回arr的長度
    console.log(Array.prototype.push.apply(arr,arrNew))
    console.log(arr)
    // 8
    //[1,2,3,4,5,6,7,8]

7.splice()：在任意的位置給數組添加或刪除任意個元素

/**
     * 方法：splice
     * 做用：在任意的位置給數組添加或刪除任意個元素
     * 語法：array.splice(start[, deleteCount[, item1[, item2[, ...]]]])
     * 參數：
     *      start 指定修改的開始位置
     *        若是超出了數組的長度，則從數組末尾開始添加內容
     *        若是是負值，則表示從數組末位開始的第幾位（從-1 計數，這意味着-n是倒數而且等價於array.length-n）
     *        若是負數的絕對值大於數組的長度，則表示開始位置爲第0位
     * 
     *      deleteCount 整數，表示要移除的數組元素的個數
     *        若是 deleteCount 大於start以後的元素的總數，則從start後面元素都將被刪除（含第start位）
     *        若是 deleteCount 被省略了，或者它的值大於等於array.length - start（也就是說，若是他大於
     *        或等於以後的全部元素的數量），那麼start以後數組的全部元素都會被刪除
     *        若是 deleteCount 是0或者負數，則不移動元素。這種狀況下，至少應該天啊及一個新元素
     * 
     *      item1,item2,item3,..可選
     *        要添加進數組的元素，從start位置開始。
     *        若是不指定，則splice() 將只刪除數組元素
     * 返回值：
     *      由被刪除的元素組成的一個數組。
     *      若是隻刪除了一個元素，則返回只包含一個元素的數組。
     *      若是沒有刪除，則返回空數組
     * 描述：
     *      若是添加進數組的元素個數不等於被刪除的元素個數，數組的長度會發生相應的改變
     *      
     * */ 


    var arr = [1,2,3,4,5]
    // 從第2位開始刪除0個元素，插入6
    console.log(arr.splice(2, 0, 6))
    console.log(arr)
    // 沒有刪除，則返回空數組
    // [1,2,6,3,4,5,6]

    var arr = [1,2,3,4,5]
    // 從第2位開始刪除0個元素，插入6,7,8
    console.log(arr.splice(2, 0, 6, 7, 8))
    console.log(arr)
    // 8
    // [1,2,6,7,8,3,4,5]

    var arr = [1,2,3,4,5]
    // 從第2位開始刪除2個元素
    console.log(arr.splice(arr.length - 3, 2))
    console.log(arr)
    // [3,4]
    // [1,2,5]

    var arr = [1,2,3,4,5]
    // 從倒數第2位開始刪除2個元素
    // 意味着 arr.length + (-n)
    console.log(arr.splice(-2, 2))
    console.log(arr)
    // [3,4]
    // [1,2,5]

    var arr = [1,2,3,4,5]
    // 從倒數第2位開始刪除2個元素
    console.log(arr.splice(2))
    console.log(arr)
    // [3,4]
    // [1,2,5]

    var arr = [1,2,3,4,5]
    // 從第1位開始刪除全部元素
    console.log(arr.splice(0))
    console.log(arr)
    // [1,2,3,4,5]
    // []

    var arr = [1,2,3,4,5]
    // 不刪除元素
    console.log(arr.splice())
    console.log(arr)
    // []
    // [1,2,3,4,5]

    var arr = [1,2,3]
    console.log(arr.length) 
    // 從第一位開始刪除2個元素，添加4,5,6,7
    console.log(arr.splice(0,2,4,5,6,7))
    console.log(arr.length)
    // 3
    // [1,2]
    // 5

8.sort()：對數組元素進行排序，並返回當前數組

/**
     * 方法：sort
     * 做用：對數組元素進行排序，並返回當前數組
     * 語法：arr.sort([compareFunction])
     * 參數：
     *      compareFunction 用指定按某種順序進行排列的函數
     *      若是省略，元素按照轉換的字符串的各個字符的Unicode位點進行排序
     *      
     *      firstEl 第一個用於比較的元素
     * 
     *      secondEl 第二個用於比較的元素
     * 返回值：排序後的數組。請注意，數組已原地排序，而且不進行復制
     * 描述：
     *      若是不指明 compareFunction，那麼元素會按照轉換爲的字符串的各個字符的Unicode位點進行排序
     *            
     *
     *      若是指明瞭 compareFunction，那麼數組會按照調用函數的返回值排序。即a和b是兩個將要
     *      比較的元素：
     *      - compareFunction(a,b) > 0 => a 在 b 前面
     *      - compareFunction(a,b) = 0 => a 和 b 位置不變
     *      - compareFunction(a,b) < 0 => b 在 a 前面
     *      
     *      compareFunction(a,b) 必須老是對相同的輸入返回相同的比較結果，不然排序的結果是不肯定
     * 
     * */ 


    var arr = [4,2,5,1,3]
    // 升序
    arr.sort(function(a,b){
      return a - b;
    })
    console.log(arr)
    // [1,2,3,4,5]

    var arr = [4,2,5,1,3]
    // 升序
    // ES6 寫法
    arr.sort((a,b) => a - b)
    console.log(arr)
    // [1,2,3,4,5]

    var arr = [4,2,5,1,3]
    // 降序
    arr.sort(function(a,b){
      return b - a;
    })
    console.log(arr)
    // [5,4,3,2,1]

    // 對象能夠按照某個屬性排序
    var items = [
      { name: 'Edward', value: 21 },
      { name: 'Sharpe', value: 37 },
      { name: 'And', value: 45 },
      { name: 'The', value: -12 },
      { name: 'Magnetic' },
      { name: 'Zeros', value: 37 }
    ];
    items.sort((a,b) => a.value - b.value)
    console.log(items)
    // [{name: "The", value: -12},
    // {name: "Edward", value: 21},
    // {name: "Sharpe", value: 37},
    // {name: "And", value: 45},
    // {name: "Magnetic"},
    // {name: "Zeros", value: 37}]

9.reverse()：將數組中元素的位置顛倒，並返回該數組。該方法會改變原數組

/**
     * 方法：reverse
     * 做用：將數組中元素的位置顛倒，並返回該數組。該方法會改變原數組
     * 語法：arr.reverse()
     * 參數：不須要傳參
     * 返回值：顛倒後的數組
     * 描述：
     *      reverse方法顛倒數組中元素的位置，改變了數組，並返回改數組的引用
     * */ 

    // 顛倒數組中的元素
    var arr = [4,2,5,1,3]
    console.log(arr)
    arr.reverse()
    console.log(arr)
    // [1,2,3,4,5]
    // [3,1,5,2,4]

    // 顛倒類數組中的元素
    var arr = {0: 1, 1: 2, 2: 3, length: 3}
    console.log(arr)
    // reverse() 調用返回一個顛倒後的類數組對象arr的引用
    Array.prototype.reverse.call(arr)
    console.log(arr)
    // {0: 1, 1: 2, 2: 3, length: 3}
    // {0: 3, 1: 2, 2: 1, length: 3}