javascript Array对象使用小结

Javascript的数组实质是对象,它把数组的下标转换成字符串,用其作为属性,因此它明显比真正的数组慢,但它可以更方便地使用。

改变自身pop,push,reverse,shift,sort,splice,unshift, 不改变自身concat,join,slice,indexOf,lastIndexOf(后两个为1.6),1.6新增的迭代器:map,filter,forEach,every,some,1.8新增reduce,reduceRight
Array 对象的方法

FF: Firefox, N: Netscape, IE: Internet Explorer




























































































方法 描述 FF N IE
concat() 向数组的副本添加新的元素,返回新的数组,原数组不受影响 1 4 4
join() 把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。 1 3 4
pop() 删除并返回数组的最后一个元素 1 4 5.5
push() 向数组的末尾添加一个或更多元素,并返回新的长度。 1 4 5.5
reverse() 颠倒数组中元素的顺序。 1 3 4
shift() 删除并返回数组的第一个元素 1 4 5.5
slice() 从某个已有的数组返回选定的元素 1 4 4
sort() 对数组的元素进行排序,有一个可选参数,为比较函数。 1 3 4
splice() 删除元素,并向数组添加新元素。 1 4 5.5
toSource() 代表对象的源代码 1 4 -
toString() 把数组转换为字符串,并返回结果。 1 3 4
toLocaleString() 把数组转换为本地数组,并返回结果。 1 3 4
unshift() 向数组的开头添加一个或更多元素,并返回新的长度。 1 4 6
valueOf() 返回数组对象的原始值 1 2 4

Array 对象的属性



























方法 描述 FF N IE
index   1 3 4
input 在普通的Array中是不具备input属性的,只有在调用String对象的match()方法后返回的数组才具有input属性。它是用来存放匹配前的原字符串的内容。 1 3 4
length 设置或返回数组中元素的数目。 1 2 4
我们先来看数组克隆,现在公认用concat()来克隆数组的速度最快。下面做一些测试,分别为直接遍历复制,array.slice(0)与array.concat()

