Javascript Array Methods | Free Text Host

Share this text:

Report Abuse

Javascript Array Methods - posted by guest on 2nd June 2020 04:36:18 PM

<!DOCTYPE html>

<head>

<title>Array Methods Example</title>

<style>

body {

background: black;

}

#title {

width: 100%;

height: 50px;

background: gray;

color: papayawhip;

border: 3px solid green;

text-align: center;

font-size: 42px;

}

#concat,

#join,

#reverse,

#slice,

#splice,

#indexof,

#fill,

#unshift,

#push,

#shift,

#pop {

width: 75%;

margin-left: 10%;

height: auto;

margin-top: 10px;

background: white;

border: 5px solid green;

padding: 20px;

opacity: 0.5;

}

#concat:hover,

#join:hover,

#reverse:hover,

#slice:hover,

#splice:hover,

#indexof:hover,

#fill:hover,

#unshift:hover,

#push:hover,

#shift:hover,

#pop:hover {

cursor: pointer;

opacity: 1;

box-shadow: 0px 0px 30px aqua, 0px 0px 60px red, 0px 0px 60px red;

}

#concat:hover,

#join:hover,

#reverse:hover,

#slice:hover {

background: gray;

}

#concat>table {

background: black;

color: white;

font-size: 15px;

}

</style>

</head>

<body>

document.getElementById("title").innerHTML = "Array Methods()";

// 1. concat()

let str = "<font color='red' size='6px'><center>1. Concat() is used to Concat one or more Array/Value in Array <br>- It is Return New Array</center><hr></font><b>Array 1</b><table border=1><tr>";

let array1 = [];

for (let i = 0; i < 5; i++) {

str = str + "<th>Array 1[" + i + "]</th>";

array1[i] = (i + 1) * 2;

}

str = str + "</tr><tr>";

for (let i = 0; i < array1.length; i++) {

str = str + "<td>" + array1[i] + "</td>";

}

str = str + "</tr></table><b>Array 2</b><table border=1><tr>";

let array2 = [];

for (let i = 0; i < 5; i++) {

str = str + "<th>Array 2[" + i + "]</th>";

array2[i] = (i + 1) * 11;

}

str = str + "</tr><tr>";

for (let i = 0; i < array2.length; i++) {

str = str + "<td>" + array2[i] + "</td>";

}

let array3 = array1.concat(array2);

str = str + "</tr></table><br><b>New Array <font color='blue' size=5>array1.concat(</font><font color='red' size=5>array2)</font></br><table border=1><tr>";

for (let i = 0; i < array3.length; i++) {

str = str + "<th>Array 3[" + i + "]</th>";

}

str = str + "</tr><tr>";

for (let i = 0; i < array3.length; i++) {

str = str + "<td>" + array3[i] + "</td>";

}

str = str + "</tr></table>";

let array4 = array2.concat(array1);

str = str + "</tr></table><br><b>New Array <font color='blue' size=5>array2.concat(</font><font color='red' size=5>array1)</font></br><table border=1><tr>";

for (let i = 0; i < array4.length; i++) {

str = str + "<th>Array 4[" + i + "]</th>";

}

str = str + "</tr><tr>";

for (let i = 0; i < array4.length; i++) {

str = str + "<td>" + array4[i] + "</td>";

}

str = str + "</tr></table>";

document.getElementById("concat").innerHTML = str;

// 2. Join() Method

str = "<font color='red' size='6px'><center>2. Join() is Used to Change Separator in Array <br>- It is Return String</center></font><hr>";

array1 = [];

for (let i = 0; i < 10; i++) {

array1[i] = i + 1;

}

str = str + "<font size=5 color='blue'>Array1 Default Separator : </font><font size=5>" + array1 + "</font><br>";

str = str + "<br><font size=5 color='blue'> Use array1.join(' | ') : </font><font color=red size=5>" + array1.join(" | ") + "</font><br>";

str = str + "<br><font size=5 color='blue'> Use array1.join(' / ') : </font><font color=red size=5>" + array1.join(" / ") + "</font><br>";

str = str + "<br><font size=5 color='blue'> Use array1.join(' @ ') : </font><font color=red size=5>" + array1.join(" @ ") + "</font><br>";

str = str + "<br><font size=5 color='blue'> Use array1.join(' => ') : </font><font color=red size=5>" + array1.join(" => ") + "</font><br>";

str = str + "<br><font size=5 color='blue'> Use array1.join(' OR ') : </font><font color=red size=5>" + array1.join(" OR ") + "</font><br>";

document.getElementById("join").innerHTML = str;

// 3. Reverse() Method

str = "<font color='red' size='6px'><center>3. Reverse() Is Reverse all Element in Array <br> - It is Affected existing Array</center></font><hr><br>";

array1 = ["ABC", "XYZ", "PQR", "GHK", "OMN", "TFS", "IJL"];

str = str + "<font size=5 color='black'>Existing Array : <font color=darkblue size=5>" + array1 + "</font><table border=1><tr>";

