JavaScript Array

一、JavaScript数组

1.声明

var myArray=new Array();	//声明一个名为myArray的数组对象

2.赋值

2.1

var mycars=new Array()		//var mycars=new Array(3)
mycars[0]="Saab"
mycars[1]="Volvo"
mycars[2]="BMW"

2.2

var mycars=new Array("Saab","Volvo","BMW")

3.访问

document.write(mycars[0])	//输出Saab

4.修改

mycars[0]="Opel";		//此时数组第一个元素由Saab变为Opel

5.Array对象属性

5.1constructor

constructor 属性返回对创建此对象的数组函数的引用

语法：

object.constructor		//返回Array

5.2length

length 属性可设置或返回数组中元素的数目。

语法：

arrayObject.length

5.3prototype

prototype 属性使您有能力向对象添加属性和方法。

语法：

object.prototype.name=value

例子：

<script type="text/javascript">
/*返回20000*/
function employee(name,job,born)
{
this.name=name;
this.job=job;
this.born=born;
}

var bill=new employee("Bill Gates","Engineer",1985);

employee.prototype.salary=null;
bill.salary=20000;

document.write(bill.salary);

</script>

6.对象方法（详见http://www.w3school.com.cn/jsref/jsref_obj_array.asp）

方法	描述
concat()	连接两个或更多的数组，并返回结果。 //array1.concat(array2);
join()	把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。//arrayObject.join(separator)
pop()	删除并返回数组的最后一个元素
push()	向数组的末尾添加一个或更多元素，并返回新的长度。
reverse()	颠倒数组中元素的顺序。
shift()	删除并返回数组的第一个元素
slice()	从某个已有的数组返回选定的元素
sort()	对数组的元素进行排序
splice()	删除元素，并向数组添加新元素。
toSource()	返回该对象的源代码。
toString()	把数组转换为字符串，并返回结果。
toLocaleString()	把数组转换为本地数组，并返回结果。
unshift()	向数组的开头添加一个或更多元素，并返回新的长度。
valueOf()	返回数组对象的原始值

7.方法实例（ 本部分转载）

7.1数组的模拟栈(FILO) 和队列(FIFO) 方法(均改变原来数组)

var a = [6, 2, 3, 'a', 'x', 20],
    b = a.push('ab'),    //末尾添加元素，并返回新长度
    c = a.pop(),         //删除并返回数组的最后一个元素
    d = a.unshift('xy'), //开头添加元素，并返回新长度
    e = a.shift();       //删除并返回数组的第一个元素

7.2数组反序reverse

var a = [6, 2, 3, 'a', 'x', 20],
    b = a.reverse();       //返回a的引用

7.3取数组中需要的部分 slice

var a = [6, 2, 3, 'a', 'x', 20],
    b = a.slice(0, 2);    //下标从0取到2(不包括2)，没有第二个参数则默认到末尾。第一个参数为负表示从末尾开始数。第一个参数小于第二个参数则为空。
console.log(a);
console.log(b);           //b是a一部分的副本,a本身不变

7.4修改数组 splice (既然是修改数组，肯定数组本身会变的啦)

var a = [1, 2, 3, 4],
    b = a.splice(0, 2, 6);
console.log(a);          
console.log(b);          //b为被删掉的数组部分

a.splice(index, num, newItem1, newItem2...):index为开始选择的元素下标，num为接下来要删除元素的个数，newItem为接下来(在删完的地方)要添加的新元素(非必须)。这个方法用途最多，如删除指定下标(2,也就是第三个)元素,此时不设置需要添加的newItem，而num设为1

plus:数组也是特殊的对象(但是拥有自己的方法，一般用下标访问)，因此同样也有对象的通用方法toString和valueOf

var a = [1, 2, [3,2], 4],
    b = a.toString(); // 转化为字符串(不管有多少层)
console.log(a);       //a本身不变
console.log(b); 

var a = [1, 2, 4],
    b = a.valueOf();  // 返回原始值(其实还是它本身。。。)
console.log(a);       //a本身不变
console.log(b); 

小结:综上所述，js数组的原生方法里面

　　修改自身的有: splice, pop, push, shift, unshift, sort, reverse

　　不修改自己身的: slice, concat, join

二、JavaScript多维数据

1.如何返回多维数组的元素个数

m*n的数组，但是每一个维度的元素个数可能不同（如果相同的话矩阵吧）

思想：递归

//判断某个对象是不是数组

function isArray(obj) {

return obj && ( typeof obj === 'object') && (obj.constructor == Array);

}

//eleNum变量初始值为0，用来统计数组元素个数

var eleNum = 0;

