Introduction
This chapter demonstrates about the Prototype.js Arrays which expands all native JavaScript arrays with some powerful methods and following are the concepts are covered in this chapter.
- Array and Array Methods
Description
Prototype expands all native JavaScript arrays with some powerful methods which can be done in two ways those are shown below.
clear
Which method is used to clear an array is shown in below snippet.
[jscript]
<html>
<head>
<title>Prototype examples</title>
<script type = "text/javascript" src = "/javascript/prototype.js"></script>
<script>
function showResult() {
var guys = ['Sam', 'Justin', 'Andrew', 'Dan'];
alert("Before using clear" );
guys.each(function(item) {
alert(item );
});
guys.clear();
alert("After using clear" );
guys.each(function(item) {
alert(item );
});
}
</script>
</head>
<body>
<p>Click the button to get the result.</p>
<br />
<br />
<input type = "button" value = "Result" onclick = "showResult();"/>
</body>
</html>
[/jscript]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
When user click on the result button a box will appear as shown in below image.
clone
Clone returns a duplicate of the array, leaving the original array intact is as shown in below snippet.
[jscript]
<html>
<head>
<title>Prototype examples</title>
<script type = "text/javascript" src = "/javascript/prototype.js"></script>
<script>
function showResult() {
var oldArr = ['Sam', 'Justin', 'Andrew', 'Dan'];
var newArr = oldArr.clone();
alert("Guys in old Arr" );
oldArr.each(function(item) {
alert(item );
});
alert("Guys in new Arr" );
newArr.each(function(item) {
alert(item );
});
}
</script>
</head>
<body>
<p>Click the button to see the result.</p>
<br />
<br />
<input type = "button" value = "Result" onclick = "showResult();"/>
</body>
</html>
[/jscript]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
first
Which method returns the first item of an array if the array empty is as shown in below snippet.
[jscript]
<html>
<head>
<title>Prototype examples</title>
<script type = "text/javascript" src = "/javascript/prototype.js"></script>
<script>
function showResult() {
var arr = ['Sam', 'Justin', 'Andrew', 'Dan'];
alert("First element is : " + arr.first() );
}
</script>
</head>
<body>
<p>Click the button to see the result.</p>
<br />
<br />
<input type = "button" value = "Result" onclick = "showResult();"/>
</body>
</html>
[/jscript]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
last
Which method returns the last item of an array or undefined if array is empty is as shown in below image.
[jscript]
<html>
<head>
<title>Prototype examples</title>
<script type = "text/javascript" src = "/javascript/prototype.js"></script>
<script>
function showResult() {
var arr = ['Apples', {good: 'yes', bad: 'no'}, 3, 34];
alert("Last Element : " + arr.last() );
}
</script>
</head>
<body>
<p>Click the button to see the result.</p>
<br />
<br />
<input type = "button" value = "Result" onclick = "showResult();"/>
</body>
</html>
[/jscript]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
- Which mixes in the Enumerable module and it brings in a ton of methods.
- Which adds some few extra methods these are documented in present section only.
Key Points
- Clear will clear an entire array.
- Prototype expands all native java script arrays.
- Clone returns duplicate of the array.