Javascript操作数组-优快云博客

本文链接：https://blog.youkuaiyun.com/gift5168xf/article/details/4643089

　1 、数组的创建

以下为引用的内容：
var arrayObj = new Array(); 　// 创建一个数组
var arrayObj = new Array([size]); 　// 创建一个数组并指定长度，注意不是上限，是长度
var arrayObj = new Array([element0[, element1[, ...[, elementN]]]]); 　创建一个数组并赋值

要说明的是，虽然第二种方法创建数组指定了长度，但实际上所有情况下数组都是变长的，也就是说即使指定了长度为5 ，仍然可以将元素存储在规定长度以外的，注意：这时长度会随之改变。
2 、数组的元素的访问
var testGetArrValue=arrayObj[1]; // 获取数组的元素值
arrayObj[1]= " 这是新值"; // 给数组元素赋予新的值
3 、数组元素的添加
arrayObj. push([item1 [item2 [. . . [itemN ]]]]);// 将一个或多个新元素添加到数组结尾，并返回数组新长度
arrayObj.unshift([item1 [item2 [. . . [itemN ]]]]);// 将一个或多个新元素添加到数组开始，数组中的元素自动后移，返回数组新长度
arrayObj.splice(insertPos,0,[item1[, item2[, . . . [,itemN]]]]);// 将一个或多个新元素插入到数组的指定位置，插入位置的元素自动后移，返回"" 。
4 、数组元素的删除
arrayObj.pop(); // 移除最后一个元素并返回该元素值
arrayObj.shift(); // 移除最前一个元素并返回该元素值，数组中元素自动前移
arrayObj.splice(deletePos,deleteCount); // 删除从指定位置deletePos 开始的指定数量deleteCount 的元素，数组形式返回所移除的元素
5 、数组的截取和合并
arrayObj.slice(start, [end]); // 以数组的形式返回数组的一部分，注意不包括 end 对应的元素，如果省略 end 将复制 start 之后的所有元素
arrayObj.concat([item1[, item2[, . . . [,itemN]]]]); // 将多个数组（也可以是字符串，或者是数组和字符串的混合）连接为一个数组，返回连接好的新的数组
6 、数组的拷贝
arrayObj.slice(0); // 返回数组的拷贝数组，注意是一个新的数组，不是指向
arrayObj.concat(); // 返回数组的拷贝数组，注意是一个新的数组，不是指向
7 、数组元素的排序
arrayObj.reverse(); // 反转元素（最前的排到最后、最后的排到最前），返回数组地址
arrayObj.sort(); // 对数组元素排序，返回数组地址
8 、数组元素的字符串化
arrayObj.join(separator); // 返回字符串，这个字符串将数组的每一个元素值连接在一起，中间用 separator 隔开。
toLocaleString 、toString 、valueOf ：可以看作是join 的特殊用法，不常用
二、数组对象的3 个属性
1 、length 属性
Length 属性表示数组的长度，即其中元素的个数。因为数组的索引总是由0 开始，所以一个数组的上下限分别是：0 和length-1 。和其他大多数语言不同的是，JavaScript 数组的length 属性是可变的，这一点需要特别注意。当length 属性被设置得更大时，整个数组的状态事实上不会发生变化，仅仅是length 属性变大；当length 属性被设置得比原来小时，则原先数组中索引大于或等于length 的元素的值全部被丢失。下面是演示改变length 属性的例子：
var arr=[12,23,5,3,25,98,76,54,56,76];
// 定义了一个包含10 个数字的数组
alert(arr.length); // 显示数组的长度10
arr.length=12; // 增大数组的长度
alert(arr.length); // 显示数组的长度已经变为12
alert(arr[8]); // 显示第9 个元素的值，为56
arr.length=5; // 将数组的长度减少到5 ，索引等于或超过5 的元素被丢弃
alert(arr[8]); // 显示第9 个元素已经变为"undefined"
arr.length=10; // 将数组长度恢复为10
alert(arr[8]); // 虽然长度被恢复为10 ，但第9 个元素却无法收回，显示"undefined"
由上面的代码我们可以清楚的看到length 属性的性质。但length 对象不仅可以显式的设置，它也有可能被隐式修改。JavaScript 中可以使用一个未声明过的变量，同样，也可以使用一个未定义的数组元素（指索引超过或等于length 的元素），这时，length 属性的值将被设置为所使用元素索引的值加1 。例如下面的代码：
var arr=[12,23,5,3,25,98,76,54,56,76];
alert(arr.length);
arr[15]=34;
alert(arr.length);
代码中同样是先定义了一个包含10 个数字的数组，通过alert 语句可以看出其长度为10 。随后使用了索引为15 的元素，将其赋值为15 ，即 arr[15]=34 ，这时再用alert 语句输出数组的长度，得到的是16 。无论如何，对于习惯于强类型编程的开发人员来说，这是一个很令人惊讶的特性。事实上，使用new Array() 形式创建的数组，其初始长度就是为0 ，正是对其中未定义元素的操作，才使数组的长度发生变化。
由上面的介绍可以看到，length 属性是如此的神奇，利用它可以方便的增加或者减少数组的容量。因此对length 属性的深入了解，有助于在开发过程中灵活运用。
2 、prototype 属性
返回对象类型原型的引用。prototype 属性是 object 共有的。
objectName.prototype
objectName 参数是object 对象的名称。
说明：用 prototype 属性提供对象的类的一组基本功能。对象的新实例“ 继承” 赋予该对象原型的操作。
对于数组对象，以以下例子说明prototype 属性的用途。
给数组对象添加返回数组中最大元素值的方法。要完成这一点，声明一个函数，将它加入 Array.prototype ，并使用它。

