Native js implementation of each method

There is an each method in jquery to simplify and facilitate circular operation.
Then es produced a forEach method. Although the two methods are similar in usage, they cannot handle object types. And the continue effect cannot be achieved through return true.
In addition, there is an every method. Although this method can achieve the continue effect, it is useless when dealing with class arrays and object types.

What to do when you don't use jquery's each method, or how to implement it natively?
I wrote a class library earlier: jTool , which implements the method.

Simple implementation:

// Function each realized by literal way
var each =  function(object, callback){
  var type = (function(){
          switch (object.constructor){
            case Object:
                return 'Object';
                break;
            case Array:
                return 'Array';
                break;
            case NodeList:
                return 'NodeList';
                break;
            default:
                return 'null';
                break;
        }
    })();
    // When it is an array or a class array, it returns: index, value
    if(type === 'Array' || type === 'NodeList'){
        // Because there is a class array NodeList, you cannot call the every method directly
        [].every.call(object, function(v, i){
            return callback.call(v, i, v) === false ? false : true;
        });
    }
    // When in object format, return: key, value
    else if(type === 'Object'){
        for(var i in object){
            if(callback.call(object[i], i, object[i]) === false){
                break;
            }
        }
    }
}

Let's try to test the array, object, class array type and interrupt effect

Array type

var _array = [1,2,3,4];
each(_array, function(i, v){
  console.log(i + ': ' + v);
});

The output is as follows:

object type

var object = {a:1, b:2, c:3}
each(object, function(i, v){
console.log(i + ': ' + v);
});
The output is as follows:

Class array type

var ele = document.querySelectorAll('div');
each(ele, function(i, v){
  console.log(i + ': ' + v);
});

The output is as follows:

Add interrupt condition

var object2 = {name:'baukh', age: '29', six:'male', url: 'www.lovejavascript.com',}
each(object2, function(i, v){
  if(i === 'age'){ //If there is an attribute with a key value of age, a warning is output to achieve the continue effect
    console.log('The existing key value is ageļ¼ŒThis guy has'+v+'Year old');
    return true;
  }
  if(i === 'six' && v === 'male'){//If there is an attribute with a key value of age, the output jumps out to achieve the break effect
    console.log('The existing key value is six,It's a man. Don't pay attention~');
    return false;
  }
  console.log(i + ': ' + v);
});

The output is as follows:

It can be seen from the results that the each method has implemented the each function of jquery. And it's so simple~

Essay
This is the best era of front-end, and this is also the worst era of front-end Many front-end frameworks are flying all over the world. With the gradual weakening of jQuery in the front-end industry, there will always be a sense of comfort for those who have gone away. Mutual encouragement, everyone.

Another recommended table component gridManager

Tags: Javascript JQuery Attribute

Posted on Mon, 04 Nov 2019 15:59:44 -0500 by MikeL