Detailed explanation of JavaScript objects and array _javascript techniques

Source: Internet
Author: User
Tags array length arrays data structures

Many advanced programming languages are object-oriented, such as C + +, C #, and Java, and other advanced programming languages, what are the basic requirements of an object-oriented language? Let's Tongsou some knowledge about object-oriented.
An object-oriented language needs to provide developers with four basic capabilities:

    • (1) Encapsulation: the ability to store relevant information, regardless of data or method, in an object
    • (2) Aggregation: The ability to store an object within another object
    • (3) Inheritance: The ability of another class (or classes) to get properties and methods of a class
    • (4) Polymorphism: the ability to write functions or methods that can be run in multiple ways

Because ECMAScript supports these requirements, it can be considered object-oriented. In ECMAScript, the physical representation of an object cannot be accessed, and only references to the object can be accessed. Each time an object is created, it is stored in a variable as a reference to the object, not the object itself. JavaScript is therefore a weakly typed web scripting language based on object-oriented.
one, type of object
The object type is a containing attribute (also called a field) and a method (also called a function). So when you create an object type, it must be an important point to illustrate. There are two ways to create an object type number generally:
(1) using the new operator

var box=new Object (); 
Box.name= "John";//Create Attributes and initialize 
box.age=23; 
Box.run=running ();//Create method 
function running () {return 
   "I'm Chinese!" "; 
} 
document.write (typeof box+ "<br/>"); 
document.write (box.name+ "<br/>"); 
document.write (box.age+ "<br/>"); 
document.write (Box.run); 

Output: Object
Tom
23
I am a Chinese!
(2) notation of literal quantities

var box={ 
 Name: "John", 
 age:23, 
 run:function () {return  
   "I'm Chinese!" "; 
 } 
}; 
document.write (typeof box+ "<br/>"); 
document.write (box.name+ "<br/>"); 
document.write (box.age+ "<br/>"); 
document.write (Box.run ()); 

Output: Ditto
(3) Comprehensive use
When we pass multiple parameters, we need to enter them sequentially, in order to solve this tedious process, we can encapsulate multiple parameters
To an object type, using the object type as a parameter, we can also judge the arguments that are not present or extra, so that the call letter is convenient
Number and passing parameters.

function box (obj) { 
  if (obj.name!=undefined) document.write (obj.name+ "<br/>"); 
  if (obj.age!=undefined) document.write (obj.age+ "<br/>"); 
  if (obj.love!=undefined) document.write (obj.love+ "<br/>"); 
} 
var obj={ 
  Name: "John", 
  age:23 
}; 

Output: John
23
two, array type
The array in ECMAScript is very different from other languages, and the elements in the array in JS can be any data type, and the size of the array is
can be adjusted. From the side reflects JS is a weak type language. There are two ways to create the number of array types:
(1) using the new operator (new can be omitted)

var box=new Array (1,2,3,4); 
document.write (typrof box+ "<br/>");//array belongs to Object type 
document.write (box);//Output 1,2,3,4 

Index subscript starting from 0

var box=new Array (1,2,3,4); 
document.write (box[0]+box[1]+box[2]+box[3]);//Output 1,2,3,4 

Create an array that contains 10 elements

var box=new array (10);//create array By default must be a number, must be a numeric 
box[3]=4;//initialize the elements of the array 
box[5]=6; 
document.write (box)//output,,, 4,,6,,,, 

(2) Create an array using literal quantities

var box=[1,2,3,4]; 
document.write (typrof box+ "<br/>");/output Object 
document.write (box.length+ "<br/>");//output Array length 4 
document.write (box);//Output 1,2,3,4 

Create a complex array (can be of various types)

var box=[ 
  { 
   name: ' John ', 
   age:23 
  },//object type 
  [1,2,3,4],//array type 
  ' JS ',//string type 
  25+ 25,//number type 
  new Array (1,2,3)//array type 
]; 
document.write (typeof box+ "<br/>"); 
document.write (box[0].name+ "<br/>"); 
document.write (Box[3]); 

The results of the page output are:

Iii. methods in the object
(1) Conversion method
objects or arrays have tolocalestring (), toString (), and valueof () methods. where ToString () and valueof (), no matter who is rewritten, will return
Back to the same value. The array will concatenate each value in string form, separated by commas.

var box=[1,2,3,4]; 
document.write (box+ "<br/>");//Output 1,2,3,4 
document.write (box.tostring () + "<br/>");/output 1,2,3,4 
document.write (box.valueof () + "<br/>");//Output 1,2,3,4 
document.write (box.tolocalestring ());//Output 1, 2,3,4 

By default, array strings are separated by commas. If you use the Join () method, you can use different delimiters to build this string

var box=[1,2,3,4]; 
document.write (box+ "<br/>"); 
document.write (typeof box+ "<br/>"); 
document.write (Box.join ("-") + "<br/>"); 
document.write (typeof Box.join ("-")); 

The results of the page output are:

(2) Stack method
the ECMAScript array provides a way to make arrays behave like other data structures. That is, you can make arrays like stacks, and you can limit
System inserts and deletes the data structure of the thought. A stack is a LIFO data structure in which the most recently added element is first removed. While the stack element inserts and
Remove, only occurs at the top of the stack. ECMAScript provides a push () and Pop () method specifically for the array.
Picture of the Stack action array element:

The push () method can accept any number of arguments, add them to the end of the array one by one, and return the length of the modified array. The Pop () method is
Removes the last element from the end of the array, reduces the length of the array, and then returns the removed element.

var box=[1,2,3,4]; 
document.write (box+ "<br/>"); 
Box.push (5,6);//add Element 
document.write (box+ "<br/>") at the end of the array; 
document.write (Box.push (7,8) + "<br/>");//add element at the end of the array and return the length of the array after adding the element 
document.write (box+ "<br/>"); 
Box.pop ();//Move the element 
document.write (box+ "<br/>") at the end of the divisor group; 
document.write (Box.pop () + "<br/>");//move the element at the end of the divisor and return the removed element 
document.write (box); 

Output:

(3) Queue method
The Stack method is LIFO, and the queue method is FIFO. The queue adds elements to the end of the array, removing the elements from the front end of the array. by push () to
Add an element to the end of the array, and then remove an element from the front end of the array by using the Shift () method.
Picture of the queue action array element

var box=[1,2,3,4]; 
document.write (box+ "<br/>"); 
Box.push (5,6);//add Element 
document.write (box+ "<br/>") at the end of the array; 
document.write (Box.push (7,8) + "<br/>");//add element at the end of the array and return the length of the array after adding the element 
document.write (box+ "<br/>"); 
Box.shift ();//Move an element 
document.write (box+ "<br/>") at the front of the divisor group; 
document.write (Box.shift () + "<br/>");//move an element in the front of the divisor group and return the removed element 
document.write (box); 

Output:

ECMAScript also provides an unshift () method for the array, which is the exact opposite of the function of the shift () method. The Unshift () method is added to the front of the array
An element.

var box=[1,2,3,4]; 
document.write (box+ "<br/>"); 
Box.unshift (0);//Add an element 
document.write (box+ "<br/>") to the front of the array; 
document.write (Box.unshift ( -1) + "<br/>");//Add an element to the front of the array and return the length of the array to add the element 
document.write (box+ "<br/> "); 
Box.pop ()///remove element 
document.write (box+ "<br/>") at the end of the array; 
document.write (Box.pop () + "<br/>");//remove element at end of array, and return the length of array after removing element 
document.write (box); 

Output:

(4) Reordering methods
There are already two methods in the array that are used directly to sort: reverse () and sort ().
Reverse (): Reverse Ordering

var box=[1,2,3,4,5]; 
Box.reverse (); 
document.write (box+ "<br/>");//Output 54321 
document.write (Box.reverse ());/reverse again, output 12345 

Sort (): sorted from small to large

var box=[3,2,6,4,1,5]; 
Box.sort (); 
document.write (box+ "<br/>");//Output 1,2,3,4,5,6 

If we have more than a few experiments, we may be confronted with such problems.

var box=[0,15,10,1,5]; 
Box.sort (); 

We can see from the results that this goes against the results we want, the solution:

function Compare (value1,value2) { 
  if (value1<value2) { 
   return-1; 
  } 
  else if (value1>value2) {return 
   1; 
  } 
  else{return 
   0;  
  } 
var box=[0,15,10,1,5]; 
Box.sort (compare); 
document.write (box);//Output 0,1,5,10,15 

(5) Operation method
JS provides a number of ways to manipulate elements that are already contained in an array. The Concat () method can create a new array based on the current array. Slice () square
Method can get the specified range element based on the current array and create a new array. The main purpose of the splice () method is to insert elements into the middle of the array.
A

var box=[1,2,3,4,5]; 
var box1=box.concat (6);//create a new array and add a new element 
document.write (box1+ "<br/>");//Output 1,2,3,4,5,6, 
document.write (box);//The original array does not change 

B

var box=[1,2,3,4,5]; 
var box1=box.slice (2)///Remove elements after index 2 to form a new array 
document.write (box1+ "<br/>");/output 3,4,5 
document.write ( box);//The original array does not change 

C

var box=[1,2,3,4,5]; 
var box1=box.slice (2,3);//Remove elements from index 2 to 3 to form a new array 
document.write (box1+ "<br/>");//Output 3 
document.write (box);//The original array does not change 

Delete feature in Splice

var box=[1,2,3,4,5]; 
var box1=box.splice (0,2);//intercept two elements starting with 0 to form a new array 
document.write (box1+ "<br/>"); Returns the intercepted element 1,2 
document.write (box);//The element being intercepted by the current array is deleted and the output 3,4,5 

Insert function in Splice

var box=[1,2,3,4,5]; 
An element document.write (box1+ "<br/>") is inserted at the position of the Var box1=box.splice (4,0,6)//index 4 
;//The new array is empty and no element 
is intercepted document.write (box);//The position where the current array index is 4 inserts an element 1,2,3,4,6,5 

The substitution work in splice

var box=[1,2,3,4,5]; 
var box1=box.splice (4,1,6);//The element with index 4 is replaced, the substituted elements form a new array 
document.write (box1+ "<br/>");//return new Array 5 

The above is a detailed description of JavaScript objects and arrays, and hope to help you learn.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.