Home > Web Front-end > JS Tutorial > body text

Introduction to the new features of JavaScript1.6 arrays and several tools and methods of JQuery_javascript skills

WBOY
Release: 2016-05-16 17:10:28
Original
1081 people have browsed it

JavaScript 1.6 introduces several new Array methods. For detailed introduction, see: New in JavaScript 1.6. These methods have been written into ECMA262 V5. Modern browsers (IE9/Firefox/Safari/Chrome/Opera) already support it, but IE6/7/8 does not support it. Similar functionality is provided in jquery's tool methods.


1. Array.forEach() and jquery’s $().each(). Run a function on each item in the array. Similar to java5 enhanced for loop.

Copy code The code is as follows:

var ary = [2,4,6,8] ;

// js1.6 Array.forEach method
ary.forEach(function(i){alert(i);});

// How to write jquery
$(ary).each(function(){alert(this);});
//It can also be written like this
$(ary).each(function(index,item){alert(item); });//index is the index of the element, item is the element

2, Array.filter() and jquery’s $.grep(). Run a function on each item in the array and return the items for which the function returns true as an array. To put it simply, a condition is used to filter out array elements that do not meet the condition, and the remaining elements that meet the condition are combined into a new array and returned.
Copy code The code is as follows:

var ary = [2,4,6,8] ;

// js1.6 Array.filter() method
var otherAry1 = ary.filter(function(item){return item>4;});
alert(otherAry1);/ /Output 6, 8

// jquery writing method (note the difference with $.each)
// The first parameter in the function here is the array element itself, and the second parameter is the array element index
// The $().each method is just the opposite, and the author should unify it.
var otherAry2 = $.grep(ary,function(item,index){
return item>4;
});
alert(otherAry2);//output 6, 8

3. Array.map() and jquery’s $.map(). Run a function on each item in an array and return the full results as an array. This method is very powerful, especially when used on DOM arrays (used on the abcc project to generate query strings for each query module DOM). To put it simply, the result of the operation on each array element is used as a new array element (still a mouthful).
Copy code The code is as follows:

var ary = [2,4,6,8] ;

// js1.6 Array.map() method
var newAry1 = ary.map(function(item){return item 1;});//add 1 to each element
alert(newAry1);//Output 3, 5, 7, 9

// jquery writing method
var newAry2 = $.map(ary,function(item,index){return item 1;}) ;
alert(newAry2);//Output 3, 5, 7, 9

4. Array.every() method. Check whether the array elements all meet a certain condition, and return false as long as one does not meet it, otherwise return true
Copy code The code is as follows:

var ary = [2,4,6,8,10];

alert(ary.every(function(item){return item>1}) );//true
alert(ary.every(function(item){return item>2}));//false

5. Array.some() method . Check whether the elements in the array meet a certain condition. As long as one of them matches, it returns true, otherwise it returns false
Copy code Code As follows:

var ary = [2,4,,6,8,10];

alert(ary.some(function(item){return item>9;} ));//true
alert(ary.some(function(item){return item>10;}));//false

Finally gives IE6/7/8 The solution is to allow these browsers to perfectly support the new Array method of JS1.6.
Copy code The code is as follows:

-function(){

function applyIf(o, c) {
    if(o) {
        for(var p in c) {
            if(o[p]===undefined) {
                o[p] = c[p];
            }
        }
    }
    return o;
}
applyIf(Array.prototype, {
    indexOf : function(obj, idx) {
        var from = idx == null ? 0 : (idx < 0 ? Math.max(0, arr.length idx) : idx);
        for(var i = from, l = this.length; i < l; i ) {
            if(i in this && this[i] === obj) {
                return i;
            }
        }
        return -1;
    },
    lastIndexOf : function(obj, idx) {
        var len = this.length, from = idx == null ? len - 1 : idx;
        if(from < 0) {
            from = Math.max(0, len from);
        }
        for(var i = from; i >= 0; i--) {
            if (i in this && this[i] === obj) {
                return i;
            }
        }
        return -1;
    },
    every : function(fn, thisObj) {
        var l = this.length;
        for(var i = 0; i < l; i ) {
            if(i in this && !fn.call(thisObj, this[i], i, this)) {
                return false;
            }
        }
        return true;
    },
    some : function(fn, thisObj) {
        var l = this.length;
        for(var i = 0; i < l; i ) {
            if(i in this && fn.call(thisObj, this[i], i, this)) {
                return true;
            }
        }
        return false;
    },
    filter : function(fn, thisObj) {
        var l = this.length, res = [], resLength = 0;
        for(var i = 0; i < l; i ) {
            if(i in this) {
                var val = this[i];
                if(fn.call(thisObj, val, i, this)) {
                    res[resLength ] = val;
                }
            }
        }
        return res;
    },
    map : function(fn, thisObj) {
        var l = this.length, res = [];
        for(var i = 0; i < l; i ) {
            if(i in this) {
                res[i] = fn.call(thisObj, this[i], i, this);
            }
        }
        return res;
    },
    forEach : function(fn, thisObj) {
        var l = this.length;
        for(var i = 0; i < l; i ) {
            if(i in this) {
                fn.call(thisObj, this[i], i, this);
            }
        }
    }
}); 
}();
Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template