Array原型方法整理(一)

数组原型方法的分类：

  一、会改变调用它们的对象自身的值

  二、不会改变调用它们的对象自身的值

  三、遍历方法

一、9个会改变调用它们的对象自身的值的方法

pop()：删除数组的最后一个元素，并返回该元素。

var array = ["cat", "dog", "cow", "chicken", "mouse"];
var item = array.pop();
console.log(array); // ["cat", "dog", "cow", "chicken"]
console.log(item); // mouse

[].pop(); // undefined，空数组调用返回undefined

  pop方法可用在类数组对象的处理上，即鸭式辨型。

var o = {0:"cat", 1:"dog", 2:"cow", 3:"chicken", 4:"mouse", length:5}
var item = Array.prototype.pop.call(o);
console.log(o);//{0: "cat", 1: "dog", 2: "cow", 3: "chicken", length: 4}
console.log(item); // mouse


//如果不包含length属性或length属性不能被转成一个数值的话,
//那么会给该对象创建length属性且值为0，但是返回值为undefined，不会进行删除。
var o = {0:"cat", 1:"dog", 2:"cow", 3:"chicken"}
var item = Array.prototype.pop.call(o);
console.log(o); //{0: "cat", 1: "dog", 2: "cow", 3: "chicken", length: 0}
console.log(item); // undefined


//pop方法根据length属性来确定最后一个元素的位置。
var o = {0:"cat", 1:"dog", 2:"cow", 3:"chicken", 4:"mouse", length:3}
var item = Array.prototype.pop.call(o); // cow
console.log(o); // {0: "cat", 1: "dog", 3: "chicken", 4: "mouse", length: 2}

shift()：删除数组的第一个元素，并返回该元素。

var array = [1,2,3,4,5];
var item = array.shift();
console.log(array); // [2,3,4,5]
console.log(item); // 1

[].shift()；// undefined

splice(startIndex, deleteCount, addItem1, addItem2, ...addItemN)

  作用：在任意的位置给数组添加或删除任意元素，返回被删除的元素组成的数组；没有删除时，返回空数组。
  参数：startIndex -> 必选参数，要删除或是添加元素的起始索引位置
             deleteCount -> 可选参数， 要删除的元素个数
             addItemN -> 可选参数，要添加的元素。

var array = ["apple","orange"];
var splices = array.splice(1,1);
console.log(array); // ["apple"]
//由于addItemN缺省,故此时该方法只删除元素
console.log(splices); // ["orange"] 

array = ["apple","orange"];
splices = array.splice(2,1,"cat");
console.log(array); // ["apple", "orange", "cat"]
//由于start超过数组长度,此时从数组末尾开始添加元素,并且原数组不会发生删除行为
console.log(splices); // []

array = ["apple","orange"];
splices = array.splice(-2,1,"cat");
console.log(array); // ["cat", "orange"]
//当start为负值时,是从数组末尾开始的第-start位开始删除一个元素,并在此处插入了一个元素
console.log(splices); // ["apple"]

array = ["apple","orange"];
splices = array.splice(-3,1,"cat");
console.log(array); // ["cat", "orange"]
//即使-start超出数组长度,数组默认从首位开始删除
console.log(splices); // ["apple"]

array = ["apple","orange"];
splices = array.splice(0,3,"cat");
console.log(array); // ["cat"]
//当deleteCount大于数组start之后的元素总和时,start及之后的元素都将被删除
console.log(splices); // ["apple", "orange"]

  删除数组中一个已存在的元素。

var array = ['a','b','c'];
array.splice(array.indexOf('b'),1); //['b']

push(element1, ..., elementN)

  作用：向数组的末尾添加一个或更多元素，并返回数组的新长度。
  参数：elementN -> 被添加到数组末尾的元素，可忽略，则不添加元素。

var array = ["football", "basketball", "volleyball", "Table tennis", "badminton"];
var len = array.push("golfball");
console.log(array); // ["football", "basketball", "volleyball", "Table tennis", "badminton", "golfball"]
console.log(len ); // 6

  push处理类数组对象。

var o = {0:"football", 1:"basketball",length:2};
var len = Array.prototype.push.call(o, "golfball");
console.log(o); // {0: "football", 1: "basketball", 2: "golfball", length: 3}
   

//如果length属性或length属性不能被转成一个数值的话，
//那么会给该对象创建length属性，插入元素索引为0，并会覆盖掉索引上原来的值，
//而length值最终为添加的元素个数。
var o = {0:"football", 1:"basketball"};
var len = Array.prototype.push.call(o, "golfball");
console.log(o); // {0: "golfball", 1: "basketball", length: 1}
   

//实际上，push方法是根据length属性来决定从哪里开始插入给定的值。
var o = {0:"football", 1:"basketball",length:3};
var len = Array.prototype.push.call(o,"golfball");
console.log(o); // {0: "football", 1: "basketball",3:"golfball", length: 4}

   
//利用push根据length属性插入元素这个特点，可以实现数组的合并。
var array = ["football", "basketball"];
var array2 = ["volleyball", "golfball"];
var len = Array.prototype.push.apply(array,array2);
console.log(array); // ["football", "basketball", "volleyball", "golfball"]
console.log(len ); // 4