//递归计算某个数组元素是不是下一维数组，如果是，则继续递归下去；如果不是，统计元素个数。

function recursion(obj) {

if (isArray(obj)) {

for (var j = 0; j < obj.length; j++) {

if (!isArray(obj[j])) {

eleNum++;

continue;

}

recursion(obj[j]);

}

} else {

eleNum++;

}

}

//arr为要计算数组元素个数的一维或多维数组，通过调用递归函数recursion返回数组元素个数

function getArrNElementNum(arr) {

if (arr == null) {

return 0;

}

recursion(arr);

return eleNum;

}

//随意定义一个复杂的多维嵌套数组

var arrN = [["zhangsan", 25, [1, "wangyuchu", 54, [123, 34, 16]], 43], ["lisi", 21, 172], ["wangwu", 32, "suzhou"]];

//打印出来数组元素个数

alert(getArrNElementNum(arrN));

2.对象

2.1

对象由花括号分隔。在括号内部，对象的属性以名称和值对的形式 (name : value) 来定义。属性由逗号分隔：
var person={firstname:"Bill", lastname:"Gates", id:5566};
上面例子中的对象 (person) 有三个属性：firstname、lastname 以及 id。
空格和折行无关紧要。声明可横跨多行：
var person={
firstname : "Bill",
lastname  : "Gates",
id        :  5566
};
对象属性有两种寻址方式：
实例
name=person.lastname;
name=person["lastname"];
2.2

对象和多维数组的混合使用：
         想象这么一个场景，要枚举并统计清华大学（qinghua）、北京大学(beida)、浙江大学(zheda)三所大学一共有多少个系，怎么做？
         首先，建立一个数组，数组中包括着三所学校：
var departments = [qinghua, beida, zheda];
        每个学校又有很多不同或相同的学院（xx），如何表示？在这里就要用到数组包含对象了：
var departments = [qinghua{xx1, xx2, xx3}, beida{xx4, xx5,
 xx6, xx7}, zheda{xx8, xx9}];
每个学院又有不同的系(d)，如何表示？
var departments = [qinghua{xx1:[d1, d2], xx2[d3, d5],
 xx3:[d7, d8]}, beida{xx4, xx5, xx6, xx7}, zheda{xx8,
 xx9}];
//只是举个例子，后面两个大学我就不表示了
        上述例子就是一个数组，该数组的元素是学校对象，学校对象有N个学院属性，而每个学院属性又是一个包含多个系的数组，这就是一个典型的多维数组和对象混合使用的例子，可以简单明了的说明和列表学校、学院和系之间的级别、归属和数量关系。

三、jQuery数组操作（本部分为转载）

1.遍历

可以对所有的元素进行操作。如果想要满足条件退出，用return false( 绝大部分jquery方法都可以这么退出)。 
　　$.each(arr, callback(key, val));      //可以链式调用，返回arr，为本身

var a = [1, 2, 3, 4];
$.each(a, function(key, val) {     //以jQuery对象的方法调用，兼容性好;也可以用$(a)将a转化为jquery对象，然后以$(a).each(function(){})的形式调用,下面的方法同
    console.log(a[key] + '下标为' + key + '值为' + val);
});

//对应源码(jquery1.11.0下面同)

// Execute a callback for every element in the matched set.
// (You can seed the arguments with an array of args, but this is
// only used internally.

each: function( obj, callback, args ) {
        var value,
            i = 0,
            length = obj.length,
            isArray = isArraylike( obj );

        if ( args ) {
            if ( isArray ) {
                for ( ; i < length; i++ ) {
                    value = callback.apply( obj[ i ], args );   //第三个参数用于扩展obj元素的方法,一般不用

                    if ( value === false ) {
                        break;
                    }
                }
            } else {
                for ( i in obj ) {
                    value = callback.apply( obj[ i ], args );

                    if ( value === false ) {
                        break;
                    }
                }
            }

        // A special, fast, case for the most common use of each
        } else {
            if ( isArray ) {
                for ( ; i < length; i++ ) {
                    value = callback.call( obj[ i ], i, obj[ i ] );

                    if ( value === false ) {
                        break;
                    }
                }
            } else {
                for ( i in obj ) {
                    value = callback.call( obj[ i ], i, obj[ i ] );

                    if ( value === false ) {
                        break;
                    }
                }
            }
        }

        return obj;
    }

补充：在jquery是遍历筛选数组有多种方法与函数了，包括有:grep、each、inArray、map同时也要以遍历json对象