var aArr = new Array(100001).join('a').split('');
var d = new Date();
var bArr = [];
for(var i = 0; i

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

var aArr = new Array(100001).join('a').split('');
var d = new Date();
var bArr = aArr.slice(0);
alert(new Date() - d);

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

var aArr = new Array(100001).join('a').split('');
var d = new Date();
var bArr = aArr.concat();
alert(new Date() - d);

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

判断一个变量引用的对象是否为数组。


代码如下:

var isArray = function(a){
return a &&
typeof a === 'object' &&
typeof a.length === 'number' &&
typeof a.splice === 'function' &&
!(a.propertyIsEnumerable('length'));
}

让数组具有计算能力,这个也很常用,不要用于财会的特殊报表中。


代码如下:

Function.prototype.method = function(name,func){
this.prototype[name] = func;
return this;
}
Array.method('reduce',function(fn,value){
for(var i=0,l=this.length;i<l;i++){
value = fn(this[i],value);
}
return value;
});

如何使用,我们可以创建一个数字数组与相关的四则运算函数,把它们代入reduce函数中就行了


代码如下:

var data = [4,8,10,12,16]
var add = function(a,b){
return a+b;
}
var mult = function(a,b){
return a*b;
}
//使用
var sum = data.reduce(add,0)
var product = data.reduce(mult,1);

each方法,让元素逐个执行传入的方法。JavaScript 1.6里已经实现了相应的forEach方法,但IE不支持,人们搞了个相近的each方法,在各大类库都有相应的实现。我们看一个漂亮的实现(作者为51JS的客服果果):


代码如下:

Array.prototype.each = function(fn){
for (var i=0;i <this.length;i++)
this[i].constructor==Array?
this[i].each(fn):
fn.call(this[i],i);
};
[1,[2,[3,[4,[5,[6,[7,[8,[9,[0]]]]]]]]]].each(
function(){
return alert(this);
});

上面这个比较强大,除了能深层遍历数组外,还能遍历类数组对象(如arguments,NodeList),对象的所有属性都会被fn方法进行调用。但是从设计模式来看,它承担职责太多了.each方法就应该是面向数组,如果是对象或类数组对象,我们应该将它们转化为数组,如JQuery的 makeArray,mootools和Prototype的$A。


代码如下:

var arrayize = function(iterable){
try{
return Array.prototype.slice.call(iterable);
}catch(e){
var l = iterable.length || 0, array = new Array(l);
while (l--) array[l] = iterable[l];
return array;
}
}

接着下来我们就可以实现纯数组的each函数了。


代码如下:

var each = function(func, array) {
for (var i=0,l = array.length; i<l; ++i) {
func(array[i])
}
}

然后再改成一个原型方法


代码如下:

Array.prototype.each = function(func) { each(func,this); };

不过,如果浏览器支持javascript1.6的forEach方法,就用forEach


代码如下:

Array.prototype.each = function(func) {
if(Array.prototype.forEach){
this.forEach(func);
}else{
each(func,this);
}
};

用法:


代码如下:

[4, 5, 6].each(function(index) { alert(index + "+2 = " + (index+2)); })

火狐官网还有一个实现:


代码如下:

if (!Array.prototype.forEach)
{
Array.prototype.forEach = function(fun /*, thisp*/)
{
var len = this.length >>> 0;
if (typeof fun != "function")
throw new TypeError();
var thisp = arguments[1];
for (var i = 0; i < len; i++)
{
if (i in this)
fun.call(thisp, this[i], i, this);
}
};
}

让我们看一下jQuery提供的each方法的具体实现
jQuery.each(obj,fn,arg)
该方法有三个参数:进行操作的对象obj,进行操作的函数fn,函数的参数args。
让我们根据ojb对象进行讨论:
1.obj对象是数组
each方法会对数组中子元素的逐个进行fn函数调用,直至调用某个子元素返回的结果为false为止,也就是说,我们可以在提供的fn函数进行处理,使之满足一定条件后就退出each方法调用。当each方法提供了arg参数时,fn函数调用传入的参数为arg,否则为:子元素索引,子元素本身。
2.obj 对象不是数组
该方法同1的最大区别是:fn方法会被逐次不考虑返回值的进行进行。换句话说,obj对象的所有属性都会被fn方法进行调用,即使fn函数返回false。调用传入的参数同1类似。


代码如下:

jQuery.each=function( obj, fn, args ) {
if ( args ) {
if ( obj.length == undefined ){
for ( var i in obj )
fn.apply( obj, args );
}else{
for ( var i = 0, ol = obj.length; i < ol; i++ ) {
if ( fn.apply( obj, args ) === false )
break;
}
}
} else {
if ( obj.length == undefined ) {
for ( var i in obj )
fn.call( obj, i, obj );
}else{
for ( var i = 0, ol = obj.length, val = obj[0]; i < ol && fn.call(val,i,val) !== false; val = obj[++i] ){}
}
}
return obj;
}

需要特别注意的是each方法中fn的具体调用方法并不是采用简单的fn(i,val)或fn(args),而是采用了 fn.call(val,i,val)或fn.apply(obj.args)的形式,这意味着,在你自己的fn的实现中,可以直接采用this指针引用数组或是对象的子元素。这种方式是绝大多数jQuery所采用的一种实现方式。


代码如下:

Array.prototype.contains = function (obj) {
return this.indexOf(obj) != -1;
};
Array.prototype.copy = function (obj) {
return this.concat();
};
Array.prototype.insertAt = function (obj, i) {
this.splice(i, 0, obj);
};
Array.prototype.insertBefore = function (obj, obj2) {
var i = this.indexOf(obj2);
if (i == -1)
this.push(obj);
else
this.splice(i, 0, obj);
};
Array.prototype.removeAt = function (i) {
this.splice(i, 1);
};
Array.prototype.remove = function (obj) {
var i = this.indexOf(obj);
if (i != -1)
this.splice(i, 1);
};

时间: 2009-12-23

JavaScript数组Array对象增加和删除元素方法总结

本文实例总结了JavaScript数组Array对象增加和删除元素方法.分享给大家供大家参考.具体分析如下: pop 方法 移除数组中的最后一个元素并返回该元素. arrayObj.pop( ) 必选的 arrayObj 引用是一个 Array 对象. 说明 如果该数组为空,那么将返回 undefined. shift 方法 移除数组中的第一个元素并返回该元素. arrayObj.shift( ) 必选的 arrayObj 引用是一个 Array 对象. 说明 shift 方法可移除数组中的第一

JavaScript中的Array对象使用说明

说它是一个动态数组,是因为动态的添加数据: 复制代码 代码如下: var myarr = new Array(); myarr[0] = 1; myarr[1] = 2; myarr[2] = 3; myarr[3] = 23; myarr[4] = 11; 使用for进行遍历: 说它是一个字典对象,是因为他可以以键值的形式进行访问: 复制代码 代码如下: var dictionary = new Array(); dictionary["谢龙宝"] = "xielongba

以JSON形式将JS中Array对象数组传至后台的方法

业务是需要将前台jQuery easyUI DataGrid列表中所选的若干行的数据传到后台进行update操作 通常情况下我们会获取所选取行对象的ID,通过循环及简单封装拼凑成一个长String传送过去,并在Service层解释再通过findByID获取实例并update 但今次我们需要将整个对象群完整的传输至后台 其结构如下 选用谷歌的GSON插件及json2.js搭配使用 前台代码如下,简洁起见已去除部分简单验证代码: 复制代码 代码如下: var rows = $('#dg1').dat

js Array对象的扩展函数代码

使用 复制代码 代码如下: <script language=javascript>var isNumeric = function(x) {   // returns true if x is numeric and false if it is not.   var RegExp = /^(-)?(\d*)(\.?)(\d*)$/;    return String(x).match(RegExp);}var myArray = [1,'two',3,'four',5,'six',7,'e

javascript中活灵活现的Array对象详解

前言 JavaScript中的Array对象,就是我们常说的数组对象,主要用于封装多个任意类型的数据,并对它们进行管理. 所有主流浏览器均支持Array对象. 大家都知道Array实例有这四个方法:push.pop.shift.unshift.大家也都知道 push + pop实现栈, shift + push实现队列.在这里不讨论什么先进后出.先进先出. 但一面这个题将要用到这几个方法. 题目 螺旋矩阵这个名词,在后台语言中可能很熟悉,他是个二维数组,他有什么特点呢?请看下图: 以上是一个从外

JavaScript中Array 对象相关的几个方法

push 方法将新元素添加到一个数组中,并返回数组的新长度值. arrayObj.push([item1 [item2 [. . . [itemN ]]]])参数arrayObj 必选项.一个 Array 对象. item, item2,. . . itemN 可选项.该 Array 的新元素. 说明push 方法将以新元素出现的顺序添加这些元素.如果参数之一为数组,那么该数组将作为单个元素添加到数组中.如果要合并两个或多个数组中的元素,请使用 concat 方法. 示例 <script typ

JavaScript 判断判断某个对象是Object还是一个Array

1.typeof 操作符.对于Function, String, Number ,Undefined 等几种类型的对象来说,他完全可以胜任,但是为Array时 复制代码 代码如下: var arr=new Array("1","2","3","4","5"); alert(typeof(arr)); 你会收到一个object 的答案,有点让人失望 . 2.instanceof 操作符,JavaScript中

Javascript中判断变量是数组还是对象(array还是object)

怎样判断一个JavaScript变量是array还是obiect? 答案: 1.如果你只是用typeof来检查该变量,不论是array还是object,都将返回'objec'. 此问题的一个可行的答案是是检查该变量是不是object,并且检查该变量是否有数字长度(当为空array时长度也可能为0). 然而,参数对象[arguments object](传给制定函数的所有参数),也可能会适用于上述方法,技术上来说,参数对象并不是一个array. 此外,当一个对象有a.length属性的时候,这个方

JScript内置对象Array中元素的删除方法

我们知道JScript给我们提供了一个内置的数组对象Array.Array对象除了提供了constructor.length和prototype外,还默认提供了13个方法:concat.join.pop.push.reverse.shift.slice.sort.splice.toLocaleString.toString .unshift和valueOf,可是没有提供delete方法. 要是熟悉JavaScript的话,会马上说,系统提供了一个delete操作,可以用来删除数组中的元素.对,J

js中判断Object、Array、Function等引用类型对象是否相等

在迭代中,我们还要注意的是,对象或者数组中的元素可能是一个任意值--除了原始类型值.object.arrray外,这个值还可能是一个方法.一个DOM对象或者window对象,可能你已经注意到了,有部分引用类型是不能进行迭代的,需要分支判断,代码如下: 复制代码 代码如下: function compare(a,b){ var pt = /undefined|number|string|boolean/, fn = /^(function\s*)(\w*\b)/, cr = "constructo

js中判断变量类型函数typeof的用法总结

1.作用: typeof 运算符返回一个用来表示表达式的数据类型的字符串. 可能的字符串有:"number"."string"."boolean"."object"."function" 和 "undefined". 2.常用返回值说明 表达式 返回值 typeof undefined 'undefined' typeof null 'object' typeof true 'boole

JavaScript知识点总结(十一)之js中的Object类详解

JavaScript中的Object对象,是JS中所有对象的基类,也就是说JS中的所有对象都是由Object对象衍生的.Object对象主要用于将任意数据封装成对象形式. 一.Object类介绍 Object类是所有JavaScript类的基类(父类),提供了一种创建自定义对象的简单方式,不再需要程序员定义构造函数. 二.Object类主要属性 1.constructor:对象的构造函数. 2.prototype:获得类的prototype对象,static性质. 三.Object类主要方法 1

js中判断用户输入的值是否为空的简单实例

在js中判断用户输入的值是否为空,这是大家用得非常多的. 这没有什么好写的. 而我却写了. 原因只是自以为是的认为我的这些代码写得不错, 供大家参考一下. 这是摘自的我一个项目的中的用户注册页面.对于大多数人来说,这都几乎是100%经历过的.贴代码吧,这些代码都是用js写的. 不难,很容易看懂. 看的时候,只要区别两个js类就行了.前台页面代码:reguser.aspx 复制代码 代码如下: <%@ Page language="c#" Codebehind="RegU

JS深度拷贝Object Array实例分析

本文实例分析了JS深度拷贝Object Array.分享给大家供大家参考,具体如下: function cloneObj(o) { var isArray = o instanceof Array; var isObject = o instanceof Object; if (!isObject) return o; var n = (isArray ? [] : {}); for (var k in o) n[k] = cloneObj(o[k]); return n; } 遇到的问题 ty

JS中判断null的方法分析

本文实例讲述了JS中判断null的方法.分享给大家供大家参考,具体如下: 以下是不正确的方法: var exp = null; if (exp == null) { alert("is null"); } exp 为 undefined 时,也会得到与 null 相同的结果,虽然 null 和 undefined 不一样. 注意:要同时判断 null 和 undefined 时可使用本法. var exp = null; if (!exp) { alert("is null&

JS中判断字符串中出现次数最多的字符及出现的次数的简单实例

JS中判断字符串中出现次数最多的字符及出现的次数的简单实例 <script type="text/javascript"> var str = 'qwertyuilo.,mnbvcsarrrrrrrrtyuiop;l,mhgfdqrtyuio;.cvxsrtyiuo'; var json = {}; //遍历str拆解其中的每一个字符将其某个字符的值及出现的个数拿出来作为json的kv for (var i = 0; i < str.length; i++) { //

在js中判断checkboxlist(.net控件客户端id)是否有选中

在提交添加或修改内容时,需要对关键数据进行判空处理,如何在js中判断checkboxlist是否有选择项呢? 具体操作如下: 复制代码 代码如下: var CheckBox = document.getElementById("<%=cblWeek.ClientID %>").getElementsByTagName("INPUT"); if (CheckBox != undefined) { var i = 0; var j = 0; for (i =

JS中使用new Date(str)创建时间对象不兼容firefox和ie的解决方法(两种)

IE中new Date(strDate)返回无效时间解决方式: 方法一: function getDateForStringDate(strDate){ //切割年月日与时分秒称为数组 var s = strDate.split(" "); var s1 = s[0].split("-"); var s2 = s[1].split(":"); if(s2.length==2){ s2.push("00"); } return

JavaScript基础篇(3)之Object、Function等引用类型

阅读目录 Object类型 1.通过构造函数来创建 2.通过字面量表示法来创建对象 Array类型 同样Array也有两种创建方式: 如果我们想要打印数组中所有的值,直接打印数组的变量名就可以: 往数组添值: 栈方法.队列方法:  关于数组的排序:  数组的一些操作方法: 查找位置方法 迭代方法 归并方法 Date类型 RegExp类型 Function类型 三种表示法: 方法重载 函数内部属性(arguments 和 this) 基本包装类型 浏览器的内置对象 URI 编码方法 总结 我们在<