上海网站制作衫,腾讯云网站建设的步骤过程,流量多网站,建设监理杂志网站前面的话数组总共有22种方法#xff0c;本文将其分为对象继承方法、数组转换方法、栈和队列方法、数组排序方法、数组拼接方法、创建子数组方法、数组删改方法、数组位置方法、数组归并方法和数组迭代方法共10类来进行详细介绍对象继承方法数组是一种特殊的对象#xff0c;继…前面的话数组总共有22种方法本文将其分为对象继承方法、数组转换方法、栈和队列方法、数组排序方法、数组拼接方法、创建子数组方法、数组删改方法、数组位置方法、数组归并方法和数组迭代方法共10类来进行详细介绍对象继承方法数组是一种特殊的对象继承了对象Object的toString()、toLocaleString()和valueOf()方法【toString()】toString()方法返回由数组中每个值的字符串形式拼接而成的一个以逗号分隔的字符串[注意]该方法的返回值与不使用任何参数调用join()方法返回的字符串相同[1,2,3].toString();//1,2,3
[a,b,c].toString();//a,b,c
[1,[2,c]].toString();//1,2,c由于alert()要接收字符串参数它会在后台调用toString()方法会得到与toString()方法相同的结果alert([1,2,3]);//1,2,3
【toLocaleString()】toLocaleString()是toString()方法的本地化版本它经常也会返回与toString()方法相同的值但也不总是如此。因为它调用元素的是toLocaleString()方法将每个数组元素转化为字符串var person1 {toLocaleString: function(){return Nikolaos;},toString: function(){return Nicholas;}
};
var person2 {toLocaleString: function(){return Grigorios;},toString: function(){return Greg;}
};
var people [person1,person2];
console.log(people.toString());//Nicholas,Greg
console.log(people.toLocaleString());//Nikolaos,Grigorios如果数组中的某一项的值是null或者undefined则该值在toLocaleString()和toString()方法返回的结果中以空字符串表示var colors [1,undefined,2,null,3];
console.log(colors.toString());//1,,2,,3
console.log(colors.toLocaleString());//1,,2,,3
【valueOf()】valueOf()方法返回数组对象本身var a [1, 2, 3];
console.log(a.valueOf());// [1, 2, 3]
console.log(a.valueOf() instanceof Array);//true数组转换方法
【join()】Array.join()方法是String.split()方法的逆向操作后者是将字符串分割成若干块来创建一个数组数组继承的toLocaleString()和toString()方法在默认情况下都会以逗号分隔的字符形式返回数组项而join()方法可以使用不同的分隔符来构建这个字符串join()方法只接收一个参数用作分隔符的字符串然后返回包含所有数组项的字符串如果不给join()方法传入任何值则使用逗号作为分隔符var a [1,2,3];
console.log(a.join());//1,2,3
console.log(a.join( ));//1 2 3
console.log(a.join());//123var b new Array(10);
b.join(-);//---------9个连字符组成的字符串若join()方法的参数是undefined标准浏览器以逗号为分隔符返回字符串而IE7-浏览器以undefined为分隔符返回字符串//标准浏览器为1,2,3;IE7-浏览器为1undefined2undefined3
var a [1,2,3];
console.log(a.join(undefined));如果数组中的某一项的值是null或者undefined则该值在join()方法返回的结果中以空字符串表示var colors [1,undefined,2,null,3];
console.log(colors.join());//1,,2,,3该方法也可以用于类数组对象上console.log(Array.prototype.join.call(hello, -));// h-e-l-l-o
var obj { 0: a, 1: b, length: 2 };
console.log(Array.prototype.join.call(obj, -));// a-b[注意]若对象没有length属性就不是类数组也就不能调用数组的方法var obj { 0: a, 1: b };
console.log(typeof Array.prototype.join.call(obj, -));//栈和队列方法push()和pop()方法允许将数组当作栈来使用。unshift()和shift()方法的行为非常类似于push()和pop()不一样的是前者是在数组的头部而非尾部进行元素的插入和删除操作栈是一种LIFO(Last-First-Out后进先出)的数据结构也就是最新添加的项最早被移除。而栈中项的插入(叫做推入)和移除(叫做弹出)只发生在一个位置——栈的顶部。javascript为数组专门提供了push()和pop()方法以便实现类似栈的行为队列数据结构的访问规则是FIFO(first-in-first-out先进先出)。队列在列表的末端添加项从列表的前端移除项。结合使用shift()和push()方法可以像使用队列一样使用数组【push()】push()方法可以接收任意数量的参数把它们逐个添加到数组末尾并返回修改后数组的长度。所以该数组会改变原数组var a [];
console.log(a,a.push(1));//[1] 1
console.log(a,a.push(a));//[1,a] 2
console.log(a,a.push(true, {}));//[1,a,true,{}] 4
console.log(a,a.push([5,6]));//[1,a,true,{},[5,6]] 5如果需要合并两个数组可以使用apply方法var a [1, 2, 3];
var b [4, 5, 6];
console.log(a,Array.prototype.push.apply(a, b));//[1,2,3,4,5,6] 6[注意]如果使用call方法则会把数组b整体看成一个参数var a [1, 2, 3];
var b [4, 5, 6];
console.log(a,Array.prototype.push.call(a, b));//[1,2,3,[4,5,6]] 4push()方法也可以向对象中添加元素添加后的对象变成类数组对象即新加入元素的键对应数组的索引并且对象有一个length属性var obj {a: 1};
console.log(obj,[].push.call(obj, 2));// {a:1, 0:2, length: 1}
console.log(obj,[].push.call(obj, [3]));// {a:1, 0:2, 1:[3], length: 2}
【pop()】pop()方法从数组末尾移除最后一项减少数组的length值然后返回移除的项。所以该数组会改变原数组var a [a, b, c];
console.log(a,a.pop()); // [a, b] c对空数组使用pop()方法不会报错而是返回undefinedvar a [];
console.log(a,a.pop()); // [] undefined
【shift()】shift()方法移除数组中的第一个项并返回该项同时数组的长度减1。所以该数组会改变原数组var a [a, b, c];
console.log(a,a.shift());//[b, c] a对空数组使用shift()方法不会报错而是返回undefinedvar a [];
console.log(a,a.shift());// [] undefined
【unshift()】unshift()方法在数组前端添加任意个项并返回新数组长度。所以该数组会改变原数组var a [a, b, c];
console.log(a,a.unshift(x)); //[x, a, b, c] 4当使用多个参数调用unshift()时参数是一次性插入的而非一次一个地插入。这意味着最终的数组中插入的元素的顺序和它们在参数列表中的顺序一致var a [a, b, c];
console.log(a,a.unshift(x,y,z)); //[x,y,z,a, b, c] 6[注意]在IE7-浏览器中unshift()方法返回的总是undefined//标准浏览器下返回[1] 1而IE7-浏览器下返回[1] undefined
var a [];
console.log(a,a.unshift(1));数组排序方法数组中存在两个可以直接用来重排序的方法: reverse()和sort() 【reverse()】reverse()方法用于反转数组的顺序返回经过排序之后的数组而原数组顺序也发生改变var array [1,2,4,3,5];
console.log(array,array.reverse());//[5,3,4,2,1] [5,3,4,2,1]
var array [str,true,3];
console.log(array,array.reverse());//[3,true,str] [3,true,str]
【sort()】默认情况下sort()方法按字符串升序排列数组项sort方法会调用每个数组项的toString()方法然后比较得到的字符串排序返回经过排序之后的数组而原数组顺序也发生改变var array [1,2,4,3,5];
console.log(array,array.sort());//[1,2,3,4,5] [1,2,3,4,5]
var array [3str,3,2,2];
console.log(array,array.sort());//[2, 2, 3, 3str] [2, 2, 3, 3str]
var array [1,5,10,50];
console.log(array,array.sort());//[1, 10, 5, 50] [1, 10, 5, 50]如果数组包含undefined元素它们会被排到数组的尾部var array [3,3,undefined,2,2];
console.log(array,array.sort());//[2, 2, 3, 3, undefined] [2, 2, 3, 3, undefined]sort()方法可以接受一个比较函数作为参数以便指定哪个值在哪个值的前面。比较函数接收两个参数如果第一个参数应该位于第二个参数之前则返回一个负数如果两个参数相等则返回0如果第一个参数应该位于第二个参数之后则返回一个正数function compare(value1,value2){if(value1 value2){return -1;}else if(value1 value2){return 1;}else{return 0;}
}
var array [5px,50,1,10];
//当数字与字符串比较大小时字符串5px会被转换成NaN这样结果就是false
console.log(array.sort(compare));//[5px,1, 10, 50]对于数值类型或valueOf()方法会返回数值类型的对象类型比较函数可以简化function compare(value1,value2){return value1 - value2;
}
var array [5px,50,1,10];
console.log(array.sort(compare));//[5px,1,10,50]
var array [5,50,1,10];
console.log(array.sort(compare));//[1,5,10,50]如果对一个字符串数组执行不区分大小写的字母表排序比较函数首先将参数转化为小写字符串再开始比较a [ant,Bug,cat,Dog];
a.sort();//[Bug,Dog,ant,cat];
a.sort(function(s,t){var a s.toLowerCase();var b t.toLowerCase();if(a b)return -1;if(a b)return 1;return 0;
});//[ant,bug,cat,dog]【tips】使用sort()方法创建一个随机数组function compare(){return Math.random() - 0.5;
}
var array [1,2,3,4,5];
console.log(array.sort(compare));//[2,1,5,4,3]数组拼接方法
【concat()】concat()方法基于当前数组中的所有项创建一个新数组先创建当前数组一个副本然后将接收到的参数添加到这个副本的末尾最后返回新构建的数组。所以concat()不影响原数组如果不给concat()方法传递参数时它只是复制当前的数组如果参数是一个或多个数组则该方法会将这些数组中的每一项都添加到结果数组中如果传递的值不是数组这些值就会被简单地添加到结果数组的末尾var numbers [1,2];
console.log(numbers,numbers.concat(3,4));//[1,2] [1,2,3,4]
console.log(numbers,numbers.concat([5,4,3],[3,4,5],1,2));//[1,2] [1,2,5,4,3,3,4,5,1,2]
console.log(numbers,numbers.concat(4,[5,[6,7]]));//[1,2] [1,2,4,5,[6,7]]如果不提供参数concat()方法返回当前数组的一个浅拷贝。所谓“浅拷贝”指的是如果数组成员包括复合类型的值比如对象则新数组拷贝的是该值的引用//该方法实际只复制了数组的第一维数组第一维存放的是第二维的引用而第二维才是实际存放他们的内容
var numbers [1,2];
var newNumbers numbers.concat();
console.log(numbers,newNumbers);//[1,2] [1,2]
numbers[0] 0;
console.log(numbers,newNumbers);//[0,2] [1,2]var numbers [[1,2]];
var newNumbers numbers.concat();
console.log(numbers,newNumbers);//[[1,2]] [[1,2]]
numbers[0][0] 0;
console.log(numbers,newNumbers);//[[0,2]] [[0,2]]concat()方法也可以用于将对象合并为数组但是必须借助call()方法var newArray Array.prototype.concat.call({ a: 1 }, { b: 2 })
console.log(newArray);// [{ a: 1 }, { b: 2 }]
console.log(newArray[0].a);//1创建子数组方法【slice()】slice()方法基于当前数组中的一个或多个项创建一个新数组接受一个或两个参数即要返回项的起始和结束位置最后返回新数组所以slice()不影响原数组slice(start,end)方法需要两个参数start和end返回这个数组中从start位置到(但不包含)end位置的一个子数组如果end为undefined或不存在则返回从start位置到数组结尾的所有项如果start是负数则start max(length start,0)如果end是负数则end max(length end,0)start和end无法交换位置如果没有参数则返回原数组var numbers [1,2,3,4,5];
console.log(numbers.slice(2));//[3,4,5]
console.log(numbers.slice(2,undefined));//[3,4,5]
console.log(numbers.slice(2,3));//[3]
console.log(numbers.slice(2,1));//[]console.log(numbers.slice(-3));//-352 - [3,4,5]
console.log(numbers.slice(-8));//max(5 -8,0)0 - [1,2,3,4,5]console.log(numbers.slice(0,-3));//-352 - [1,2]
console.log(numbers.slice(-2,-1));//-253;-154; - [4]如果不提供参数slice()方法返回当前数组的一个浅拷贝//该方法实际只复制了数组的第一维数组第一维存放的是第二维的引用而第二维才是实际存放他们的内容
var numbers [1,2];
var newNumbers numbers.slice();
console.log(numbers,newNumbers);//[1,2] [1,2]
numbers[0] 0;
console.log(numbers,newNumbers);//[0,2] [1,2]var numbers [[1,2]];
var newNumbers numbers.slice();
console.log(numbers,newNumbers);//[[1,2]] [[1,2]]
numbers[0][0] 0;
console.log(numbers,newNumbers);//[[0,2]] [[0,2]]slice()方法涉及到Number()转型函数的隐式类型转换当start被转换为NaN时相当于start 0当end被转换为NaN时(end为undefined除外)则输出空数组var numbers [1,2,3,4,5];
console.log(numbers.slice(NaN));//[1,2,3,4,5]
console.log(numbers.slice(0,NaN));//[]
console.log(numbers.slice(true,[3]));//[2,3]
console.log(numbers.slice(null,undefined));//[1,2,3,4,5]
console.log(numbers.slice({}));//[1,2,3,4,5]
console.log(numbers.slice(2,[5]));//[3,4,5]可以使用slice()方法将类数组对象变成真正的数组var arr Array.prototype.slice.call(arrayLike);Array.prototype.slice.call({ 0: a, 1: b, length: 2 })// [a, b]
Array.prototype.slice.call(document.querySelectorAll(div));
Array.prototype.slice.call(arguments);数组删改方法
【splice()】splice()和slice()拥有非常相似的名字但它们的功能却有本质的区别。splice()方法用于删除原数组的一部分成员并可以在被删除的位置添加入新的数组成员该方法会改变原数组splice()返回一个由删除元素组成的数组或者如果没有删除元素就返回一个空数组splice()的第一个参数start指定了插入或删除的起始位置。如果start是负数则start max(length start,0)如果start是NaN则相当于start 0如果只提供一个元素相当于将原数组在指定位置拆分成两个数组var a [1,2,3,4,5,6,7,8];
console.log(a,a.splice());// [1,2,3,4,5,6,7,8] []
var a [1,2,3,4,5,6,7,8];
console.log(a,a.splice(4));// [1,2,3,4] [5,6,7,8]
var a [1,2,3,4,5,6,7,8];
console.log(a,a.splice(-4));//-484; [1,2,3,4] [5,6,7,8]
var a [1,2,3,4,5,6,7,8];
console.log(a,a.splice(-9));//max(-98,0)0 [] [1,2,3,4,5,6,7,8]
var a [1,2,3,4,5,6,7,8];
console.log(a,a.splice(NaN));//[] [1,2,3,4,5,6,7,8]第二个参数number指定了应该从数组中删除的元素的个数。如果省略第二个参数从起始点开始到数组结尾的所有元素都将被删除。如果number是负数或NaN或undefined则number0因此不删除元素var a [1,2,3,4,5,6,7,8];
console.log(a,a.splice(0,2));// [3,4,5,6,7,8] [1,2]
var a [1,2,3,4,5,6,7,8];
console.log(a,a.splice(10,2));// [1,2,3,4,5,6,7,8] []
var a [1,2,3,4,5,6,7,8];
console.log(a,a.splice(1,100));// [1] [2,3,4,5,6,7,8]
var a [1,2,3,4,5,6,7,8];
console.log(a,a.splice(1,-5));//[1,2,3,4,5,6,7,8] []
var a [1,2,3,4,5,6,7,8];
console.log(a,a.splice(1,NaN));//[1,2,3,4,5,6,7,8] []
var a [1,2,3,4,5,6,7,8];
console.log(a,a.splice(1,undefined));//[1,2,3,4,5,6,7,8] []如果后面还有更多的参数则表示这些就是要被插入数组的新元素var a [1,2,3,4,5];
console.log(a,a.splice(2,0,a,b));//[1,2,a,b,3,4,5] []
console.log(a,a.splice(2,2,[1,2],3));//[1,2,[1,2],3,3,4,5] [a,b]数组位置方法ES5为数组实例添加了两个位置方法indexOf()、lastIndexOf()【indexOf()】indexOf(search,start)方法接收search和start两个参数返回search首次出现的位置如果没有找到则返回-1search参数表示要搜索的项使用严格相等运算符进行比较var arr [1,2,3,1,2,3];
console.log(arr.indexOf(2));//4
console.log(arr.indexOf(3));//2
console.log(arr.indexOf(0));//-1start参数表示该搜索的开始位置该方法会隐式调用Number()转型函数将start非数字值(undefined除外)转换为数字。若忽略该参数或该参数为undefined或NaN时start 0var arr [a,b,c,d,e,a,b];
console.log(arr.indexOf(a,undefined));//0
console.log(arr.indexOf(a,NaN));//0
console.log(arr.indexOf(a,1));//5
console.log(arr.indexOf(a,true));//5
console.log(arr.indexOf(a,-1));//max(0,-17)6; -1
console.log(arr.indexOf(a,-5));//max(0,-57)2; 5
console.log(arr.indexOf(a,-50));//max(0,-507)0; 0var person {name: Nicholas};
var people [{name: Nicholas}];
var morePeople [person];
alert(people.indexOf(person));//-1,因为person和people[0]虽然值相同但是是两个引用
alert(morePeople.indexOf(person));//0因为person和morepeople[0]是同一个引用
alert(morePeople.indexOf({name: Nicholas}));//-1,因为不是同一个引用indexOf()方法兼容写法if (typeof Array.prototype.indexOf ! function) {Array.prototype.indexOf function (searchElement, fromIndex) {var index -1;fromIndex fromIndex * 1 || 0;for (var k 0, length this.length; k length; k) {if (k fromIndex this[k] searchElement) {index k;break;}}return index;};
}【lastIndexOf()】与indexOf()不同lastIndexOf()从右向左查找lastIndexOf(search,start)方法接收search和start两个参数返回search第一次出现的位置如果没有找到则返回-1search参数表示要搜索的项使用严格相等运算符进行比较var arr [1,2,3,1,2,3];
console.log(arr.lastIndexOf(2));//4
console.log(arr.lastIndexOf(3));//2
console.log(arr.lastIndexOf(0));//-1start表示该搜索的开始位置该方法会隐式调用Number()转型函数将start非数字值(undefined除外)转换为数。若忽略该参数或该参数为undefined或NaN时start 0与字符串的lastIndexOf()方法不同当search方法为负数时search max(0,lengthsearch)var arr [a,b,c,d,e,a,b];
console.log(arr.lastIndexOf(b));//6
console.log(arr.lastIndexOf(b,undefined));//-1
console.log(arr.lastIndexOf(a,undefined));//0
console.log(arr.lastIndexOf(b,NaN));//-1
console.log(arr.lastIndexOf(b,1));//1
console.log(arr.lastIndexOf(b,-1));//max(0,-17)6; 6
console.log(arr.lastIndexOf(b,-5));//max(0,-57)2; 1
console.log(arr.lastIndexOf(b,-50));//max(0,-507)0; -1【tips】返回满足条件的项的所有索引值可以通过循环调用indexOf()或lastIndexOf()来找到所有匹配的项function allIndexOf(array,value){var result [];var pos array.indexOf(value);if(pos -1){return -1;}while(pos -1){result.push(pos);pos array.indexOf(value,pos1);}return result;
}
var array [1,2,3,3,2,1];
console.log(allIndexOf(array,1));//[0,5] lastIndexOf()方法兼容写法 if (typeof Array.prototype.lastIndexOf ! function) {Array.prototype.lastIndexOf function (searchElement, fromIndex) {var index -1, length this.length;fromIndex fromIndex * 1 || length - 1;for (var k length - 1; k -1; k-1) {if (k fromIndex this[k] searchElement) {index k;break;}}return index;};
}数组归并方法数组归并方法包括reduce()和reduceRight()方法两种它们使用指定的函数将数组元素进行组合生成单个值。这在函数式编程中是常见的操作也可以称为“注入”和“折叠”【reduce()】reduce()方法需要两个参数。第一个是执行化简操作的函数。化简函数的任务就是用某种方法把两个值组合或化简为一个值并返回化简后的值化简函数接受四个参数分别是【1】初始变量默认为数组的第一个元素值。函数第一次执行后的返回值作为函数第二次执行的初始变量依次类推【2】当前变量如果指定了第二个参数则该变量为数组的第一个元素的值否则为第二个元素的值【3】当前变量对应的元素在数组中的索引(从0开始)【4】原数组对象化简函数的这四个参数之中只有前两个是必须的后两个则是可选的values.reduce(function(prev, cur, index, array){//todo
});reduce()方法第二个(可选)的参数是一个传递给函数的初始值var a [1,2,3,4,5];
var sum a.reduce(function(x,y){return xy},0);//数组求和
var product a.reduce(function(x,y){return x*y},1);//数组求积
var max a.reduce(function(x,y){return (xy)?x:y;});//求最大值[1, 2, 3, 4, 5].reduce(function(prev, cur){console.log(prev, cur)return prev cur;
});
// 1 2
// 3 3
// 6 4
// 10 5
//最后结果15[1, 2, 3, 4, 5].reduce(function(prev, cur){console.log(prev, cur);return prev cur;
},0);
// 0 1
// 1 2
// 3 3
// 6 4
// 10 5
//最后结果15[注意]reduce()方法的返回结果类型和传入的初始值相同[1, 2, 3, 4, 5].reduce(function(prev, cur){console.log(prev.sum, cur);prev.sum prev.sum cur;return prev;
},{sum:0});
//0 1
//1 2
//3 3
//6 4
//10 5
//Object {sum: 15}利用reduce()方法可以写一个数组求和的sum方法Array.prototype.sum function (){return this.reduce(function (prev, cur){return prev cur;})
};
[3,4,5,6,10].sum();// 28由于reduce方法依次处理每个元素所以实际上还可以用它来搜索某个元素。比如找出长度最长的数组元素function findLongest(entries) {return entries.reduce(function (prev, cur) {return cur.length prev.length ? cur : prev;}, );
}
console.log(findLongest([1,2,3,ab,4,bcd,5,6785,4]));//bcd可以利用reduce()方法实现二维数组的扁平化var matrix [[1, 2],[3, 4],[5, 6]
];
// 二维数组扁平化
var flatten matrix.reduce(function (prev, cur) {return prev.concat(cur);
});
console.log(flatten); // [1, 2, 3, 4, 5, 6]在空数组上不带初始值参数调用reduce()将导致类型错误异常。如果调用它的时候只有一个值——数组只有一个元素并且没有指定初始值或者有一个空数组并且指定一个初始值——reduce()只是简单地返回那个值而不会调用化简函数var arr [];
arr.reduce(function(){});//Uncaught TypeError: Reduce of empty array with no initial valuevar arr [];
arr.reduce(function(){},1);//1reduce()方法兼容写法if (typeof Array.prototype.reduce ! function) {Array.prototype.reduce function (callback, initialValue ) {var previous initialValue, k 0, length this.length;if (typeof initialValue undefined) {previous this[0];k 1;}if (typeof callback function) {for (k; k length; k) {this.hasOwnProperty(k) (previous callback(previous, this[k], k, this));}}return previous;};
}【reduceRight()】reduceRight()的工作原理和reduce()一样不同的是它按照数组索引从高到低从右到左处理数组而不是从低到高var values [1,2,3,4,5];
var sum values.reduceRight(function(prev, cur, index, array){console.log(prev,cur);return prev cur;
});
console.log(sum);
//5 4
//9 3
//12 2
//14 1
//15reduceRight()方法兼容写法if (typeof Array.prototype.reduceRight ! function) {Array.prototype.reduceRight function (callback, initialValue ) {var length this.length, k length - 1, previous initialValue;if (typeof initialValue undefined) {previous this[length - 1];k--;}if (typeof callback function) {for (k; k -1; k-1) { this.hasOwnProperty(k) (previous callback(previous, this[k], k, this));}}return previous;};
}数组迭代方法ECMAScript5为数组定义了5个迭代方法。每个方法都接收两个参数要在每一项上运行的函数和可选的运行该函数的作用域对象——影响this的值。传入这些方法中的函数会接收三个参数数组项的值、该项在数组中的位置和数组对象本身。根据使用的方法不同这个函数执行后的返回值可能会也可能不会影响访问的返回值function(item,index,array){//todo
}
【map()】map()方法对数组的每一项运行给定函数返回每次函数调用的结果组成的数组//f是array的每一个元素调用的函数。它的返回值成为返回数组的元素o是f调用时的可选this值
array.map(f,o);
[1,2,3].map(function(item,index,arr){return item*item});//[1,4,9]
[1,2,3].map(function(item,index,arr){return item*index});//[0,2,6]map()方法还可以接受第二个参数表示回调函数执行时this所指向的对象var arr [a,b,c];
[1,2].map(function(item,index,arr){return this[item]},arr);//[b,c]在实际使用的时候可以利用map()方法方便获得对象数组中的特定属性值var users [{name:t1,email:t1qq.com},{name:t2,email:t2qq.com},{name:t3,email:t3qq.com}];
console.log(users.map(function(item,index,arr){return item.email}));//[t1qq.com, t2qq.com, t3qq.com]map()方法还可以用于类数组对象Array.prototype.map.call(abc,function(item,index,arr){return item.toUpperCase()});//[A, B, C]对于稀疏数组map()方法不会在实际上不存在元素的序号上调用函数var a [1,,3];
console.log(a.map(function(item,index,arr){return item*2;}));//[2, 2: 6]map()方法兼容写法if (typeof Array.prototype.map ! function) {Array.prototype.map function (fn, context) {var arr [];if (typeof fn function) {for (var k 0, length this.length; k length; k) { arr.push(fn.call(context, this[k], k, this));}}return arr;};
}【forEach()】forEach()方法对数组中的每一项运行给定函数这个方法没有返回值。本质上与for循环迭代数组一样。如果需要有返回值一般使用map方法[1,2,3,4].forEach(function(item,index,arr){console.log(item)
});
//1
//2
//3
//4类似于如下的for循环var array [1, 2, 3, 4];
for (var k 0, length array.length; k length; k) {console.log(array[k]);
}使用forEach()方法实现简单的加法var sum 0;
[1, 2, 3, 4].forEach(function (item, index, array) {sum item;
});
console.log(sum);//10forEach()方法除了接受一个必须的回调函数参数第二个参数还可以接受一个可选的上下文参数(改变回调函数里面的this指向)var out [];
[1, 2, 3].forEach(function(elem){this.push(elem * elem);
}, out);
console.log(out);// [1, 4, 9]第二个参数对于多层this非常有用因为多层this通常指向是不一致的可以使用forEach()方法的第二个参数固定thisvar obj {name: 张三,times: [1, 2, 3],print: function () {//该this指向objconsole.log(this);this.times.forEach(function (n) {//该this指向windowconsole.log(this);});}
};
obj.print();var obj {name: 张三,times: [1, 2, 3],print: function () {//该this指向objconsole.log(this);this.times.forEach(function (n) {//该this同样指向objconsole.log(this);},this);}
};
obj.print();forEach()循环可以用于类数组对象var str abc;
Array.prototype.forEach.call(str, function(item, index, array) {console.log( item : index);
});
//a:0
//b:1
//c:2与for循环不同对于稀疏数组forEach()方法不会在实际上不存在元素的序号上调用函数var a [1,2,3];
delete a[1];
for(var i 0; i a.length; i){console.log(a[i]);
}
//1
//undefined
//3a.forEach(function(item,index,arr){console.log(item)});
//1
//3forEach()方法无法在所有元素都传递给调用的函数之前终止遍历。也就是说没有像for循环中使用的相应的break语句。如果要提前终止必须把forEach()方法放在一个try块中并能抛出一个异常for(var i 0; i 5; i){if(i 2) break;
}
console.log(i);//2
var a [1,2,3,4,5];
console.log(a.forEach(function(item,index,arr){if(index 2) break;//Uncaught SyntaxError: Illegal break statement
}));var a [1,2,3,4,5];
a.forEach(function(item,index,arr){try{if(item 2) throw new Error; }catch(e){console.log(item);}
});forEach()方法兼容写法if(typeof Array.prototype.forEach ! function){Array.prototype.forEach function(fn,context){for(var k 0,length this.length; k length; k){if(typeof fn function Object.prototype.hasOwnProperty.call(this,k)){fn.call(context,this[k],k,this);}}}
}【filter()】filter()方法对数组中的每一项运行给定函数返回该函数会返回true的项组成的数组。该方法常用于查询符合条件的所有数组项[1, 2, 3, 4, 5].filter(function (elem) {return (elem 3);
});// [4, 5] [0, 1, a, false].filter(Boolean);// [1, a][1, 2, 3, 4, 5].filter(function (elem, index, arr) {return index % 2 0;
});// [1, 3, 5]filter()方法还可以接受第二个参数指定测试函数所在的上下文对象(this对象)var Obj function () {this.MAX 3;
};
var myFilter function (item) {if (item this.MAX) {return true;}
};
var arr [2, 8, 3, 4, 1, 3, 2, 9];
arr.filter(myFilter, new Obj());// [8, 4, 9]filter()会跳过稀疏数组中缺少的元素它的返回数组总是稠密的所以可以压缩稀疏数组的空缺var a [1,2,,,,3,,,,4];
console.log(a.length);//10
var dense a.filter(function(){return true;})
console.log(dense,dense.length);//[1,2,3,4] 4如果要压缩空缺并删除undefined和null元素可以这样使用filter()方法var a [1,2,,undefined,,3,,null,,4];
console.log(a.length);//10
var dense a.filter(function(item){return item! undefined;})
console.log(dense,dense.length);//[1,2,3,4] 4filter()方法兼容写法if (typeof Array.prototype.filter ! function) {Array.prototype.filter function (fn, context) {var arr [];if (typeof fn function) {for (var k 0, length this.length; k length; k) {fn.call(context, this[k], k, this) arr.push(this[k]);}}return arr;};
}【some()】some()方法对数组中的每一项运行给定函数如果该函数对任一项返回true则返回true。并且当且仅当数值中的所有元素调用判定函数都返回false它才返回falsea [1,2,3,4,5];
a.some(function(elem, index, arr){return elem%20;})//true
a.some(isNaN);//false在空数组上调用some()方法会返回false[].some(function(){});//falsesome()方法兼容写法if (typeof Array.prototype.some ! function) {Array.prototype.some function (fn, context) {var passed false;if (typeof fn function) {for (var k 0, length this.length; k length; k) {if (passed true) break;passed !!fn.call(context, this[k], k, this);}}return passed;};
}【every()】every()方法对数组中的每一项运行给定函数如果该函数对每一项都返回true则返回true只要有一项返回false则返回falsea [1,2,3,4,5];
a.every(function(elem, index, arr){elem 10;})//true
a.every(function(elem, index, arr){return elem%2 0;});//false在空数组上调用every()方法会返回true[].every(function(){});//trueevery()方法兼容写法if (typeof Array.prototype.every ! function) {Array.prototype.every function (fn, context) {var passed true;if (typeof fn function) {for (var k 0, length this.length; k length; k) {if (passed false) break;passed !!fn.call(context, this[k], k, this);}}return passed;};
}总结javascript数组方法特意定义为通用的因此它们不仅应用在真正的数组而且在类数组对象上都能正确工作。这22种方法中除了toString()和toLocaleString()以外的所有方法都是通用的可以改变原数组的方法总共有7种包括unshift()、shift()、push()、pop()这4种栈和队列方法reverse()和sort()这2种数组排列方法数组删改方法splice()转载于:https://www.cnblogs.com/xuyuanjia/p/5743560.html
