js与jquery常用数组方法总结

　　昨天被问数组方法的时候，问到sort()方法是否会改变原来的数组。本来我猜是不会，也是这么说，马上我又觉得，知识这种东西，不确定的时候直接说不确定或不知道就好，只是凭借着不确定的猜测或者是记忆，害人害己，于是我又回答不知道。结果果然。。。我记错了0.0 还是自己总结测试一下比较靠谱，印象也比较深刻。欢迎大家提出相关意见或建议，提前谢谢哈~

　　一.原生js方法

　　1.遍历数组 in(同时也是对象遍历属性的方法)

var a = [1, 2, 3];for (x in a) {    console.log(x);}

　　2.合并数组 concat

var a = [1, 2, 3],    b = [4, 5, 6],    c;c = b.concat(a);     //将a加在b上,返回新数组，a和b并没有变。参数数量不限console.log(b);console.log(c);

　　3.合并数组的值为字符串 join

var a = [1, 2, 3],    b = a.join('*'); //默认为之间加上 ，          console.log(a);      //a并没有变console.log(b);

　　参数为分隔符，默认为" , "分隔，当参数为' '时表示直接连接，常用于js中拼接html,如自定义弹窗，js生成form表单。

　　4.数组排序 sort

var a = [6, 2, 3, 'a', 'x', 20],    b = a.sort();          //ASC表顺序，先看首位，因此20排在3前面console.log(a);            //a变化了console.log(b);a.push('k');console.log(b);            //a和b指向同一个对象，b相当于a的别名

　　可以在参数里写排序规则函数, 如全是数字从小到大排序(注意返回值正负)

var a = [3, 2, 6, 20],    b = a.sort(function(x, y) {        return x - y;    });console.log(b);

　　当不全是数字的时候，会产生奇葩错误(NaN)，见下图

　　由此可知，注意运算符的正确用法还是很重要的。对于NaN，能少操作就少操作，毕竟是唯一一个js中不等于任何值的类型(Not a Number),包括它本身(可以用来判断一个变量是不是NaN,未初始化的变量是无类型的)。

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

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

　　可见这类方法添加元素则返回添加后长度， 删除元素则返回被删的那个可怜家伙(同splice)。

　　6.数组反序 reverse

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

　　7.取数组中需要的部分 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本身不变

　　8.修改数组 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

var a = [1, 2, 3, 4],    b = a.splice(2, 1);console.log(a);console.log(b); 

　　在任意位置添加任意多个元素(如在下标2后添加两个元素'7','8'),此时num设为0

var a = [1, 2, 3, 4],    b = a.splice(2, 0, 7,8);console.log(a);console.log(b);   //没有删除，b返回[]

　　根据元素值删除元素(结合jquery)

var a=[1,2,3,4];a.splice($.inArray(2,a),1);console.log(a);

　　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

　　二.Jquery常用js方法

　　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;    }

　　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        // Wo