1.1grep
grep()方法用于数组元素过滤筛选 
grep(array,callback,invert)
array：待过滤数组;
callback：处理数组中的每个元素，并过滤元素，该函数中包含两个参数，第一个是当前数组元素的值，一个是当前数组元素的下标，即元素索引值。此函数应返回一个布尔值。另外，此函数可设置为一个字符串，当设置为字符串时，将视为“lambda-form”（缩写形式？），其中 a 代表数组元素，i 代表元素索引值。如“a > 0”代表“function(a){ return a > 0; }”
invert：布尔型可选项，默认值false，值为true或false， 如果 “invert” 为 false 或为设置，则函数返回数组中由过滤函数返回 true 的元素，当”invert” 为 true，则返回过滤函数中返回 false 的元素集

function(){
        var array = [1,2,3,4,5,6,7,8,9];
        var filterarray = $.grep(array,function(value){
            return value > 5;//筛选出大于5的
        });
        for(var i=0;i<filterarray.length;i++){
            alert(filterarray[i]);
        }
        for (key in filterarray){
            alert(filterarray[key]);
        }
    }

1.2each
each的使用方法
在jQuery里有一个each方法，用起来非常的爽，不用再像原来那样写for循环，jQuery源码里自己也有很多用到each方法。
其实jQuery里的each方法是通过js里的call方法来实现的。

function(){
        var anObject = {one:1,two:2,three:3};//对json数组each
        $.each(anObject,function(name,value) {
            alert(name);
            alert(value);
        });
        var anArray = ['one','two','three'];
        $.each(anArray,function(n,value){
            alert(n);
            alert(value);
        }
        );
    }

1.3inArray
jQuery.isArray(obj) 是 jQuery 1.3 新增。测试对象是否为数组。  返回值:Boolean
参数 : objObject用于测试是否为数组的对象

function(){
        var anArray = ['one','two','three'];
        var index = $.inArray('two',anArray);
        alert(index);//返回该值在数组中的键值，返回1
        alert(anArray[index]);//value is two
    }

1.4map
map() 把每个元素通过函数传递到当前匹配集合中，生成包含返回值的新的 jQuery 对象。
由于返回值是 jQuery 封装的数组，使用 get() 来处理返回的对象以得到基础的数组。
.map() 方法对于获得或设置元素集的值特别有用。请思考下面这个带有一系列复选框的表单

function(){
        var strings = ['0','1','2','3','4','S','6'];
        var values = $.map(strings,function(value){
                var result = new Number(value);
                return isNaN(result) ? null:result;//isNaN:is Not a Number的缩写
            }
        );
        for (key in values) {
            alert(values[key]);
        }
    }

遍历json对象：

var json = [{dd:'SB',AA:'东东',re1:123},{cccc:'dd',lk:'1qw'}];
for(var i=0,l=json.length;i<l;i++){
    for(var key in json[i]){
        alert(key+':'+json[i][key]);
    }
}

遍历json对象：

var obj ={”name”:”冯娟”,”password”:”123456〃,”department”:”技术部”,”sex”:” 女”,”old”:30};
遍历方法：
for(var p in obj){
    str = str+obj[p]+',';
    return str;
} 

2.筛选

$.grep(arr, callback, invert)
invert为false表示对callback的筛选取反。 默认为true。

var a = [1, 2, 3, 4];
$.grep(a, function(val, key) {  //不能链式调用，返回[],所以可以加上return实现链式,返回满足条件的副本
　　if (a[key] > 2) {
　　　　console.log(key);
　　}
　　return val;
});

常用做获取两个数组中相同(或不相同)的部分

var a= [1, 2, 3, 4],
    b=[1,3,5,7];
$.grep(a,function(val,key){
    if(b.indexOf(val)>=0){
        return val;
    }
},false);

//jquery源码
grep: function( elems, callback, invert ) {
        var callbackInverse,
            matches = [],
            i = 0,
            length = elems.length,
            callbackExpect = !invert;

        // Go through the array, only saving the items
        // that pass the validator function
        for ( ; i < length; i++ ) {
            callbackInverse = !callback( elems[ i ], i );   //如果callback没有设置return，那么返回undefined(!undefined还是undefined)
            if ( callbackInverse !== callbackExpect ) {
                matches.push( elems[ i ] );          //只添加满足条件的,内部实现为push方法
            }
        }

        return matches;
    }

3.转换

$.map(arr,callback(key,val))

var a = [1, 2, 3, 4];
$.map(a, function(val, key) { //不能链式调用，返回[],同grep加上return即可放回副本
    if (a[key] > 2) {
        a[key]=val+1;
    }
    return val;              //可以链式调用，返回处理后的数组(也可用于筛选)
});

