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 typevar _array = [1,2,3,4]; each(_array, function(i, v){ console.log(i + ': ' + v); });
The output is as follows:
var object =
each(object, function(i, v){
console.log(i + ': ' + v);
});
The output is as follows:
var ele = document.querySelectorAll('div'); each(ele, function(i, v){ console.log(i + ': ' + v); });
The output is as follows:
var object2 = 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