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}