概述
数组原型方法的分类:
一、会改变调用它们的对象自身的值
二、不会改变调用它们的对象自身的值
三、遍历方法
一、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方法的处理进行分析)
最后
以上就是冷傲路灯为你收集整理的Array原型方法整理(一)数组原型方法的分类:的全部内容,希望文章能够帮你解决Array原型方法整理(一)数组原型方法的分类:所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错,欢迎将靠谱客网站推荐给程序员好友。
发表评论 取消回复