// arg is for internal usage only
    map: function( elems, callback, arg ) {
        var value,
            i = 0,
            length = elems.length,
            isArray = isArraylike( elems ),
            ret = [];

        // Go through the array, translating each of the items to their new values
        if ( isArray ) {
            for ( ; i < length; i++ ) {
                value = callback( elems[ i ], i, arg );

                if ( value != null ) {
                    ret.push( value );
                }
            }

        // Go through every key on the object,
        } else {
            for ( i in elems ) {
                value = callback( elems[ i ], i, arg );   //如果callback没有返回值，那么value就是undefined

                if ( value != null ) {
                    ret.push( value );
                }
            }
        }

        // Flatten any nested arrays
        return concat.apply( [], ret );                   //如果callback没有返回值，那么value就是[]

}

背景标白的区域为与each方法不同的地方，可以简单的理解为返回对象是否是副本(map是副本)，另外map是为数组或类数组对象量身定做的，而each可以应用于全部对象。

4.合并

$.merge(arr1,arr2)  arr1后面加上arr2后返回arr1

var a=[1,2,3],
    b=[4,5,6];
$.merge(a,b);             //可以有多个参数(居然不报错!)，但是第三个及以后的没用(test in FF and Chrome)

//jquery源码
merge: function( first, second ) {
        var len = +second.length, 
            j = 0,
            i = first.length;

        while ( j < len ) {
            first[ i++ ] = second[ j++ ];
        }

        // Support: IE<9
        // Workaround casting of .length to NaN on otherwise arraylike objects (e.g., NodeLists)
        if ( len !== len ) {
            while ( second[j] !== undefined ) {
                first[ i++ ] = second[ j++ ];
            }
        }

        first.length = i;

        return first;
    }

源码的第二行有个+，最开始我以为是显式声明非负值，后来看到了arraylike，于是测试了极端情况如下:

var ax;
ax.length        //报错，type error
+ax.length       //报错，type error

var ab={};       //空对象作为类空数组对象
ab.length        //undefined
+ab.length       //NaN

var ab=[];
ab.length        //0
+ab.length       //0

var ab=null;
ab.length　　　　 //报错，type error
+ab.length       //报错，type error

5.过滤相同元素

$.unique(arr)//过滤Jquery对象数组中重复的元素(内部实现为===)(不同版本不一样，不要用)

var a = [ 1 , 1 , 2 , 3 , 7 , 4 , 5 , 5 , 6 , 6 ];
$.unique(a)

不同的版本jQuery效果不同，所以最好还是用原生的

6.判断

　$.inArray(val,arr)  判断val是否在arr里面

var a = [1, 2, 3, 4];
$.inArray(2, a);     //有的话返回下标，没有的话返回-1

//对应源码
        inArray: function(elem, arr, i) {
            var len;

            if (arr) {
                if (indexOf) {
                    return indexOf.call(arr, elem, i);     //实际实现
                }

                len = arr.length;
                i = i ? i < 0 ? Math.max(0, len + i) : i : 0;

                for (; i < len; i++) {
                    // Skip accessing in sparse arrays
                    if (i in arr && arr[i] === elem) {     //一般尽可能用===而杜绝==可能带来的隐式转换
                        return i;
                    }
                }
            }

            return -1;
        }

7.元素转数组

$.makeArray()将一个类数组对象转换为真正的数组对象。(所谓"类数组对象"就是一个常规的Object对象，但它和数组对象非常相似：具备length属性，并以0、1、2、3……等数字作为属性名。不过它毕竟不是数组，没有从数组的原型对象上继承下来的内置方法(例如：push()、 sort()等)。)

     $.toArray()将所有DOM元素恢复成数组。(其实用选择器取的时候就是很自然的数组的形式)
　　这两个实际用得太少了就不具体分析了，知道有就行。　　

四、补充

1.清空数组

方法1:length设为0 (js身为弱变量类型语言的体现之一，array的length属性可写)(效率比较低)

方法2:直接指向[]的引用 (如闭包销毁指向null一样，垃圾回收会自动回收空间)(效率比较高)

 

2.兼容性　　

IE8下 
$.inArray 代替 indexOf
$.grep代替Array.prototype.filter

3.注意事项

　　一般情况下用$.functionName(obj,callback)的形式调用jquery方法的兼容性比较好，比如我曾遇到IE8及以下不能识别$(dom).val().trim()的情况，显示trim is not a function，然而改为$.trim($(dom).val())就没问题。

　　前面那种情况实际是string调用trim方法(如果加上call或者apply注入trim方法可以过，但是必要嘛？)，后面是jquery对象调用trim方法。

附转载部分作者学习图