js数组操作总结
1.数组的检测
ECMAScript3 if(value instanceof Array){ //执行操作 } 假定单一全局环境,如果网页存在多个框架,多个window,Array具有不同的构造函数
ECMAScript5 if(Array.isArray(value) ){//执行操作} 有兼容性问题
安全检测 function isArray(value){return Object.prototype.toString.call(value)=="[object Array]";}
2.数组的复制(也可以复制对象)
如果数组中的值是基本类型
1 var arr1=["1","2","3"],arr2; 2 arr2=arr1.slice(0); 3 var arr3=["1","2","3"],arr4; 4 arr4=arr3.concat();
如果数组中的值有引用类型
1 function objClone(obj){ 2 if (typeof obj != 'object'|| obj===null) return obj; 3 var newOb = Object.prototype.toString.call(obj)=="[object Array]"? new Array() : new Object(); 4 for(var property in obj){ 5 newOb[property] = arguments.callee(obj[property]); 6 } 7 return newOb; 8 }
3.数组的迭代方法
every() :对数组中的每一项运行给定函数,如果该函数对每一项都返回 true ,则返回 true 。 filter() :对数组中的每一项运行给定函数,返回该函数会返回 true 的项组成的数组。 forEach() :对数组中的每一项运行给定函数。这个方法没有返回值。 map() :对数组中的每一项运行给定函数,返回每次函数调用的结果组成的数组。 some() :对数组中的每一项运行给定函数,如果该函数对任一项返回 true ,则返回 true 。
以上方法都不会修改数组中的包含的值。
4.数组的转换方法
var colors = ["red", "blue", "green"]; // 创建一个包含 3 个字符串的数组 alert(colors.toString()); // red,blue,green alert(colors.valueOf()); // red,blue,green alert(colors); // red,blue,green 由于 alert() 要接收字符串参数,所以它会在后台调用 toString() 方法,由此 会得到与直接调用 toString() 方法相同的结果。 另外, toLocaleString() 方法经常也会返回与 toString() 和 valueOf() 方法相同的值,但也不总是如此。当调用数组的 toLocaleString() 方法时,它也会创建一个数组值的以逗号分隔的字符串。而与前两个方法唯一的不同之处在于,这一次为了取得每一项的值,调用的是每一项的 toLocale-String() 方法,而不是 toString() 方法。 var person1 = { toLocaleString : function () { return "Nikolaos"; }, toString : function() { return "Nicholas"; } }; var person2 = { toLocaleString : function () { return "Grigorios"; }, toString : function() { return "Greg"; } }; var people = [person1, person2]; alert(people); //Nicholas,Greg alert(people.toString()); //Nicholas,Greg alert(people.toLocaleString()); //Nikolaos,Grigorios 数组继承的 toLocaleString() 、 toString() 和 valueOf() 方法,在默认情况下都会以逗号分隔的字符串的形式返回数组项。而如果使用 join() 方法,则可以使用不同的分隔符来构建这个字符串。 join() 方法只接收一个参数,即用作分隔符的字符串,然后返回包含所有数组项的字符串。请看下面的例子: var colors = ["red", "green", "blue"]; alert(colors.join(",")); //red,green,blue alert(colors.join("||")); //red||green||blue
5.数组的栈方法(后进先出)
push() 方法可以接收任意数量的参数,把它们逐个添加到数组末尾,并返回修改后数组的长度。而pop() 方法则从数组末尾移除最后一项,减少数组length 值,然后返回移除的项。请看下面的例子: var colors = new Array(); // 创建一个数组 var count = colors.push("red", "green"); // 推入两项 alert(count); //2 count = colors.push("black"); // 推入另一项 alert(count); //3 var item = colors.pop(); // 取得最后一项 alert(item); //"black" alert(colors.length); //2
5.数组的队列方法(先进先出)
实现这一操作的数组方法就是 shift() ,它能够移除数组中的第一个项并返回该项,同时将数组长度减 1。结合使用 shift() 和 push() 方法,可以像使用队列一样使用数组。 var colors = new Array(); //创建一个数组 var count = colors.push("red", "green"); //推入两项 alert(count); //2 count = colors.push("black"); //推入另一项 alert(count); //3 var item = colors.shift(); // 取得第一项 alert(item); //"red" alert(colors.length); //2 ECMAScript 还为数组提供了一个 unshift() 方法。顾名思义, unshift() 与 shift() 的用途相反:它能在数组前端添加任意个项并返回新数组的长度。因此,同时使用 unshift() 和 pop() 方法,可以从相反的方向来模拟队列,即在数组的前端添加项,从数组末端移除项,如下面的例子所示。 var colors = new Array(); //创建一个数组 var count = colors.unshift("red", "green"); // 推入两项 alert(count); //2 count = colors.unshift("black"); // 推入另一项 alert(count); //3
6.数组的重排序方法
数组中已经存在两个可以直接用来重排序的方法: reverse() 和 sort() var values = [1, 2, 3, 4, 5]; values.reverse(); alert(values); //5,4,3,2,1 sort() 方法会调用每个数组项的 toString() 转型方法,然后比较得到的字符串,以确定如何排序。即使数组中的每一项都是数值, sort() 方法比较的也是字符串 var values = [0, 1, 5, 10, 15]; values.sort(); alert(values); //0,1,10,15,5 function compare(value1, value2) { if (value1 < value2) { return -1; } else if (value1 > value2) { return 1; } else { return 0; } } var values = [0, 1, 5, 10, 15]; values.sort(compare); alert(values); //0,1,5,10,15 对于数值类型或者其 valueOf() 方法会返回数值类型的对象类型,可以使用一个更简单的比较函 数。这个函数只要用第二个值减第一个值即可。 function compare(value1, value2){ return value2 - value1; }
7.数组的操作方法
concat方法不影响原始数组 var colors = ["red", "green", "blue"]; var colors2 = colors.concat("yellow", ["black", "brown"]); alert(colors); //red,green,blue alert(colors2); //red,green,blue,yellow,black,brown slice() 方法可以 接受一或两个参数,即要返回项的起始和结束位置。在只有一个参数的情况下, slice() 方法返回从该 参数指定位置开始到当前数组末尾的所有项。如果有两个参数,该方法返回起始和结束位置之间的项— —但不包括结束位置的项。注意, slice() 方法不会影响原始数组。请看下面的例子。 var colors = ["red", "green", "blue", "yellow", "purple"]; var colors2 = colors.slice(1); var colors3 = colors.slice(1,4); alert(colors2); //green,blue,yellow,purple alert(colors3); //green,blue,yellow splice() 的主要用途是向数组的中部插入项,但使用这种方法的方式则有如下 3 种。 删除、插入、替换,会改变原始数组 var colors = ["red", "green", "blue"]; var removed = colors.splice(0,1); // 删除第一项 alert(colors); // green,blue alert(removed); // red,返回的数组中只包含一项 removed = colors.splice(1, 0, "yellow", "orange"); // 从位置 1 开始插入两项 alert(colors); // green,yellow,orange,blue alert(removed); // 返回的是一个空数组 removed = colors.splice(1, 1, "red", "purple"); // 插入两项,删除一项 alert(colors); // green,red,purple,orange,blue alert(removed); // yellow,返回的数组中只包含一项
8.数组的位置方法
ECMAScript 5 为数组实例添加了两个位置方法: indexOf() 和 lastIndexOf() 。这两个方法都接收 两个参数:要查找的项和(可选的)表示查找起点位置的索引。其中, indexOf() 方法从数组的开头(位 置 0)开始向后查找, lastIndexOf() 方法则从数组的末尾开始向前查找。 这两个方法都返回要查找的项在数组中的位置,或者在没找到的情况下返回1。在比较第一个参数 与数组中的每一项时,会使用全等操作符;也就是说,要求查找的项必须严格相等(就像使用===一样)。 以下是几个例子。 var numbers = [1,2,3,4,5,4,3,2,1]; alert(numbers.indexOf(4)); //3 alert(numbers.lastIndexOf(4)); //5 alert(numbers.indexOf(4, 4)); //5 alert(numbers.lastIndexOf(4, 4)); //3 var person = { name: "Nicholas" }; var people = [{ name: "Nicholas" }]; var morePeople = [person]; alert(people.indexOf(person)); //-1 alert(morePeople.indexOf(person)); //0 ArrayIndexOfExample01.htm 使用 indexOf() 和 lastIndexOf() 方法查找特定项在数组中的位置非常简单,支持它们的浏览器包 括 IE9+、Firefox 2+、Safari 3+、Opera 9.5+和 Chrome。