for (let i = 0; i < array1.length; i++) {

str = str + "<th>Array[" + i + "]</th>";

}

str = str + "</tr><tr>";

for (let i = 0; i < array1.length; i++) {

str = str + "<td>" + array1[i] + "</td>";

}

array1.reverse();

str = str + "</tr></table><br><font color='black' size=5>Using array.reverse() : </font><font color='darkblue' size=5>" + array1 + "</font><table border=1><tr>";

for (let i = 0; i < array1.length; i++) {

str = str + "<th>Array[" + i + "]</th>";

}

str = str + "</tr><tr>";

for (let i = 0; i < array1.length; i++) {

str = str + "<td>" + array1[i] + "</td>";

}

str = str + "</tr></table>";

document.getElementById("reverse").innerHTML = str;

// 4. Slice() Method

str = "<font color='red' size='6px'><center>4. Slice() Create New Array From Existing Array Specified by Starting and Ending Position <br> - It Return New Array</center></font><hr><br>";

str = str + "<font size=5>Array<table border=1><tr>";

array1 = [];

let k = 2, j;

for (let i = 0; i < 10; i++) {

str = str + "<th>Array[" + i + "]</th>";

}

str = str + "</tr><tr>";

for (let i = 0; i < 10; i++) {

j = k;

array1[i] = j;

k = k + j;

str = str + "<td>" + array1[i] + "</td>";

}

str = str + "</tr><tr><th> Array[0]</ th> ";

for (let i = 9; i > 0; i--) {

str = str + "<th>Array[-" + i + "]</th>";

}

str = str + "</tr></table></font>";

array2 = array1.slice(1, 5);

str = str + "<br><b><font size=5>Use <font color='red'>array2=array1.slice(1,5)</font><table border=1><tr>";

for (let i = 0; i < array2.length; i++) {

str = str + "<th>Array 2[" + i + "]</th>";

}

str = str + "</tr><tr>";

for (let i = 0; i < array2.length; i++) {

str = str + "<td>" + array2[i] + "</td>";

}

str = str + "</tr></table></font>";

array2 = array1.slice(-5, -1);

str = str + "<br><b><font size=5>Use <font color='red'>array2=array1.slice(-5,-1)</font><table border=1><tr>";

for (let i = 0; i < array2.length; i++) {

str = str + "<th>Array 2[" + i + "]</th>";

}

str = str + "</tr><tr>";

for (let i = 0; i < array2.length; i++) {

str = str + "<td>" + array2[i] + "</td>";

}

str = str + "</tr></table></font>";

array2 = array1.slice(-9, -3);

str = str + "<br><b><font size=5>Use <font color='red'>array2=array1.slice(-9,-3)</font><table border=1><tr>";

for (let i = 0; i < array2.length; i++) {

str = str + "<th>Array 2[" + i + "]</th>";

}

str = str + "</tr><tr>";

for (let i = 0; i < array2.length; i++) {

str = str + "<td>" + array2[i] + "</td>";

}

str = str + "</tr></table></font>";

array2 = array1.slice(-5, 9);

str = str + "<br><b><font size=5>Use <font color='red'>array2=array1.slice(-5,9)</font><table border=1><tr>";

for (let i = 0; i < array2.length; i++) {

str = str + "<th>Array 2[" + i + "]</th>";

}

str = str + "</tr><tr>";

for (let i = 0; i < array2.length; i++) {

str = str + "<td>" + array2[i] + "</td>";

}

str = str + "</tr></table></font>";

document.getElementById("slice").innerHTML = str;

// 5. Splice() Method

str = "<font color='red' size='6px'><center>5. Splice() -Remove Value from array and Also Insert <br> It's Affect Existing Array</center></font><hr><br>";

array1 = [];

for (let i = 0; i < 10; i++) {

array1[i] = (i + 1) * (i + 1);

}

str = str + "<font size=6><b>array1 = " + array1 + "</b><br>";

array1.splice(3, 3);

str += "<br>array1.splice(3,3) : " + array1 + "<br>";

array1.splice(3, 0);

str += "<br>array1.splice(3,0) : " + array1 + "<br>";

array1.splice(3, 2, "Hello");

str += "<br>array1.splice(3,2,'Hello') : " + array1 + "<br>";

array1.splice(3, array1.length);

str += "<br>array1.splice(3,array1.length) : " + array1 + "<br></font>";

document.getElementById("splice").innerHTML = str;

//6. IndexOf() Method

str = "<font color='red' size='6px'><center>6. IndexOf() - Find Index Using Value <br> If item not found then return -1 </center></font><hr><br>";

array1 = ["xyz", "pqr", "abc", "xyz", 10, "Hello"];

str = str + "<br><font size=6><b>Array1 = " + array1 + "</b><br>";

let index = array1.indexOf("10");

str = str + "<br>index = array1.indexOf(''10'') : " + index;

index = array1.indexOf(10);

str = str + "<br>index = array1.indexOf(10) : " + index;

index = array1.indexOf("xyz");

str = str + "<br>index = array1.indexOf(''xyz'') : " + index;

