©2018  LUVCODING                             

HUDDERSFIELD

UK

luvcoding
  • Grey Facebook Icon
  • Grey Twitter Icon
  • Grey Google+ Icon
  • Grey YouTube Icon
  • Grey Pinterest Icon
luvcodings.com

ARRAYS in Javascript

 Array objects in ​The JavaScript are used in the construction of arrays. Similar to lists (in many programming languages),  arrays are high-level objects ( data structure),  consisting of a collection of elements, each identified by at least one array index or key. Unlike a class object, array elements may or may not be related to each other.

How to create an array

Example 1:

var colors = ['red',  'blue', 'green']; //create an array with 3 similar elements.

var numbers = [23,  -100, 90.4];

       var an_Array = ['John', 'is' 'here',  90.4, -12, 'dogs',  'African']; //create an array with 6 dissimilar elements.

 

Example 2:

Starting with an empty array

var an_Array =[];

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

        let cube = Math.pow(i, 3);

      an_Array.push(cube); //populate the array

}

console.log( an_Array.length); //display number of item in the array

Example 3:

Starting with an empty array

var an_Array =[];

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

        let cube = Math.pow(i, 3);

        let another_arr=[i, cube];// create an array of each i and its cube 

      an_Array.push(another_arr); //populate the empty array by adding  an array of cube and i.

}

console.log( an_Array.length); //display number of item in the array

Example 4:

var array1 = new Array(a, b, 12, 'man');

console.log(array1); // [1, 2, 3]

console.log(array1.length); // 3

 

How to access an array

var an_Array = ['John', 'is' 'here',  90.4, -12, 'dogs',  'African'];

Example 1:

let third_item = an_Array[2]; // Gets the string 'here' in array index[2]

let  last_item = an_Array[an_Array.length-1]; // Gets the last item in index position--- array length -1 (since the index starts at zero (0))

console.log( an_Array.length)

 

Checking all the elements in the array

Depending on the elements in the array (whether they are similar or not), there various ways to loop through them.

var an_Array1 = ['John', 'is' 'here',  90.4, -12, 'dogs',  'African'];

var an_Array2 = [24, 20, 12, 10, 100];

Example 1:

Using forEach()

  an_Array1.forEach(function(e) {

            console.log(e);

    }); //displays all the items in the array on the console---Because forEach takes every element of the array and execute your order on each of them.

Example 2:

Using forEach()

  an_Array2.forEach(function(e, ) {

            console.log(e*e);

    }); //displays the square of all the items in the array on the console. Notice that all the items in the array are similar (numbers) 

Example 3:

Using for----in:

var t;

for(t in  an_Array2);

      let t1=an_Array2 [t]

            console.log(t1*t1);

    }); //displays the square of all the items in the array on the console. Notice that all the items in the array are similar (numbers) 

Example 4:

Using for----length:

var t;

for(t =0;  t< an_Array2.length;  t++);

      let t1=an_Array2 [t]

            console.log(t1*t1);

    }); //displays the square of all the items in the array on the console. Notice that all the items in the array are similar (numbers) 

Other array Methods

 

   pop( )------Removes the item from the end of an Array

   shift()-----Removes the item from the front of an Array

   unshift(an item)----Adds an item to the front of an Array

  indexOf(an item)-----Finds the index of an item in the Array

  splice(the index position, number of times)---Removes an item by index position, a given number of times

Note : The splice() method adds item to an array,

                removes items to and from an array, and

               return the removed item(s).

e.g 1:

var animals = ["Dog", "Goat", "Cow", "Lion"];
 animals.splice(1, 0, "Cat");// returns ---Dog, Cat, Goat, Cow, Lion ---because the splice method says, go to index position (1), do not remove anything (0), then add Cat in that position 1.

e.g 2:

animals.splice(1,  2);// returns Dog, Lion---because the splice method says, go to index position (1), do not add anything, but remove the  2 items from  that position , ---- ( "Goat", "Cow") 

Example use of array Methods

<html>
<head>
</head>
<body>
    <img id="source_image" alt=".." src='C:\Users\Grace\Desktop\LUVPIX.JPG' /><br><br>
    <h1>WORKING WITH STRINGS</h1><br><br>
    
    Enter your name here: <input id="myInput" type="text">
    <input id="btn" type="button" value = 'See your profession' onclick='c()'>
    <p id="demo"></p>
    
<script>
    function c(){
        var jobs =['Accountant', 'Banker', 'Curator', 'Doctor', 'Entertainer', 'Fisherman'];


        var get_names=document.getElementById("myInput").value;
        var start_name=get_names.charAt(0).toUpperCase();
        var all_input=start_name+get_names.slice(1);
        
        
        jobs.forEach(function(e){
            let e1=e.charAt(0).toUpperCase();
            if (e1===start_name){
            //if(e1.match(/anything/i)){
                document.getElementById("demo").innerHTML = 'Your name is:'+all_input + ','+' ' + 'So you are a:' + ' '+jobs[jobs.indexOf(e1.charAt(0)+e.slice(1))];
            }
        });
    }
</script>
</body>
</html>

 

The code above display your profession based on your name, you can try re-writing this code without the array and see what it looks like, you can compare the length of both codes

Related