unshift(element1, ..., elementN)

  定义：向数组的开头添加一个或更多元素，并返回数组的新长度
  参数：elementN -> 要添加到数组开头的元素 

var array = ["red", "green", "blue"];
var length = array.unshift("yellow");
console.log(array); // ["yellow", "red", "green", "blue"]
console.log(length); // 4

reverse()：颠倒数组中元素的顺序，并返回该数组的引用。

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

  reverse处理类数组对象。

//reverse处理类数组对象时，颠倒元素的范围受length属性制约。
var o = {0:"a", 1:"b", 2:"c", length:2};
var o2 = Array.prototype.reverse.call(o);
console.log(o); // Object {0: "b", 1: "a", 2: "c", length: 2}
console.log(o === o2); // true
   

//而且length值较大时，类数组对象的索引会尽可以能向length看齐。
var o = {0:"a", 1:"b", 2:"c",length:100};
var o2 = Array.prototype.reverse.call(o);
console.log(o); // {97: "c", 98: "b", 99: "a", length: 100}
console.log(o === o2); // true
         

//如果类数组对象不具有length属性或length属性不能被转成一个数值，
//则不会进行替换，也不会为其添加length属性。
var o = {0:"a", 1:"b", 2:"c"};
var o2 = Array.prototype.reverse.call(o);
console.log(o); // {0:"a", 1:"b", 2:"c"}
console.log(o === o2); // true

sort(compareFunction)

  作用：对数组的元素进行排序，并返回该数组。(默认排序顺序是根据字符串Unicode码点)
  参数：compareFunction -> 可选参数,用来指定按某种顺序进行排序的函数
   compareFunction中，a和b是两个将要比较的元素:

• 若 compareFunction(a, b) < 0，那么a 将排到 b 前面
• 若 compareFunction(a, b) = 0，那么a 和 b 相对位置不变
• 若 compareFunction(a, b) > 0，那么a , b 将调换位置

  如果数组元素为数字，则排序函数如下所示：

//升序
function compare(a, b){
  return a-b;
}

//降序
function compare(a, b){
  return b-a;
}

  如果数组元素为非ASCLL字符的字符串(如包含类似 e、é、è、a、ä 或中文字符等非英文字符的字符串)，则需要使用String.localeCompare，则排序函数如下所示：

var array = ['互','联','网','改','变','世','界']; 
var newArray= array.sort(function (a, b) {
  return a.localeCompare(b);
});
console.log(newArray); // 按拼音先后排序：["变", "改", "互", "界", "联", "世", "网"]

  使用映射改善排序。compareFunction可能需要对元素做多次映射以实现排序，当compareFunction较为复杂且元素较多的时候，可能会导致很高的负载。使用map辅助排序将会是一个好主意。基本思想是首先将数组中的每个元素比较的实际值取出来，排序后再将数组恢复。

// 需要被排序的数组
var array = ["Tom","Lucky","John","Jeny","Tom"];
// 对需要排序的值和位置的临时存储
var mapArray = array.map(function(el, i) {
  return { index: i, value: el.toLowerCase() };
})
// 按照多个值排序数组
mapArray.sort(function(a, b) {
  return +(a.value > b.value) || +(a.value === b.value) - 1;
});
// 根据索引得到排序的结果
var result = mapArray.map(function(item){
  return array[item.index];
});
console.log(result); // ["Jeny", "John", "Lucky", "Tom", "Tom"]  

copyWithin(targetIndex,startIndex,endIndex)

  作用：用于数组内元素之间的替换，替换元素和被替换元素都是数组内的元素。
  参数:  targetIndex -> 指定被替换元素的索引
            startIndex -> 指定替换元素的起始索引
            endIndex -> 指定替换元素的结束位置的索引

var array = [1,3,5,4,3,6,8,9]; 
var array2 = array.copyWithin(0,3);
console.log(array===array2,array2); // true [4, 3, 6, 8, 9, 6, 8, 9]

var array = [1,3,5,4,3,6,8,9]; 
console.log(array.copyWithin(0,3,4)); // [4, 3, 5, 4, 3, 6, 8, 9]

var array = [1,3,5,4,3,6,8,9]; 
console.log(array.copyWithin(0,-2,-1)); // [8, 3, 5, 4, 3, 6, 8, 9]

fill(value,startIndex,endIndex)

  作用：用于数组元素替换，指定某个值替换数组指定区间内的元素。
  参数：value -> 指定被替换的值
             startIndex -> 起始索引
             endIndex -> 终止索引
  fill和copyWithin功能类似，不同的是fill替换元素是任意的元素，而copyWithin规定的是数组内的元素。

var array = [1,2,3,4,5];
var array2 = array.fill(10,0,3);
console.log(array===array2,array2); // true [10, 10, 10, 4, 5]

Array.prototype 的所有方法均具有鸭式辨型这种神奇的特性，不止可以用来处理数组对象，还可以处理类数组对象，使用call或apply实现。

（以上方法有些省略了例子，参考pop、push、reverse方法的处理进行分析）