Easy Learning JavaScript nine: JavaScript objects and arrays

Many high-level programming languages are object-oriented, such as high-level programming languages such as C + +, C #, and Java, and what are the bases of an object-oriented language

What about this requirement? Let's detox a little bit about object-oriented knowledge.

An object-oriented language requires the developer to provide 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 to get the properties and methods of a class by another class (or classes)

(4) Polymorphism: the ability to write functions or methods that can be run in multiple ways

Because ECMAScript supports these requirements, it can be viewed as object-oriented. In ECMAScript, you cannot access the physical representation of an object, only

A reference to the object can be accessed. Every time you create an object, it is stored in a variable and is a reference to that object, not the object itself. So JavaScript is based on polygon

A weakly typed web page scripting language to the object.

An object type

The object type is a containing attribute (also called a field) and a method (which can also be called a function). Therefore, when creating the object type, it must be explained

Point. There are two common ways to create an object type number:

(1) using the new operator

    var box=new Object ();    Box.name= "Zhang San";//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) Literal notation

    var box={      name: "Zhang San",      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: Ibid.

(3) Comprehensive use

We have to pass in the case of multiple parameters, we need to sequentially input, in order to solve this tedious process, we can encapsulate a number of parameters

To an object type, using the object type as a parameter, we can also judge for non-existent or more-out arguments, which facilitates the invocation

Number and pass 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: "Zhang San",        age:23    };    box (obj);

Output: Zhang San

23

Two array types

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

can be adjusted. The side reflects that JS is a weakly typed 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 with 10 elements

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

(2) Creating an array with literal amounts

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

Create a complex array (which can be of various types)

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

The result of the page output is:

Methods in three-object

(1) Conversion method

objects or arrays have tolocalestring (), toString (), and valueof () methods. where ToString () and valueof () no matter who they rewrite, will return

Return the same value. The array will stitch 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 result of the page output is:

(2) Stack method

The ECMAScript array provides a way for the array to behave like other data structures. In other words, you can make the array like a stack, which can be limited

To insert and delete the data structure you want. The stack is a last-in-first-out data structure, where the newly added elements are first removed. While the insertion of stack elements and

Removed, only occurs at the top of the stack. The ECMAScript provides the push () and Pop () methods specifically for the array.

Picture of the stack manipulation 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. and the Pop () method

Removes the last element at the end of the array, reduces the length value 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 ();//The Element    document.write (box+ "<br/>") at the end of the divisor group;    document.write (Box.pop () + "<br/>");//Remove the element at the end of the array 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 at the end of the array, removing elements from the front end of the array. Through push () to

An element is added at the end of the array, and an element is removed from the front end of the array through the shift () method.

Picture of the queue manipulation 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 ();//An element    document.write (box+ "<br/>") in the front of the migration group;    document.write (Box.shift () + "<br/>");//Remove an element from the front of the array and return the removed element    document.write (box);

Output:

ECMAScript also provides an array of unshift () methods, which are the exact opposite of the shift () method. The Unshift () method is added to the front end 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 which the element will be added    document.write (box+ "<br/> ");    Box.pop ();//remove Element    document.write (box+ "<br/>") at the end of the array;    document.write (Box.pop () + "<br/>");//Remove the element at the end of the array and return the length of the array after the element is removed    document.write (box);

Output:

(4) Reorder method

There are already two methods in the array that are directly used for sorting: reverse () and sort ().

Reverse (): reverse sort

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

Sort (): 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    document.write (Box.sort ());//Sort from small to large again

If we experiment a lot, we might get back to this problem.

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

We can see from the results that this violates the result 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 methods for manipulating elements that are already contained in an array. The Concat () method can create a new array based on the current array. Slice () Fang

method to get the specified range element and create a new array based on the current 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 new array and add 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 the element 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 the elements from the index from 2 to 3 to form a new array    document.write (box1+ "<br/>");//Output 3    

Delete function in Splice

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

Insert function in Splice

    var box=[1,2,3,4,5];    var box1=box.splice (4,0,6);//Index 4 is inserted in the position of an element    document.write (box1+ "<br/>");//Returns the new array is empty, and does not intercept the element    document.write (box);//The position of the current array index is 4 inserts an element 1,2,3,4,6,5

The substitution function in splice

    var box=[1,2,3,4,5];    var box1=box.splice (4,1,6);//The element with index 4 is replaced, the replaced element consists of a new array    document.write (box1+ "<br/>");//Returns a new array 5    document.write (box);//The original array after being replaced 1,2,3,4,6

Easy Learning JavaScript nine: JavaScript objects and arrays