以下为引用的内容：
function array_max( )
{
var i, max = this[0];
for (i = 1; i < this.length; i++)
{
if (max < this[i])
max = this[i];
}
return max;
}
Array.prototype.max = array_max;
var x = new Array(1, 2, 3, 4, 5, 6);
var y = x.max( );

该代码执行后，y 保存数组 x 中的最大值，或说 6 。
3 、constructor 属性
表示创建对象的函数。
object.constructor //object 是对象或函数的名称。
说明：constructor 属性是所有具有 prototype 的对象的成员。它们包括除 Global 和 Math 对象以外的所有 JScript 固有对象。constructor 属性保存了对构造特定对象实例的函数的引用。
例如：
x = new String("Hi");
if (x.constructor == String) // 进行处理（条件为真）。
或
function MyFunc {
// 函数体。
}
y = new MyFunc;
if (y.constructor == MyFunc) // 进行处理（条件为真）。
对于数组来说：
y = new Array();

判断是否数组的方法
var arrayVar = [/"aaa/", /"bbb/", /"ccc/"];
var nonArrayVar = { length:4, otherAttribute:/"attr/" };
document.write(arrayVar.constructor==Array);
document.write(/" /");
document.write(nonArrayVar.constructor==Array); 结果是true, false

关于数组转换
可以使用[].slice.call() 或者Array.prototype.slice.call() ，但是IE6, IE7 下对DOM 元素集合使用这个操作时会报错，其它浏览器(Firefox, Opera, Safari) 都正常
示例代码:
(function(){
 //Supported by Firefox, IE6, IE7, Opera, Safari
 var argArray=[].slice.call(arguments); //arguments is not an array,
 //[].slice.call() will make a new array with arguments
 document.write(argArray.reverse().join(/" & /")); //result: www & 2 & 1
 document.write(/" /"); [Page]

 //Supported by Firefox, IE6, IE7, Opera, Safari
 var arrayLike = { 0:/"ccc/", 1:1, 2:/"eee/", 3:8, length:4 }; //an object that looks like an object
 var trueArray = [].slice.call(arrayLike, 2, arrayLike.length); //make a new array with arrayLike
 trueArray.push(/"2008-02-12/");
 document.write(trueArray.join(/" | /")); //result: eee | 8 | 2008-02-12
 document.write(/" /");

 //Supported by Firefox, Opera, Safari
 var obj = document.createElement(/"ul/");
 obj.innerHTML = ’<li>AAAAAA</li> <li style=/"display: none;/">BBBBBB</li>

<li>CCCCCC</li> <li>DDDDDD</li>’;
 var nodeList = obj.getElementsByTagName(/"li/"); //DOMElement collections
 document.write(nodeList.length + /" li node found! /");
 var nodeArray = [].slice.call(nodeList); //make a new array with nodeList
 for(var i=0; i<nodeArray.length; i++){
 document.write(nodeArray[i].textContent || nodeArray[i].innerText);
 document.write(/" $ /");
 } //result: AAAAAA $ BBBBBB $ CCCCCC $ DDDDDD $
})(1,2,/"www/");
grep 、map
Perl 语言带出来的东西，jQuery 里面就用了自己的grep 和map 实现
grep
对数组的grep 操作，指类似这样的代码:
Array newArray = grep(condition, oldArray) ，这个操作将对oldArray 数组的每个元素进行遍历，如果当前处理元素符合条件condition ，则加入到返回数组中
jQuery 中的grep 类似这样: function( elems, callback) ，elems 是DOM 元素集合，callback 是实现selector 的一些表达式函数，如果callback 返回true 则表明当前处理的元素符合selector 表达式

