JS (array, object)

Keywords: Javascript Attribute

1. The most important type in JS is the object
1. Objects are sets of name/value pairs, or sets of string-to-value mappings.

var book = {
   topic:"js";     //The value of the attribute "topic" is "js"
   fat:true        //The value of the attribute "fat" is true
};

2. Access object properties by "." or "[]"

book.topic                   //"js"
book["fat"]                  //Another way to get attributes
book.author = "Flanagan";    //Create a new property by assignment
book.contents = {}           //{} is an empty object, it has no attributes

3.js also supports arrays (lists indexed by arrays)

primes[primes.length -1]    //The last element of an array
var empty = []              //[] is an empty array with 0 elements
empty.length                //Output is 0

4. Arrays and objects can contain an array or object

var points = [            //An array with two elements
  {x: 0,y: 0},            //Each element is an object
  {x: 1,y: 1}             
];
var data = [              //An object with two attributes
  trial1: [[1,2],[3,4]],  //Each property is an array
  trial2: [[2,3],[4,5]]   //The elements of an array are also arrays.
]

5. The most common expression in js:

3+2                          // 5 addition
3-2                          // 1 subtraction
3*2                          // 6 multiplication
3/2                          // 1.5 Division
points[1].x - points[0].x    // 1 More complex operands can also work properly
"3"+"2"                      // 32 String Link
var count = 0;               //Define a variable
count += 2;                  //Self-increasing 2: the same as "count = count + 2;"
count *= 3;                  //Increase 3: the same as "count = count * 2;"

6. Make a 9*9 table with two-dimensional arrays

var table = new Array(10);                        //The table has 10 rows
for(var i=0;i<table.length;i++){
    table(i) = new Array(10);                     //Each row has 10 columns
    for(var row=0;row<table.length;row++){
        for(var col=0;col<table.length;col++){
            table[row][col] = row*col;
        }
    }
} 

7. Use multidimensional arrays to compute
var product = table5; //35

8.shift() deletes the first array element and "shifts" all other elements to a lower index

var cars = ["jeep","bwm","benchi","vovor"];
cars.shift();
document.getElementById("demo").innerHTML = cars;   

The shift() method returns the string "displaced":
<p id="demo1"></p>
<p id="demo2"></p>
<p id="demo3"></p>
<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo1").innerHTML = fruits;
document.getElementById("demo2").innerHTML = fruits.shift();
document.getElementById("demo3").innerHTML = fruits;
</script>
demo1 : Banana,Orange,Apple,Mango
demo2 : Banana
demo3 : Orange,Apple,Mango

9.unshift() (at the beginning) adds new elements to the array and "returns the displacement" of the old elements
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits;
function myFunction() {

 fruits.unshift("Lemon");
 document.getElementById("demo").innerHTML = fruits;

}

10. Since JavaScript arrays belong to objects, elements can be deleted using JavaScript delete operators

<p id="demo1"></p>
<p id="demo2"></p>
<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo1").innerHTML =
"The first kind of fruit is:" + fruits[0];
delete fruits[0];
document.getElementById("demo2").innerHTML =
"The first kind of fruit is:" + fruits[0];    

Using delete leaves undefined holes in the array. Use pop() or shift() instead

11. The splice () method can be used to add new items to an array:

<button onclick="myFunction()">Have a try</button>
<p id="demo1"></p>
<p id="demo2"></p>
<script>
  var fruits = ["Banana", "Orange", "Apple", "Mango"];
  document.getElementById("demo1").innerHTML = "Primitive array:<br>" + fruits;
   function myFunction() {
      fruits.splice(2,0, "Lemon", "Kiwi");
      document.getElementById("demo2").innerHTML = "New array:<br>" + fruits;
   }
</script>

The first parameter (2) defines the location (stitching) where new elements should be added.
The second parameter (0) defines how many elements should be deleted.
The remaining parameters ("Lemon", "Kiwi") define the new elements to be added.
The splice() method returns an array containing deleted items:

12.JavaScript Array Method
12(1).js method tostring() converts an array into a comma-separated string of array values

  var fruits = ["Banana", "Orange", "Apple", "Mango"];
  document.getElementById("demo").innerHTML = fruits.toString();
  //The output is:
             Banana,Orange,Apple,Mango

