Get loop counter/index using for…of syntax in JavaScript
for…in
iterates over property names, not values, and does so in an unspecified order (yes, even after ES6). You shouldn’t use it to iterate over arrays. For them, there’s ES5’s forEach
method that passes both the value and the index to the function you give it:
var myArray = [123, 15, 187, 32];
myArray.forEach(function (value, i) {
console.log('%d: %s', i, value);
});
// Outputs:
// 0: 123
// 1: 15
// 2: 187
// 3: 32
Or ES6’s Array.prototype.entries
, which now has support across current browser versions:
for (const [i, value] of myArray.entries()) {
console.log('%d: %s', i, value);
}
For iterables in general (where you would use a for…of
loop rather than a for…in
), there’s nothing built-in, however:
function* enumerate(iterable) {
let i = 0;
for (const x of iterable) {
yield [i, x];
i++;
}
}
for (const [i, obj] of enumerate(myArray)) {
console.log(i, obj);
}
demo
If you actually did mean for…in
– enumerating properties – you would need an additional counter. Object.keys(obj).forEach
could work, but it only includes own properties; for…in
includes enumerable properties anywhere on the prototype chain.
Get loop counter/index using for…of syntax in JavaScript
for…in
iterates over property names, not values, and does so in an unspecified order (yes, even after ES6). You shouldn’t use it to iterate over arrays. For them, there’s ES5’s forEach
method that passes both the value and the index to the function you give it:
var myArray = [123, 15, 187, 32];
myArray.forEach(function (value, i) {
console.log('%d: %s', i, value);
});
// Outputs:
// 0: 123
// 1: 15
// 2: 187
// 3: 32
Or ES6’s Array.prototype.entries
, which now has support across current browser versions:
for (const [i, value] of myArray.entries()) {
console.log('%d: %s', i, value);
}
For iterables in general (where you would use a for…of
loop rather than a for…in
), there’s nothing built-in, however:
function* enumerate(iterable) {
let i = 0;
for (const x of iterable) {
yield [i, x];
i++;
}
}
for (const [i, obj] of enumerate(myArray)) {
console.log(i, obj);
}
demo
If you actually did mean for…in
– enumerating properties – you would need an additional counter. Object.keys(obj).forEach
could work, but it only includes own properties; for…in
includes enumerable properties anywhere on the prototype chain.
What is the simple way to get value and index on For of loop out of an array in Javascript / ReactNative?
use this
for (const [index, value] of array.entries()) {
console.log(index, value);
}
Access to ES6 array element index inside for-of loop
Use Array.prototype.keys
:
for (const index of [1, 2, 3, 4, 5].keys()) { console.log(index);}
Using JavaScript count the number of elements equal to or higher than the index in a loop
You could reverse the array or sort descending, and find the index where the index (plus one) is greater than the value.
const
values = [0, 0, 0, 1, 1, 2, 3, 3, 5, 6, 6, 7, 20, 20, 20],
hIndex = [...values].reverse().findIndex((v, i) => v < i + 1);
console.log(hIndex);
How to get values from a object
Since dynamicList is an array - for in is not recommended ( you can check more here Why is using "for...in" for array iteration a bad idea? )
There are multiple array methods that you can use; in your case filter method is better:
function deleteTask(id) {
const shallowArray = dynamicList.filter( obj => obj.id !== id);
displayTasks()
}
Also it is usually better not to mutate the data directly, but to create a copy
Related Topics
Utf-8 Word Boundary Regex in JavaScript
Merge Two Arrays So That the Values Alternate
Getting Binary Content in Node.Js Using Request
Is There a Difference Between (Function() {...}()); and (Function() {...})();
How to Add Predefined Length to Audio Recorded from Mediarecorder in Chrome
JavaScript - Are Dom Redraw Methods Synchronous
How to Serialize an Object into a List of Url Query Parameters
How to Check Whether <Ng-Content> Is Empty? (In Angular 2+ Till Now)
Is It Evil to Use Eval to Convert a String to a Function
JavaScript Detect an Ajax Event
How to Build Query String with JavaScript
How to Stop a Window.Setinterval in JavaScript
Detecting Line-Breaks with Jquery
Destructuring and Rename Property
Angularjs Multiple Filter with Custom Filter Function