Very often we run in cases when we just have a collection of elements and a necessity to loop through it.<\/p>\n
EcmaScript5 suggests a simple So, if you’re tired of writing countless In case you need to perform some actions with array object here’s one more way with a little bit different syntax. Let’s say we want to check if an array contains a increasing by one sequense of numbers <\/p>\n Also note that undefined elements of an array don’t count while iterating<\/p>\n This approach works fine with a collection of DOM elements. Let’s suppose we have following structure<\/p>\n So, we can select Using forEach one can also iterate over object properties<\/p>\n Sometimes you might want to break Or, probably, you want to do something with the elements of an array until you find a special element and you will use Note, that forEach()<\/code> method for such purpose.<\/p>\nfor (var i = 0; i < arr.length; ++i)<\/code> loops, let’s look how it works.
\n
\n
\n
\n
\n
\n
\n[ulp id=’tCIwOngQUb3zSUuF’]
\n
\nFor example, we have an array of numbers and we want to output factorials of its elements<\/p>\n\r\n\t\tfunction fact(n) {\r\n\t\t\tif (n == 1 || n == 0)\r\n\t\t\t\treturn 1;\r\n\t\t\treturn n * fact(n - 1);\r\n\t\t}\r\n\t\t[ 0, 1, 2, 3 ].forEach(function(elem) {\r\n\t\t\tdocument.writeln(fact(elem)); \/\/ outputs 1 1 2 6\r\n\t\t});\r\n<\/pre>\n\r\n\t\tfunction outputElement(elem, ind, array) {\r\n\t\t\tif (ind == 0)\r\n\t\t\t\tdocument.writeln('arr[' + ind + '] = ' + elem + \"; Sequence started
\");\r\n\t\t\telse if (array[ind - 1] == elem - 1)\r\n\t\t \t\tdocument.writeln('arr[' + ind + '] = ' + elem + \"; Larger by 1 than previous
\");\r\n\t\t \telse\r\n\t\t \t\tdocument.writeln('arr[' + ind + '] = ' + elem + \"; Sequence failed
\");\r\n\t\t}\r\n\t\t[ 0, 1, 2, 4, 5, 6 ].forEach(outputElement);\r\n<\/pre>\n\r\n\t\tvar counter = 0;\r\n\t\t[ 0, , 1, , 2, , 3].forEach(function(element) {\r\n\t\t\t++counter;\r\n\t\t});\r\n\t\tdocument.writeln(counter); \/\/ outputs 4 not 7\r\n<\/pre>\n\r\n\t
\r\n\t\t
li<\/code> elements and iterate over them using following JS code<\/p>\n\r\n\t\tfunction fact(n) {\r\n\t\t\tif (n == 1 || n == 0)\r\n\t\t\t\treturn 1;\r\n\t\t\treturn n * fact(n - 1);\r\n\t\t}\r\n\t\tvar obj = document.getElementsByTagName(\"li\");\r\n\t\tArray.prototype.forEach.call(obj, function(elem) {\r\n\t\t\tdocument.writeln(fact(elem.innerText));\r\n\t\t});\r\n<\/pre>\n\r\n\t\tvar o = {\r\n\t\t\tfirst: '0',\r\n\t\t\tsecond: '1',\r\n\t\t\tthird: '2',\r\n\t\t\tfourth: '3'\r\n\t\t};\r\n\t\tObject.getOwnPropertyNames(o).forEach(function(element) {\r\n\t\t\tdocument.writeln(element + \" = \" + o[element]);\r\n\t\t});\t\t\r\n<\/pre>\nforEach<\/code> loop. In this case good practice way is to use every()<\/code> wich breaks looping when returns false<\/p>\n\r\n\t\t[ 0, 1, 2, 3, 4 ].every(function(element, index, array) {\r\n\t\t\tdocument.writeln(element);\r\n\t\t\treturn element < 3;\r\n\t\t});\r\n<\/pre>\nsome()<\/code><\/p>\n\r\n\t\t[ 0, 1, 2, 3, 4 ].some(function(element, index, array) {\r\n\t\t\tdocument.writeln(element);\r\n\t\t\treturn element == 3;\r\n\t\t});\r\n<\/pre>\nevery()<\/code> breaks the loop when returning false, otherwise some()<\/code> does it when returning true<\/p>\n