The Array Object is used to store multiple values in a single variable name.
Each stored value becomes an array element, it has assigned an 'index number' (starting from 0). With this index you can refer to any element of that Array.
There are various ways to create an array:
<script> var ar_name1 = new Array('CoursesWeb', 'lessons', 5); // or var ar_name2 = new Array(); ar_name2[0] = 'CoursesWeb'; ar_name2[1] = 'lessons'; ar_name2[2] = 5; </script>
<script> var ar_name3 =['tutorials', 'programming', 78]; // or var ar_name4 =[]; ar_name4[0] = 'tutorials'; ar_name4[1] = 'programming'; ar_name4[2] = 78; </script>
To access the elements of an Array
, you use an 'index number' that provides access to each element of the array by its position in the array.
The syntax to assign the first element of an array to a variable is the following:
var sites = ['coursesweb.net', 'marplo.net', 'gamv.eu']; var a_site = sites[1]; var other_site = sites[2]; document.write('<p>'+a_site+'</p>'); // marplo.net
After you have created an array, you can add new elements or modify existing items in that array.
To add or modify a value in an array, assign a new value to the element with a specified index number.
push()
method.var array_name =['v1']; array_name.push('v2', 'v3');
length
property.(array.length -1)
.//array with 2 elements let arr =['HTML', 'PHP']; //modify the second element arr[1] ='Tutorial JS'; //adds a new item after the last element arr.push('New item'); //test, arr has 3 items document.write('<br>arr has '+ arr.length +' elements. The second value is: '+ arr[1]);
The elements of an Array can easily be parsed with the for()
instruction, or with the forEach()
method.
for()
, traverses and displays the value of each item of an array.
var tutorials = ['php', 'html', 'css', 'javascript']; //writes each element of the 'tutorials' array for(i=0; i<tutorials.length; i++) { document.write('<br>'+ tutorials[i]); }
forEach()
method calls a 'callback
' function for each element in the array.var callbackF =(va, index, array)=>{ //code of the function }
'val' is the value of current item.
'index' (optional) is the item index
'array' (optional) is the traversed array.
forEach()
, traverses and shows the index and value of each element in an array.
//the callback function let parseArr =(v, i)=>{ //writes the index and value of current item document.write('<br>'+ i +' - '+ arr[i]); } //array with 4 elements let arr =['HTML', 'CSS', 'JavaScript', 'PHP']; //parses the array with forEach() and the parseArr() function arr.forEach(parseArr);
JavaScript contains many methods to work with the elements of an array. A list with these methods can be found at the page from: coursesweb.net/javascript/methods-array-object-js
Here is a few examples.
- Checking whether a variable is an array. It is applied the method: Array.isArray()
.
let arr =['CoursesWeb.net', 'GamV.eu', 90]; //if arr is an array, shows the first element if(Array.isArray(arr)) document.write('- First elm.: '+arr[0]);
sort()
method.
let arr =['ef', 'a8', 9, 78]; arr.sort(); //sorts in alphabetical order console.log(arr); //[78, 9, 'a8', 'ef']
reduce()
method with a callback function.
const arr =[1, 2, 3, 4]; //sum of the elements in arr const ar_sum = arr.reduce((a, b)=>a+b); //product of elements in arr const ar_prd = arr.reduce((a, b)=>a*b); document.write('<p>The sum of the numbers from [1, 2, 3, 4] is: '+ar_sum+'; The product: '+ar_prd+'</p>');
<div id='dv1'>JS, Bidimensional array</div> <script> //defines a bidimensional array (the second item is an array) let arr =[ 'Web develop', ['html', 'css', 'javascript'], 'xyz' ]; //the index of last item in the inner array (which is at arr[1]) let ix = arr[1].length -1; //gets the value of first item in 'arr', and the last from the inner array let title = arr[0]; let tutor = arr[1][ix]; //adds the values in #dv1 document.getElementById('dv1').innerHTML ='<h3>'+ title +'</h3>Tutorial '+ tutor; </script>
<object type="application/x-shockwave-flash" data="file.swf" width="500" height="250"> <param name="src" value="file.swf" /> Your browser not support SWF. </object>
input:focus { background-color: #88fe88; }
var jsnstr = '{"url": "http://coursesweb.net/", "title": "Web Development Courses"}'; var obj = JSON.parse(jsnstr); alert(obj.url);
if (file_put_contents("file.txt", "content")) echo "The file was created"; else echo "The file can not be created";