index = array1.indexOf("xyz", 1);

str = str + "<br>index = array1.indexOf(''xyz'',1) : " + index;

index = array1.indexOf("abc", -1);

str = str + "<br>index = array1.indexOf(''abc'',-1) : " + index;

document.getElementById("indexof").innerHTML = str;

// 7. Fill() Method

str = "<font color='red' size='6px'><center>7. Fill() -Fill Value in Array <br> It Affect Existing Array </center></font><hr><br>";

array1 = ["Hello", "Xyz", "Hiii", "Abc", "Pqr", 101, 2020];

str = str + "<br><font size=6><b>Array1 = " + array1.join(" | ") + "</b><br>";

array1.fill("<b>hi</b>", 2, 3);

str = str + "<br><font size=6>Array1.fill(''hi'',2,1) = " + array1.join(" | ");

array1.fill("<b>How are You</b>", 6, 7);

str = str + "<br><font size=6>Array1.fill(''How Are You'',6,7) = " + array1.join(" | ");

array1.fill("<b>" + 2020 + "</b>", 0, 7);

str = str + "<br><font size=6>Array1.fill(2020,0,7) = " + array1.join(" | ");

array1.fill("<b>Fill</b>");

str = str + "<br><font size=6>Array1.fill(''Fill'') = " + array1.join(" | ");

array1 = new Array(3).fill("<b>Empty Array</b>");

str = str + "<br><br><b><font size=6>Array1=Array(3).fill(''Empty Array'') : </b>" + array1.join(" | ");

document.getElementById("fill").innerHTML = str;

// 8. Unshift() Method

str = "<font color='red' size='6px'><center>8. Unshift() - Add Value in Beginning <br>It Affect Existing Array and Return New Length of Array </center></font><hr><br>";

array1 = ["Hello", "PQR", 20, "XYZ", "ABC", 1001];

str = str + "<br><font size=6><b>Array1 : " + array1.join(" , ");

str = str + "<br>Length = " + array1.length;

array1.unshift("hello");

str = str + "<br><br>array.unshift(''hello'') : " + array1.join(" , ");

array1.unshift("Dell", "HP");

str = str + "<br>array.unshift(''Dell'',''HP'') : " + array1.join(" , ");

let length = array1.unshift(5);

str = str + "<br>length = array.unshift(5) : " + array1.join(" , ");

str = str + "<br>length = " + length;

document.getElementById("unshift").innerHTML = str;

//9. Push() Method

str = "<font color='red' size='6px'><center>9. Push() - Add Value at the End of The Array <br>It Affect Existing Array and Return New Length of Array </center></font><hr><br>";

array1 = ["Hello", "PQR", 20, "XYZ", "ABC", 1001];

str = str + "<br><font size=6><b>Array1 : " + array1.join(" , ");

str = str + "<br>Length = " + array1.length;

array1.push("Hello");

str = str + "<br><br>array.push(''Hello'') : " + array1.join(" , ");

array1.push(1010, 2020);

str = str + "<br>array.push(1010,2020) : " + array1.join(" , ");

length = array1.push(-100);

str = str + "<br>length = array.push(-100) : " + array1.join(" , ");

str = str + "<br>Length = " + length;

document.getElementById("push").innerHTML = str;

// 10. Shift() Method

str = "<font color='red' size='6px'><center>10. Shift() - Remove Value at the Beginning and also Return Removed Value <br>It Affect Existing Array </center></font><hr><br>";

array1 = ["Hello", "PQR", "ERT", 20, "XYZ", "ABC", 1001];

str = str + "<br><font size=6><b>Array1 : " + array1.join(" , ");

str = str + "<br>Length = " + array1.length;

array1.shift();

str = str + "<br><br>array1.shift() : " + array1.join(" , ");

array1.shift();

str = str + "<br>array1.shift() : " + array1.join(" , ");

let removedValue = array1.shift();

str = str + "<br>removedValue = array1.shift() : " + array1.join(" , ");

str = str + "<br>removableValue = " + removedValue;

document.getElementById("shift").innerHTML = str;

// 11. Pop() Method

str = "<font color='red' size='6px'><center>11. Pop() - Remove Value at the End and also Return Removed Value <br>It Affect Existing Array </center></font><hr><br>";

array1 = ["Hello", "PQR", "ERT", 20, "XYZ", "ABC", 1001];

str = str + "<br><font size=6><b>Array1 : " + array1.join(" , ");

str = str + "<br>Length = " + array1.length;

array1.pop();

str = str + "<br><br><font size=6> array1.pop() : " + array1.join(" , ");

array1.pop();

str = str + "<br><font size=6> array1.pop() : " + array1.join(" , ");

array1.pop();

str = str + "<br><font size=6> array1.pop() : " + array1.join(" , ");

removedValue = array1.pop();

str = str + "<br><font size=6>removedValue = array1.pop() : " + array1.join(" , ");

str = str + "<br>removedValue = " + removedValue;

document.getElementById("pop").innerHTML = str;

</script>

</body>

</html>

Report Abuse