简介
数组操作无论是在JavaScript中还是在其他语言中都是很常见、经常会用到的，现在我把JavaScript 数组基本操作整理一下，供大家参考学习。里边包含我自己的见解以及案例，希望能够帮助大家，使用的是ECMAScript 5。
字符串与数组转换
有时候我们需要把字符串进行转换为数组，则需要split方法，把数组转换为字符串则需要join方法
var star="js,php,java,c++"; star=star.split(","); console.log(star);//["js", "php", "java", "c++"]
split() 方法用于把一个字符串分割成字符串数组，接收两个参数具体使用说明看下图
join() 方法用于把数组中的所有元素放入一个字符串。
元素是通过指定的分隔符进行分隔的。
var star=["js","php","java","c++"]; star=star.join("");//直接转换为字符串不加分隔符号 console.log(star);//jsphpjavac++
ECMAScript 5的内置方法
- push、pop与concat
- shift与unshift
- reverse与sort
- slice与splice
- indexOf与lastIndexOf
- every与filter
- forEach、map与some
- reduce与reduceRight
一、push() 方法可向数组的末尾添加一个或多个元素，并返回新的长度。
var star=["js","php","java","c++"]; var stars=star.push("go");//把参数从追加到最后 console.log(star);//["js", "php", "java", "c++", "go"]
小技巧：使用push实现两个数组合并：
var arry=["js","php"],arry1=["java","c++"]; //[].push.apply(arry,arry1);//用push实现两个数组合并 //arry.push.apply(arry,arry1);//或者这样 Array.prototype.push.apply(arry,arry1);//用push实现两个数组合并 console.log(arry);//["js", "php", "java", "c++"]
原因是：因为apply函数接收两个参数，第一个是当前的this 指向，第二个是[数组参数]。执行apply时候会遍历第二个参数依次复制第二个参数内的值。
pop删除数组元素最后一位元素
var star=["js","php","java","c++"]; var del=star.pop();//把最后一位删除，返回是删除的元素 console.log(del);//c++ console.log(star);//["js", "php", "java"]
//小技巧：或者使用star.length-=1;
在工作中也可以这样用，例：
/** * 例子 * @n {Object} 参数列表 * @callback {Function} 回掉函数 * */ function demo(n,callback){ var arg=[].slice.apply(arguments);//转换为数组 var callfn=arg.pop();//删除最后一个元素callfn接收删除的元素。 callfn();//callback }; demo({a:1},function(){ console.log("callback"); });
concat方法用于连接两个或多个数组。该方法不会改变现有的数组，而仅仅会返回被连接数组的一个副本。
var arry=["js","php"],arry1=["java","c++"]; var arry2=arry.concat(arry1);//实现两个数组或者多个数组合并 console.log(arry);//["js", "php"] console.log(arry1);//["java", "c++"] console.log(arry2);//["js", "php", "java", "c++"]
二、shift() 方法用于把数组的第一个元素从其中删除，并返回第一个元素的值。
var arry=["js","php","java","c++"]; var arry2=arry.shift();//删除数组第一个元素 console.log(arry);//["php", "java", "c++"] console.log(arry2);//js
在工作中用到的时候，例子：
/** * @n {Object} 参数列表 * @callback {Function} 回掉函数 * */ function demo(n,callback){ var arg=[].slice.apply(arguments);//转换为数组 var new_n=arg.shift();//删除第一个元素。 console.log(new_n);//{a:1} } demo({a:1},function(){ console.log("callback"); });
unshift() 方法可向数组的开头添加一个或更多元素，并返回新的长度。例：
var arry=["js","php","java","c++"]; var arry2=arry.unshift("go");//zai第一个元素前插入一个元素,返回数组的长度。 console.log(arry);//原始数组更改 ["go", "js", "php", "java", "c++"] console.log(arry2);//数组长度 5
三、reverse() 方法用于颠倒数组中元素的顺序。注释：该方法会改变原来的数组，而不会创建新的数组。
var arry=["js","php","java","c++"]; var arry2=arry.reverse();//颠倒数组中元素的顺序。 console.log(arry);//在原始数组，颠倒数组 ["c++", "java", "php", "js"] console.log(arry2);//返回颠倒的数组 ["c++", "java", "php", "js"]
比如有时候面试官考察你书写一个颠倒数组的函数，不用reverse。我是这样写的：
Array.prototype.myreverse=function(){ var _length=this.length;//获取数组的长度 //如果长度大于1则进行颠倒顺序 if(_length>1){ //循环一半数据； for(var i=0,tmp;i<Math.floor(_length/2);i++){ //利用第三方变量交换位置 tmp=this[i]; this[i]=this[_length-1-i]; this[_length-1-i]=tmp; } return this; }else{ return this; } }
sort() 方法用于对数组的元素进行排序。
没有参数的时候。
var arry3=["12","3","2","11","6","5","0"]; arry3.sort(); console.log(arry3);//["0", "11", "12", "2", "3", "5", "6"]
var arry3=["12","3","2","11","6","5","0"]; arry3.sort(function(a,b){ if(a*1<b*1){ return -1; }else if(a*1>b*1){ return 1; }else{ return 0; } }); console.log(arry3);//["0", "2", "3", "5", "6", "11", "12"]
数组中存储的是字符串，如果不*1则不会按照数字大写排序。例如下边
var arry3=["12","3","2","11","6","5","0"]; arry3.sort(function(a,b){ if(a<b){ //因为是字符串比较大小按照字符编码的顺序进行排序 return -1; }else if(a>b){ return 1; }else{ return 0; } }); console.log(arry3);//["0", "11", "12", "2", "3", "5", "6"]
四、slice() 方法可从已有的数组中返回选定的元素。
var arry3=["12","3","2","11","6","5","0"]; var arr4=arry3.slice(2,4); console.log(arry3);//["12", "3", "2", "11", "6", "5", "0"] console.log(arr4);//["2", "11"]
如果第一个参数是负数的话需要注意，第二个参数是无效的。
var arry3=["12","3","2","11","6","5","0"]; var arr4=arry3.slice(-4); console.log(arry3);//["12", "3", "2", "11", "6", "5", "0"] console.log(arr4);//["11", "6", "5", "0"]
splice() 方法向/从数组中添加/删除项目，然后返回被删除的项目。
var arry3=["12","3","2","11","6","5","0"]; var arr4=arry3.splice(2,3); console.log(arry3);//["12", "3", "2", "0"] console.log(arr4);//["11", "6", "5"]
删除替换
var arry3=["12","3","2","11","6","5","0"]; var arr4=arry3.splice(2,3,"22","44");//删了三个用两个替换 console.log(arry3);//["12", "3", "2", "0"] console.log(arr4);//["11", "6", "5"]
五、indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。
检查数组或者字符串中是否包含【检索的值】，如果存在返回其索引位置。
lastIndexOf则正好与indexOf相反，它是从数组或者字符串末尾开始检索。
六、every() 方法用于检测数组所有元素是否都符合指定条件（通过函数提供）。
var arry3=[12,34,4,56,23,9]; var s=arry3.every(function(n){ return n>10;//用于检索数组中所有元素都满足大于10时返回true }); console.log(s);
filter函数对数组中的每一项运行给定函数，返回该函数会返回true的项组成的数组。简单理解就是遍历数组中的每一项，如果满足条件则返回该项。例：
var arry3=[12,34,4,56,23,9]; var s=arry3.filter(function(n){ return n>10;//用于检索数组中所有元素有满足大于10时返回该项。 }); console.log(s);//[12, 34, 56, 23]
注：filter方法不会更改原始数组。
七、forEach对 Array 对象的每个元素调用指定函数。 此函数是静态的，可在不创建对象实例的情况下调用。
参数：
method：要对数组中每个元素调用的函数。
var arry3=[12,34,4,56,23,9]; arry3.forEach(function(v,i,t){//v代表值，i索引，t当前this console.log(v); console.log(i); console.log(t); });
曾听前端技术专家说，forEach的效率低，现在我重写了forEach进行对比发现确实低一点儿。
var arry3=[12,34,4,56,23,9]; for(var i=0;i<1000000;i++){ arry3.push(i+100);//当数组的长度达到1000000forEach的效率会低 } var statime=new Date(); Array.prototype.forEachs=function(callback){ var _length=this.length; for(var i=0;i<_length;i++){ callback(this[i],i,this); } } arry3.forEachs(function(v,i,t){//v代表值，i索引，t当前this //console.log(v); //console.log(i); //console.log(t); }); console.log(new Date()-statime,"forEachs---timers");//4 "forEachs---timers" var statime1=new Date(); arry3.forEach(function(v,i,t){//v代表值，i索引，t当前this //console.log(v); //console.log(i); //console.log(t); }); console.log(new Date()-statime1,"forEach---timers");//67 "forEach---timers"
效率低了将近17倍。
map类似于filter，只不过map会更改返回数组。例：
var arry3=[12,34,4,56,23,9]; var arry4=arry3.map(function(v,i,t){//v代表值，i索引，t当前this return v*v; }); console.log(arry3);//[12, 34, 4, 56, 23, 9] console.log(arry4);//[144, 1156, 16, 3136, 529, 81]
some函数与every函数类似，区别在于some对数组的每一项运行给定函数，只要一项满足条件就返回true。而every则是所有项都满足才会返回true；
var arry3=[12,34,4,56,23,9]; var arry4=arry3.some(function(v,i,t){//v代表值，i索引，t当前this return v>50; }); console.log(arry3);//[12, 34, 4, 56, 23, 9] console.log(arry4);//true
八、reduce与reduceRight都是归并数组的方法，都会迭代数组中的每一项，然后构建一个最终返回值。reduce是从第一个开始，reduceRight则是从最后一个开始的。它们同样接收两个参数，第一个是每项调用的函数，第二个是作为归并的基础的初始值。（选填）
var arry3=[1,3,4,6,5,2]; var arry4=arry3.reduce(function(prev,v,i,t){//prev前一个值v代表值，i索引，t当前this return v+prev; }); console.log(arry3);//[1, 3, 4, 6, 5, 2] console.log(arry4);//21
例如：reduceRight
var arry3=[1,3,4,6,5,2]; var arry4=arry3.reduceRight(function(prev,v,i,t){//prev前一个值v代表值，i索引，t当前this return v+prev; },30); console.log(arry3);//[1, 3, 4, 6, 5, 2] console.log(arry4);//51
数组排序、去重
简单数组排序与复合数组排序：代码如下
/** * 功能：数组排序 * 说明： * 1.如果是[1,2,5,4,9,10]这种简单数组，必须arry，可选bigtosmall * 2.如果是复合数组[{a:3},{a:10}] 必须arry，必须bigtosmall，必须key * * @arry {Arry} 数组 * @bigtosmall {Boolean || false} 从大到小排序 * @key {String} 数组中值的键。例：数组是[{a:3},{a:10}]，按照"a"的值进行排序 * * return {olddata:data,newdata:data}返回新数组与原始数组 * */ function lksort(arry,bigtosmall,key){ arry=Object.prototype.toString.call(arry)=="[object Array]"?arry:[];//如果传递的不是数组给定默认值 //console.log(arry); var i=0,//外出循环 _length=arry.length-1,//数组长度 j,//内层循环 temp,//中间变量 olddata=[].concat(arry);//原始数组 //判断是否复合数组 if(arry[i] && Object.prototype.toString.call(arry[i])=="[object Object]"){ if(!key){ throw("请输入键！"); return false; } } for(;i<_length;i++){ for(j=0;j<_length-i;j++){ if(key){ if(arry[j][key]>arry[j+1][key]){ temp=arry[j]; arry[j]=arry[j+1]; arry[j+1]=temp; } }else{ if(arry[j]>arry[j+1]){ temp=arry[j]; arry[j]=arry[j+1]; arry[j+1]=temp; } } } } //如果从大到小排序，则顺序颠倒 if(bigtosmall){ arry.reverse(); }; //返回原始数组，与新数组 return { olddata:olddata, newdata:arry } }
一个循环实现排序，代码如下，效率不是很高。主要学习的是思想。
/** * 数组排序 * @arry {Arry} * * */ function lksort1(arry){ var oldarry=[].concat(arry),//存储原始数组 newarry=[],//新数组 max,//最大值 index;//索引值 while(arry.length){//判断数组的长度 max=Math.max.apply(Math,arry);//检索出来最大数 index=arry.indexOf(max);//检索出最大数的位置 arry.splice(index,1);//删除最大数 newarry.push(max);//把最大数添加到新数组 } return { oldarry:oldarry, newarry:newarry } };
简单数组去重与复合数组去重：代码如下
/** * 功能：数组去重 * 说明： * 1.如果是[1,2,5,4,9,10]这种简单数组，必须arry * 2.如果是[{id:3},{id:10}]这种复合数组，必须arry，必须key * * @arry {Arry} 数组 * @key {String} 数组中值的键。例：数组是[{id:3},{id:10}]，按照"a"的值进行去重 * * return 返回去重的结果 * */ function lkremoval(arry,key){ var newarry=[],//新数组 i=0,//外层循环使用的i length=arry.length,//数组的长度 j,//内层循环的j istrue;//是否存有 if(key){ // for(;i<length;i++){ istrue=0;//每一次循环时候设置为0 //遍历新数组中是否包含本条数据 for(j=0;j<newarry.length;j++){ if(arry[i][key]==newarry[j][key]){ istrue=1;//如果有istrue赋值为1 } }; istrue?"":newarry.push(arry[i]);//如果没有，则push进去 }; }else{ //简单数组去重 for(;i<length;i++){ //如果没有，则push进去 if(!(newarry.indexOf(arry[i])>-1)){ newarry.push(arry[i]); } }; } return newarry; }
总结：
数组的基本操作大致就这么多，希望大家能够学到东西。这些操作我也参考了其他w3school官网与JavaScript高级设计编程与自己的理解。如有错误希望大家指出。