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.