Friends who have used Underscore know that it has a very complete API to call the traversal of arrays (sets), and _.each() is one of them. Here is a simple example:
var arr = [1, 2, 3, 4, 5];_.each(arr, function(el) {console.log(el);});The above code will output 1, 2, 3, 4, 5 in turn. Isn't it very interesting? You don't even have to write a for loop by yourself. The _.each() method is very useful to traverse arrays, but its internal implementation is not difficult at all. Let’s take a look at how _.each() is implemented. Before this, let's take a look at the API of _.each(). _.each() is generally called as follows:
_.each(arr, fn, context);
It receives 3 parameters,
The first one is an array that needs to be traversed (actually, it is also possible to be an object, so let's discuss this later);
The second is its callback function (this callback function can pass in 3 parameters, such as: function(el, i, arr), which are the current element, the current index and the original array, respectively);
The third is the context that the callback function needs to be bound to, that is, specifying this value of the callback function fn.
OK, the needs are very clear, let’s start working!
Let's first implement the simplest _.each(), which cannot modify the context this, and receives two parameters. The code is as follows:
var _ = {}; // Assume that's the underscore// The simplest implementation of the _.each method_.each = function(arr, fn) { for(var i = 0; i < arr.length; i++) { fn(arr[i], i, arr); } return arr; // Return the original array}How about it? Isn't it very simple? Just use a for loop and keep calling the callback function. It can be done in just a few lines of code. I believe no friends can understand it! Let's test it to see if it works normally:
var arr = [1, 2, 3, 4, 5];_.each(arr, function(el, i, arr) { console.log(el);});Open in the browser and the console will see the correct output.
Such a simple code has no meaning at all. Let’s take a look at a more challenging example. For example, array arr has a sum property. We need to sum all elements of the array and store them in the sum, as follows:
var arr = [1, 2, 3, 4, 5];arr.sum = 0; // The sum attribute is used to store the sum of array elements_.each(arr, function(el, i, arr) { this.sum += el;});At this time, this is used in the callback function. If it is not bound, this is window by default. This is not what we want. We hope it is bound to the array arr. Call or apply can implement this function, the code is as follows:
var _ = {}; // Suppose this is the underscore// bind, receive two parameters fn and context// bind fn to the context var bind = function(fn, context) { context = context || null; return function(el, i, arr) { fn.call(context, el, i, arr); }}// _.each_.each = function(arr, fn, context) { // Call the bind method and bind fn to the context fn = bind(fn, context); for(var i = 0; i < arr.length; i++) { fn(arr[i], i, arr); } return arr;}// Test case: var arr = [1, 2, 3, 4, 5];arr.sum = 0; // The sum attribute is used to store the sum of array elements_.each(arr, function(el, i, arr) { this.sum += el;}, arr);console.log(arr.sum); // 15OK, this _.each() is already powerful enough to iterate through the array normally, and you can also specify this value at will to change the context of the callback function. However, as we mentioned earlier, Underscore's _.each() can also traverse objects, and this implementation is not difficult. Just judge whether the first parameter passed in is an object or an array. If it is an array, iterate like us. Otherwise, if it is an object, use the object's for...in loop traversal. If you are interested, you can try it yourself or check out the source code of underscore.
Note: Since the ES5 standard, native arrays have already traversal methods such as Array.prototype.forEach, Array.prototype.Map, etc., and native ones can be used in the project.
The above is the full description of the in-depth analysis of JS array traversal method (recommended) introduced by the editor. I hope it will be helpful to everyone. If you have any questions, please leave me a message and the editor will reply to everyone in time. Thank you very much for your support to Wulin.com website!