map

与grep 不同的是，map 不进行条件判断，只是对数组中每个元素执行指定的操作，就是将一个循环过程进行改装 [Page]

喜欢动态语言风格的，可以给数组加个grep 和map 方法，例如:
Array.prototype.grep = function(condition, operation, inverse){
 if(arguments.length<1) return [];

 var tester;
 if( typeof condition==/"function/" ) tester=condition;
 else if( condition.constructor==RegExp ) tester = function(e, i) { return condition.test(e); };
 else if( typeof condition==/"string/" )
 try{
 tester = eval( /"false||function(e, i){ return /" + condition + /"; }/" );
 }catch(e) {
 }
 else tester = function(e, i) { return false; };
 if(!tester) return [];

 var command;
 if( typeof operation==/"function/" ) command=operation;
 else if(typeof operation==/"string/")
 try{
 command = eval( /"false||function(e, i){ /" + operation + /"; return e; }/" );
 }catch(e) {
 }
 if(typeof command!=/"function/") command=function(e, i) { return e; };

 var result = [], match, t;
 for(var i=0; i<this.length; i++){
 match = tester(this[i], i);
 if(match) t = command(this[i], i);
 if(match && !inverse && t!=null) t.constructor==Array ? result.concat(t) : result.push(t);
 else if(!match && inverse) result.push(this[i]); [Page]
 }

 return result;
};
Array.prototype.map = function(callback){
 if(!callback || typeof callback!=/"function/") return this;
 for(var i=0; i<this.length; i++) callback( this[i], i);
 return this;
}; 使用示例:
var oldArray = [ 2, 7, 8, 5, 1, 9, 2, 6, 0 ];
var newArray1 = oldArray.grep(/"i%2==0/"); //return elements with even index
var newArray2 = oldArray.grep(/"e%2==1/"); //return elements with odd value
document.write(newArray1 + /" /"); //result: 2,8,1,2,0
document.write(newArray2 + /" /"); //result: 7,5,1,9

oldArray = [ /"aa/", /"bbbb/", /"abcdefg/", /"ccccc/", /"111121111/", /"999999999/" ];
var newArray3 = oldArray.grep(/(//w)//1{4,}/);
document.write(newArray3 + /" /"); //result: ccccc,999999999 典型jQuery 风格的代码:
var obj = document.createElement(/"ul/");
obj.innerHTML = ’<li>AAAAAA</li> <li style=/"display: none;/">BBBBBB</li>

<li>CCCCCC</li> <li>DDDDDD</li>’;
document.body.appendChild(obj);

window.setInterval(function(){
 //make a new aarray with DOMElement collection
 var liList = obj.getElementsByTagName(/"li/");
 var liArray = [];
 for(var i=0; i<liList.length; i++) liArray.push( liList[i] );
 //grep for arrays example
 liArray
 .grep(’e.style[/"display/"]==/"none/"’, ’e.style[/"display/"] = /"/";’, true)

.map(function(e, i){ e.style[/"display/"] = /"none/"; });
}, 1500);