Javascript - how to start for each loop in some kind of index

Question

I have an array with a lot of elements and I am creating a list of them. I was thinking about splitting a list into a list. I wonder how I can run a forEach or for loop at some index in an array, which in my example will be the number of elements in the list on each page, so I don’t need to iterate through the entire array in each loop?

 arr.forEach(function (item) { someFn(item); }) for (var i = 0, len = arr.length; i < len; i++) { someFn(arr[i]); } 

Answer 1

You can use a copy of the array using Array#slice

The slice() method returns a shallow copy of part of the array to a new array object, selected from beginning to end (end not included). The original array will not be modified.

 array.slice(10, 20).forEach(someFn); // only for functions which respects API of forEach* 

* callback options

Or you can start with a given index and end with a given index.

 for (var i = 10, len = Math.min(20, arr.length); i < len; i++) { someFn(arr[i]); } 

WITH

 Math.min(20, arr.length) 

returns the value if the array is less than the given value of 20 . For example, if the array has only index 0 ... 14, you will get the result 15.

Answer 2

forEach does not offer this feature, no. So your choice:

• Simple loop for

• Ignoring indexes that you do not want to process (as in Kind custom answer )

• Using slice (as in Nina's answer )

• Writing Your Own Function

Here # 4 as an extension to Array.prototype (not enumerable, of course, adding enumerated properties to Array.prototype breaks the lot code); after its standalone version, when adding to Array.prototype does not work:

 // Giving ourselves the function Object.defineProperty(Array.prototype, "myEach", { value: function(from, to, callback, thisArg) { if (typeof from === "function") { thisArg = callback; callback = to; to = from; from = 0; } if (typeof to === "function") { thisArg = callback; callback = to; to = this.length; } for (var n = from; n < to; ++n) { callback.call(thisArg, this[n], n, this); } } }); // Using it: var arr = ["zero", "one", "two", "three", "four", "five", "six", "seven"]; console.log("*** From 3:"); arr.myEach(3, function(e) { console.log(e); }); console.log("*** From 3 (inclusive) to 5 (exclusive):"); arr.myEach(3, 5, function(e) { console.log(e); }); console.log("*** All:"); arr.myEach(function(e) { console.log(e); }); console.log("*** Check thisArg handling on 0-2:"); var o = {answer: 42}; arr.myEach(0, 2, function(e) { console.log(e + " (this.answer = " + this.answer + ")"); }, o); 

 .as-console-wrapper { max-height: 100% !important; } 

Note again that this property is not enumerable , which is vital if you have ever added anything to Array.prototype (otherwise you break a lot of code).

You would not do this in a library that others will consume, you would only have a separate function:

 // Giving ourselves the function function myEach(array, from, to, callback, thisArg) { if (typeof from === "function") { thisArg = callback; callback = to; to = from; from = 0; } if (typeof to === "function") { thisArg = callback; callback = to; to = array.length; } for (var n = from; n < to; ++n) { callback.call(thisArg, array[n], n, array); } } // Using it: var arr = ["zero", "one", "two", "three", "four", "five", "six", "seven"]; console.log("*** From 3:"); myEach(arr, 3, function(e) { console.log(e); }); console.log("*** From 3 (inclusive) to 5 (exclusive):"); myEach(arr, 3, 5, function(e) { console.log(e); }); console.log("*** All:"); myEach(arr, function(e) { console.log(e); }); console.log("*** Check thisArg handling on 0-2:"); var o = {answer: 42}; myEach(arr, 0, 2, function(e) { console.log(e + " (this.answer = " + this.answer + ")"); }, o); 

 .as-console-wrapper { max-height: 100% !important; } 

Answer 3

Unfortunately, Array#forEach iterates over each element in the given array, but you can use a simple condition to determine which elements (with the specified index) use this function.

 i > 3 ? someFn(item) : null; ^ if index more than 3 - call the function 

 var arr = [1,2,3,4,5,6,7]; function someFn(elem){ console.log(elem); } arr.forEach(function(item, i) { return i > 3 ? someFn(item) : null; }) 

Answer 4

When reflecting on what @NinaScholz commented on, perhaps you can use variables and any changes will be set to them instead of changing the loop.

 function someFn(item, array2){ array2.push(item, array2); } var arrayItems1 = [1,2,3,4,5,6,7,8,9,10]; var arrayItems2 = []; var firstIndex = 1; var lastIndex = 5; var i = 0; for (i = firstIndex; i < lastIndex; i++){ someFn(arrayItems1[i], arrayItems2); } alert(arrayItems2.join(' ')); 

Answer 5

You can apply some implementation of the iterator pattern.

 var Iterator = function (list, position) { return { isNext: function () { return position + 1 < list.length; }, isDefined: function () { return (position < list.length && position >= 0); }, element: function () { return list[position]; }, position: function () { return position; }, moveNext: function () { if (this.isNext()) { return Iterator(list, position + 1); } return Iterator([], 0); } } Iterator.forEach = function (action, iterator, length) { var counter = 0; while (counter < length && iterator.isDefined()) { counter = counter + 1; action(iterator.element(), iterator.position()); iterator = iterator.moveNext(); } return iterator; } 

And then use the iterator to iterate over the list and save the state of the last iteration over the list.

 var list = [1, 3, 5, 3, 6]; var iterator = Iterator(list, 0); iterator = Iterator.forEach(function (element, index) { console.log(element, index); }, iterator, 3); //1 0 //3 1 //5 2 Iterator.forEach(function (element, index) { console.log(element, index); }, iterator, 5); //3 3 //6 4