Using advanced array methods
Using the every method
The every method lets you process specific logic for each array element to determine whether any of them meet some condition.
The every method takes two parameters:
- The name of the function that should be processed for each element
- An optional reference to the array object
The following code uses the every method:
<body>
<input type="submit" onclick="everyMethod()" value="Every Method" /><br />
<div id="#div1"> </div>
<div id="#div2"> </div>
<!-- EVERY METHOD-->
<script type="text/javascript">
var everyMethod = function () {
var evenNumbers = new Array(0, 2, 4, 6, 8, 9, 10, 12);
document.getElementById("#div1").innerHTML =
("Array evenNumbers is : " + "[" + evenNumbers.toString() + "]");
var allEven = evenNumbers.every(evenNumberCheck, this);
if (allEven) {
document.getElementById("#div2").innerHTML =
("Array EVEN Elements : " + "[" + allEven + "]");
} else {
document.getElementById("#div2").innerHTML =
("False : Because 9 is an ODD number");
}
function evenNumberCheck(value, index, array) {
return (value % 2) == 0;
}
}
</script>
</body>
Using the some method
The some method works very much like the every method. The difference is that some checks only whether any item in the array meets the criteria.
The some method returns true if the called function returns true for any single element. If all elements in the array return false, the some method returns false.
You can use some to achieve the exact opposite of the every method when the some method returns false.
The following code uses the some method:
<body>
<input type="submit" onclick="someMethod()" value="Some Method" /><br />
<div id="#div1"> </div>
<div id="#div2"> </div>
<!-- SOME METHOD -->
<script type="text/javascript">
var someMethod = function () {
var evenNumbers = new Array(0, 2, 4, 6, 8, 9, 10, 12);
document.getElementById("#div1").innerHTML =
("Array evenNumbers is : " + "[" + evenNumbers.toString() + "]");
var allEven = evenNumbers.some(evenNumberCheck, evenNumbers);
if (allEven) {
document.getElementById("#div2").innerHTML =
("Array EVEN Elements : " + "[" + allEven + "]");
} else {
document.getElementById("#div2").innerHTML =
("There are no EVEN Elements in the Array evenNumbers");
}
function evenNumberCheck(value, index, array) {
return (value % 2) == 0;
}
}
</script>
</body>
Using the forEach method
The forEach method enables an application to process some logic against each item in the array. This method runs for every single item and doesn’t produce a return value.
Like with all the advanced methods, the elements are passed to the function in ascending index order.
The following code demonstrates the forEach method:
<body>
<input type="submit" onclick="forEachMethod()" value="forEach Method" /><br />
<div id="#div1"> </div>
<!-- forEach METHOD -->
<script type="text/javascript">
var forEachMethod = function () {
var sportsArray = ['soccer', 'basketball', 'hockey', 'football','rugby'];
document.getElementById("#div1").innerHTML =
("Array sportArray is : [ " + sportsArray.toString() + " ]" +
" <br> Ater SORTING using forEACH is : ");
sportsArray.sort().forEach(offerSport);
function offerSport(value, index, array) {
var sportsList = document.getElementById("sportsList");
var bullet = document.createElement("li");
bullet.innerText = (value);
sportsList.appendChild(bullet);
}
}
</script>
</body>
Using the filter method
The filter method provides a way to remove items for an array based on some processing done in the callback function.
The filter method returns a new array containing the elements that are included based on a return value of true or false from the callback function.
The following code demonstrates the filter method of Even elements in an Array:
<body>
<input type="submit" onclick="filterMethod()" value="filter Method" /><br />
<div id="#div1"> </div>
<div id="#div2"> </div>
<!-- FILTER METHOD-->
<script type="text/javascript">
var filterMethod = function () {
var evenNumbers = new Array(0, 2, 4, 6, 8, 9, 10, 12);
document.getElementById("#div1").innerHTML =
("Array evenNumbers is : " + "[" + evenNumbers.toString() + "]");
var allEven = evenNumbers.filter(evenNumberCheck, evenNumbers);
document.getElementById("#div2").innerHTML =
("Array only EVEN Elements using FILTER : " + "[" + allEven + "]");
function evenNumberCheck(value, index, array) {
return (value % 2) == 0;
}
}
</script>
</body>
Using the map method
The map method enables you to replace values in the array. Every element in the array is passed to a callback function.
The callback function’s return value replaces the value for the position in the array that was passed in.
The following code calculate the array squares after using the map method:
<body>
<input type="submit" onclick="mapMethod()" value="map Method" /><br />
<div id="#div1"> </div>
<div id="#div2"> </div>
<!-- MAP METHOD 2 -->
<script type="text/javascript">
var mapMethod = function () {
var numbers = [1, 2, 3, 4, 5, 6, 7, 8];
document.getElementById("#div1").innerHTML =
("Array numbers is : " + "[" + numbers.toString() + "]");
var squares = numbers.map(squareNumber, numbers);
document.getElementById("#div2").innerHTML =
("Array squares after using MAP : " + "[" + squares.toString() + "]");
function squareNumber(value, position, array) {
return value * value;
}
}
</script>
</body>
Using the reduce and reduceRight methods
The reduce and reduceRight methods are recursive. Each result of the callback function is passed back into the callback method as the previous return value along with the current element to be passed in.
The reduce method processes the elements of the array in ascending order, whereas the reduceRight processes the elements of the array in descending order.
The following example demonstrates using the reduce method to calculate a factorial:
<body>
<input type="submit" onclick="reduceMethod()" value="reduce Method" /><br />
<div id="#div1"> </div>
<div id="#div2"> </div>
<!-- REDUCE & REDUCERIGHT METHOD 2 -->
<script type="text/javascript">
var reduceMethod = function () {
var numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
document.getElementById("#div1").innerHTML =
("Array numbers is : " + "[" + numbers.toString() + "]");
var factorials = numbers.reduce(factorial);
function factorial(previous, current) {
return previous * current;
}
document.getElementById("#div2").innerHTML =
("Array factorials using REDUCE : " + "[" + factorials.toString() + "]");
}
</script>
</body>
Ads Right