(2) The jion() method can also combine all array elements into a string
It behaves like tostring(), and can also specify separators.

   var fruits = ["Banana", "Orange","Apple", "Mango"];
   document.getElementById("demo").innerHTML = fruits.join(" * "); 
   //Result:
       Banana * Orange * Apple * Mango
       

13.Popping and Pushing
Popping and Pushing refer to:
Pop-up items from arrays, or push items to arrays

Popping:
The pop() method deletes the last element from the array

  var fruits = ["Banana", "Orange", "Apple", "Mango"];
  fruits.pop();              // Delete the last element ("Mango") from fruits
  document.getElementById("demo").innerHTML = fruits;
  //Result:
      Banana,Orange,Apple

The pop() method returns the value of "ejected"

  var fruits = ["Banana", "Orange", "Apple", "Mango"];
  document.getElementById("demo").innerHTML = fruits.pop();  
  //Result: 
      Mango
      

pushing:
push() method (at the end of the array) adds a new element to the array

 var fruits = ["Banana", "Orange", "Apple", "Mango"];
 document.getElementById("demo").innerHTML = fruits;
 function myFunction() {
   fruits.push("Kiwi");
   document.getElementById("demo").innerHTML = fruits;
 }
 //Result:   
     Banana,Orange,Orange,Mango,Kiwi

The push() method returns the length of the new array (add a new array and return the length):

 var fruits = ["Banana", "Orange", "Apple", "Mango"];
 document.getElementById("demo1").innerHTML = fruits;    
 function myFunction() {
   document.getElementById("demo2").innerHTML = fruits.push("Lemon");
   document.getElementById("demo1").innerHTML = fruits;
 }
 //Result:
      Banana,Orange,Orange,Mango,Kiwi
      5
      
      

Displacement element
Displacement is the same as pop-up, but it deals with the first element rather than the last one.
The shift() method deletes the first array element and "shifts" all other elements to a lower index.

   var fruits = ["Banana", "Orange", "Apple", "Mango"];
   fruits.shift();            // Delete the first element "Banana" from fruits
   document.getElementById("demo").innerHTML = fruits;
   //Result: 
       Orange,Apple,Mango

shift() method returns a string of "removed" (the first element)

  var fruits = ["Banana", "Orange", "Apple", "Mango"];
  document.getElementById("demo").innerHTML = fruits.shift();  
  //Result:
      Banana

The unshift() method (at the beginning) adds new elements to the array and "returns the displacement" of the old elements

  var fruits = ["Banana", "Orange", "Apple", "Mango"];
  document.getElementById("demo").innerHTML = fruits;
  function myFunction() {
    fruits.unshift("Lemon");
    document.getElementById("demo").innerHTML = fruits;
  }
  //Result:
      Lemon,Banana,Orange,Apple,Mango

unshift() method returns the length of the new array

 var fruits = ["Banana", "Orange", "Apple", "Mango"];
 document.getElementById("demo2").innerHTML = fruits.unshift("Lemon");
 //Result:
     5

Change elements
Access array elements by using their index numbers:
The array index (subscript) starts at 0. [0] is the first element of the array, [1] is the second element, [2] is the third element.

var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo1").innerHTML = fruits;
fruits[0] = "Lemon";
document.getElementById("demo2").innerHTML = fruits;

Result:

   Banana,Orange,Apple,Mango
   Lemon,Orange,Apple,Mango

The length attribute provides a simple way to add new elements to an array:

var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits;    
function myFunction() {
  fruits[fruits.length] = "Lemon";
  document.getElementById("demo").innerHTML = fruits;
}
//Result:
   Banana,Orange,Apple,Mango,Lemon


Delete elements
Since JavaScript arrays belong to objects, elements can be deleted using JavaScript delete operators:

<p id="demo1"></p>
<p id="demo2"></p>    
<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo1").innerHTML =
"The first kind of fruit is:" + fruits[0];
delete fruits[0];
document.getElementById("demo2").innerHTML =
"The first kind of fruit is:" + fruits[0];
</script>
//Result:
    //The first fruit is Banana.
    //The first fruit is undefined.

Using delete leaves undefined holes in the array. Use pop() or shift() instead.

Posted by Masna on Wed, 04 Sep 2019 22:18:26 -0700