Array Methods - Part-1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<link name="favicon" type="image/x-icon" href="https://skillzam.com/uploads/system/e353194f3b7cd1b75d69c3ab88041985.png" rel="shortcut icon" />
<title>Array Methods - Part-1</title>
</head>
<body>
<!--
ARRAY METHODS:
pop() : removes (pops) last element of an array.
push() : adds new items to the end of an array.
shift() : removes element at zeroth index & shifts values at consecutive indexes down, then returns the removed value.
unshift() : adds one or more elements to the beginning of array and returns the new length of the array.
includes() : returns true if an array contains a specified value.
indexOf() : returns the first index at which a given element can be found in the array, or -1 if it is not present.
concat() : merge two or more arrays and returns a new array.
join() : creates and returns a new string by concatenating all of the elements in an array (or an array-like object), separated by commas or a specified separator string.
reverse() : reverses an array in place and returns the reference to the same array.
slice() : returns a shallow copy of a portion of an array into a new array object selected from start to end ( end not included) where start and end represent the index of items in that array. The original array will not be modified.
splice() : changes the contents of an array by removing or replacing existing elements and/or adding new elements in place.
-->
<h1>Demo: Array Methods - Part-1 </h1>
<div>
<h2>Creating array & fetching array elements</h2>
<p id="para1"></p>
<p id="para2"></p>
</div>
<div>
<h2>Array Methods: pop( ) and push( ) </h2>
<p id="para3"></p>
<p id="para4"></p>
<p id="para5"></p>
</div>
<div>
<h2>Array Methods: shift( ) and unshift( )</h2>
<p id="para6"></p>
<p id="para7"></p>
<p id="para8"></p>
</div>
<div>
<h2>Array Methods: includes( ) and indexOf( )</h2>
<p id="para9"></p>
<p id="para10"></p>
<p id="para11"></p>
</div>
<div>
<h2>Array Method: concat( )</h2>
<p id="para12"></p>
</div>
<div>
<h2> Array Method: join( )</h2>
<p id="para13"></p>
</div>
<div>
<h2>Array Method: reverse( ) </h2>
<p id="para14"></p>
<p id="para15"></p>
</div>
<div>
<h2>Array Method: slice( )</h2>
<p id="para16"></p>
<p id="para17"></p>
</div>
<div>
<h2>Array Method: splice( )</h2>
<p id="para18"></p>
<p id="para19"></p>
</div>
<!-- JavaScript code Starts here -->
<script>
/************************************************/
// Creating array & fetching array elements
//
const players = ["Sachin", "Rohit", "Virat", "Dhoni", "Zaheer", "Suresh", "Rahul"];
let firstPlayer = players[0];
document.getElementById('para1').innerHTML =
`Array contains following elements : [${players}]`;
document.getElementById('para2').innerHTML =
`The first element of an array is ${firstPlayer}`;
/************************************************/
// Array Methods: pop( ) and push( )
//
document.getElementById('para3').innerHTML =
`Array elements before pop( ) : [${players}]`;
players.pop(); // Perform pop() on array
document.getElementById('para4').innerHTML =
`Array elements after pop("Rahul") : [${players}]`;
players.push("Rahul"); // Perform push() on array
document.getElementById('para5').innerHTML =
`Array elements after push("Rahul") : [${players}]`;
/************************************************/
// Array Methods: shift( ) and unshift( )
//
document.getElementById('para6').innerHTML =
`Array elements before shift( ) : [${players}]`;
players.shift(); // Perform shift() on Array
document.getElementById('para7').innerHTML =
`Array elements after shift( ) : [${players}]`;
players.unshift("Sachin"); // Perform unshift() on Array
document.getElementById('para8').innerHTML =
`Array elements after unshift("Sachin") : [${players}]`;
/************************************************/
// Array Methods: includes( ) and indexOf( )
//
document.getElementById('para9').innerHTML =
`Array contains following elements : [${players}]`;
players.includes("Zaheer"); //returns true
document.getElementById('para10').innerHTML =
`Does array includes "Zaheer" : ${players.includes("Zaheer")}`;
players.indexOf("Virat"); //returns the value 2
document.getElementById('para11').innerHTML =
`The index position of element "Virat" in an array is : ${players.indexOf("Virat")}`;
/************************************************/
// Array Method: concat( )
//
const goodWords = ["happy", "win"];
const badWords = ["sad", "lose"];
const words = goodWords.concat(badWords); // concatination of two arrays
document.getElementById('para12').innerHTML =
`The concatination of two arrays [${goodWords}] and [${badWords}] is : [${words}]`;
/************************************************/
// Array Method: join( )
//
const playerStr = players.join(); // returns a string 'Sachin,Dhoni,Virat,Rohit,Zaheer,Rahul'
document.getElementById('para13').innerHTML =
`The join( ) method will return a string : "${playerStr}"`;
/************************************************/
// Array Method: reverse( )
//
document.getElementById('para14').innerHTML =
`Array Before reverse( ) : [${players}]`;
players.reverse(); // reverse() the array values
document.getElementById('para15').innerHTML =
`Array After reverse( ) : [${players}]`;
players.reverse();
/************************************************/
// Array Method: slice( )
//
document.getElementById('para16').innerHTML =
`Array Before slice( ) : [${words}]`;
newWords = words.slice(0,2); // returns an array [happy] ; ( wont change the orginal array values)
document.getElementById('para17').innerHTML =
`Array After slice(0,2) will return new array: [${newWords}] `;
/************************************************/
// Array Method: splice( )
//
document.getElementById('para18').innerHTML =
`Array Before splice( ) : [${words}]`;
words.splice(3,1); // removes the last value of the array. (destructive in nature)
document.getElementById('para19').innerHTML =
`Array After splice(3,1) will return modified array: [${words}] `;
words.push("lose");
</script>
<!-- JavaScript code Ends here -->
</body>
</html>