JavaScript every day must learn the array and object parts _javascript tips

Source: Internet
Author: User
Tags array length object object wrapper javascript array

Object Section

Object type

Object is an unordered collection that can hold objects of any type and all other objects are inherited from this object.

There are two ways to create an object type, one is by using the new operator, and one is the literal representation.

1. Use the new operator to create an object
var obj = new Object ()//note uppercase, or write directly to object ()
Note that the new object is generated by the word "," which is equivalent to the literal writing obj = {}.

2. Use literal method to create:

 var obj = {
 name: ' Trigkit4 ',
 age:21
};//semicolon preferably plus 

Object () constructor (except FF) is not invoked when you declare an object object with a literal

Object.prototype Objects

All constructors have a prototype attribute that points to a prototype object.

Object.prototype.print = function () {Console.log (this)};

var obj = new Object ();

Obj.print ()///Object 

Instance obj inherits Object.prototype's properties and methods directly
1. Objects are only a special kind of data. Objects have properties and methods. JavaScript is an object-oriented language, but JavaScript does not use classes. JavaScript is based on [prototype][1], not on the class.

2. Attribute: is a variable that is subordinate to a particular object. Method: A function that only a specific object can call.

A 3.js object is a collection of properties and methods. A method is a function that is a member of an object. A property is a value or a set of values (in the form of an array or an object) and is a member of an object.

A 4.js object is based on a constructor function, and when you create a new object using a constructor function, you can say that you instantiated a new object. property is a variable inside a constructor function.
Objects instantiated with constructor functions:
cat = new Animal ();
JavaScript is an object-based (object-based) language, and almost all of the things you encounter are objects. However, it is not a true object-oriented programming (OOP) language because its syntax has no class (class).

 <script type= "Text/javascript" >
 //object is a set of name/value pairs
  var browser = {  //object is the name that is enclosed by curly braces
   : "Firefox",
   kernel: "Gecko"
  };
</script>// 
access to object properties via dot (.) or "[]"
 browser.name   //"Firefox"
 browser["kernel"]//"Gecko" 

An object (OBJCT) is a collection of properties, each of which consists of a "name/value pair", and JS also defines a special object-an array, which is an ordered set of numbered values.

JS also defines a special object-a function, which is an object that has executable code associated with him, executes code by calling a function, and returns the result of the operation.

JS does not have a class, but it takes a new name is "prototype object", so "class = = Prototype Object", see details: JavaScript Class (i)

Difference and relation between class (prototype object) and object (instance)
1. Class (prototype object) is abstract, is conceptual, represents a class of things.
2. The object is concrete, practical, and represents a specific thing.
3. A class (prototype object) is a template for an object instance, which is an individual of the class.
A common misconception is that the literal value of a number (literal) is not an object. This is because of an error in the JavaScript parser, which attempts to resolve the point operator as part of the floating-point number face value.

There are many workarounds to make the literal value of a number look like an object.
2..toString (); The second dot can be parsed correctly.
2. toString (); Notice the space in front of the dot number
(2). toString (); 2 is calculated first

Delete attribute

The only way to delete a property is by using the delete operator, setting the property to undefined or null and not actually deleting the attribute, but simply removing the association of the property and the value.

JavaScript Object-oriented three major features

Encapsulation: Do not consider internal implementation, only consider functional use
Inheritance: Inheriting new objects from existing objects
Polymorphism: Called polymorphism, refers to a variety of States that refer to different situations,

1. Package

Encapsulation is to classify things that belong to the same category (including attributes and behavior) into a class for ease of use. For example, this stuff can be encapsulated in the following way:

People
Age (Attribute i)
Height (attribute II)
Sex (Attribute III)

Act (one of the actions)
Walk (Act II)
Speak (Act III)
}

Benefits of Encapsulation:

Encapsulation protects the integrity of the internal data;
Encapsulation makes it easier to refactor objects;
Weakening the coupling between modules to improve the reusability of objects;
Help avoid namespace conflicts;

Look at one of the following examples:

 <script type= "Text/javascript" > 
   var boy = {};//Create an empty object
     boy.name = "xiaoming";//To assign a value according to the properties of the prototype object
     Boy.age = 12;< C4/>var girl = {};
     Girl.name = "Little Red";
     Girl.age = ten;
 </script> 

This is the simplest package that encapsulates two attributes in an object. However, there are two disadvantages to this writing, one is that if you generate more than a few instances, it is very troublesome to write, and the second is between the example and the prototype, there is no way to see what connection.

Constructor pattern

To solve the problem of generating an instance from a prototype object, JavaScript provides a constructor (constructor) pattern.

The so-called "constructor", in fact, is a normal function, but the internal use of the this variable. The new operator is used on the constructor to generate an instance, and the this variable is bound to the instance object.

For example, the prototype object of boy and Girl can now be written like this:

 <script type= "Text/javascript" > 
  function Person (name,age) {
    this.name = name;
    This.age = age;
  }
</script> 

We can now generate the instance object.

 <script type= "Text/javascript" > 
  var boy = new Person ("xiaoming",);
  var girl = new Person ("Xiao Hong");

  alert (boy.name); Xiao Ming
  alert (boy.age);//12
</script> 

Then boy and girl automatically contain a constructor attribute that points to their constructors.

Alert (Boy.constructor = = person); True

alert (girl.constructor); Output whole string constructor code, try it Yourself
prototype mode JavaScript stipulates that each constructor has a prototype attribute that points to another object. All of the properties and methods of this object are inherited by the instance of the constructor.

This means that we can define the invariant properties and methods directly on the prototype object.

<script type= "Text/javascript" >
function Person (name,age) {
  this.name = name;
  This.age = age;
}

Person.protype.type = "human";

Person.protype.eat = function () {
  alert ("Eat rice");
}
</script> 

Then, build the instance:

 <script type= "Text/javascript" >
var boy = new Person ("xiaoming", "a");
var girl = new Person ("Little Red", "ten");

alert (boy.type);//Human
boy.eat ()//Eat
</script> 

The type attribute and the Eat () method of all instances are in fact the same memory address, pointing to the prototype object, thus increasing the efficiency of the operation.
alert (boy.eat = = girl.eat);//true
The prototype property is a built-in property that specifies the constructor function that the object extends.
The following code adds a new property size to the animal constructor function, which is the prototype property of the Cat object. By using the prototype property, all objects extending the animal constructor function can access the Size property

Cat = new Animal ("Feline", "Meow", "Walk/run");
Cat.prototype.size = "fat"; 

In this case, the size property of all animal objects is "fat". The prototype defaults to a new instance of object, and because it is still an object, you can add new properties to the object. Just as a style is an object of JavaScript, you can continue to add properties after style.

 <script type= "Text/javascript" >
  /* defines a person class *
  /function person (_name,_age,_salary) {
   // The exposed property of the person class, and the exposed property of the class is defined by: "this. Property name" This
   . Name=_name;
   The private property of the person class, the private property of the class is defined by: Var
   age=_age;
   var salary=_salary;

   Defines the public method (privileged method) of the person class, and the method of exposing the class is defined by
: "This.functionname=function () {...}"
   This. Show=function () {
 alert ("age=" +age+ "\ T" + "salary=" +salary);//access to private properties of the class in the public method is allowed
   }
</script > 

When an object looks up a property, it first iterates through its own properties, and if not, it continues to look for the object referenced by [[Prototype]], and if no more, continues to find [[Prototype]]. [[Prototype]] refers to the object, and so on, until [[Prototype]].....[[prototype]] is undefined ([[Prototype] of object] is undefined)

Simply put, a reference to another object is saved by the object's [[Prototype]], which is used to look up the property, which is the prototype chain.

Null object

The role of JS in assigning null values to variables is:
Assigning a null pointer makes it easy to understand that the variable is intended to be used for storing objects. Also easy to adjust the wrong

The Global Window object

Any global function or variable in JavaScript is a property of window.
The Self object is exactly the same as the Window object, and self is typically used to confirm that it is within the current form.

The main objects of window are as follows:
JavaScript Document Object
JavaScript Frames Objects
JavaScript History Objects
JavaScript Location Objects
JavaScript Navigator Objects
JavaScript Screen Object

Several common methods
valueof () Method: Returns the original value of the specified object
The split () method splits the string into an array of strings and returns this array.
The IndexOf () method returns the location of the first occurrence of a specified string value in a string.
The substring () method extracts characters from a string mediation between two specified subscripts.
The substr () method extracts a specified number of strings from the string, starting at the startpos position.
The join () method is used to put all elements in an array into a string.
Arrayobject.join (separator)
The reverse () method reverses the order of elements in an array.
The slice () method returns the selected element from an existing array.

Object literal Amount

Object literals are used to create procedures that contain a large number of properties, as follows:

 <script type= "Text/javascript" >
 var company = {
  name: "Microsoft",
  ages:39,
  employees:99000,< C5/>ceo: "Nadella"
 };  
</script> 

Note that property and property values are separated by colons (:), and multiple properties separated by commas (,). Object literals can also define methods, just write a function on the object's properties, which is an anonymous function that only needs to write his method name ().

 <script type= "Text/javascript" >
var dog = {
 name: "Husky",
 age:2, Run:function
 () {
    return "123";
}
Alert (Dog.run ());//If you enter Dog.run, then the code for the function part after it pops up
</script> 

Base value type Wrapper

JS has five basic value types: number, string, Boolean, NULL, and undefined. In addition to null and undefined, the other three have so-called basic wrapper objects. You can create a wrapper object by using the built-in constructor number (), String (), and Boolean ().

 var num = new number (a);
Console.log (typeof num);//object object () 
method
 Object ()//Return an empty object object
(undefined)//return an empty
object object (NULL)//Returns an empty object

(1)//equal to the new number (1)
object (' foo ')///equivalent to the new String (' foo ')
object (TRUE)//equivalent to NE W Boolean (True)

object ([])//Returns the original Array
object ({})//Returns the original Object object
(function () {})//returns the original function 

Array Part

1.Array objects

Array object: Provides support for creating arrays of any data type.
Arrayobj = new Array ()
Arrayobj = new Array ([size])
Arrayobj = new Array ([element0[, element1[, ...) [, ELEMENTN]]]

Definition: var arr = [2,3,45,6]; var arr = new Array (2,4,5,7)

The two are defined without any difference, [] The performance is high because the code is short.

Using arrays and Object literals: var atest = []; When you create an array, it's a good choice to use an array literal; Similarly, object literals can also be used to conserve space. The following two lines are equal, but the use of object literals is shorter:

 var otest = new Object; Try not
 to use var otest = {};//best choice, or var 0Test = []; 

Traversal in order to achieve the best performance of traversing an array, it is recommended to use a classic for loop.

 var list = [1, 2, 3, 4, 5, ... 100000000];
for (var i = 0, L = list.length i < l i++) {
 console.log (list[i]);
 

The code above has a process of caching the length of an array through L = list.length.

Array Constructor

Because the array's constructor is somewhat ambiguous in how it handles arguments, it is always recommended that you use the literal syntax of an array-[]-to create an array.

So the following code will be confusing:
New Array (3, 4, 5); Results: [3, 4, 5]
New Array (3)//Result: [], this array length is 3
You should try to avoid using array constructors to create new arrays. It is recommended that you use the literal syntax of an array. They are shorter and more concise, thus increasing the readability of the code.

The properties of array arrays

3 Properties of array Arrays: Length property, prototype property, constructor property

1.length Properties

The Length property represents the size of the array, which is the number of elements. Because the index of an array always starts with 0, the upper and lower bounds of an array are: 0 and length-1 respectively. Unlike most other languages, the length property of a JavaScript array is variable, which requires special attention.

2.prototype Properties

Returns a reference to the object type prototype. The prototype property is common to object.

For array arrays, use the following example to illustrate the purpose of the prototype property.
Adds a method to the array object that returns the maximum element value in the array. To do this, declare a function, add it to the Array.prototype, and use it.

 function Array_max () 
{ 
var i,max=this[0]; 
for (i=1;i<this.length;i++) 
{ 
if (max<this[i]) 
max=this[i]; 
} 
return max; 
} 

Array.prototype.max=array_max; 
var x=new Array (1,2,3,4,5,6); 
var Y=x.max (); 

After the code executes, Y saves the maximum value in the array x, or says 6.

3.constructor Properties

Represents a function that creates an object. Description: The constructor property is a member of all objects that have prototype. They include all of the JScript intrinsic objects except the global and math objects. The constructor property holds a reference to a function that constructs a particular object instance.

For example:

 x = new String ("Hi"); 
if (x.constructor==string)//To be processed (condition is true). 
//or 
function myfunc{ 
//Functional body. 
} 

Y=new MyFunc; 

if (Y.constructor==myfunc)//To be processed (condition is true).
For arrays:
y = new Array ();

Array Object method

Sort () method

Grammar
Arrayobject.sort (SortBy)
SortBy Optional. Specify the sort order. Must be a function.
var arr = [11,2,28,4,5,1];
Console.log (Arr.sort ());//return [1, 11, 2, 28, 4, 5]
for Mao here 11, 28 not in order to arrange it? This is because sort with no parameters is sorted in the order of character encoding.

So, what if you want the array elements to be sorted by small to large? Look at the following code:

 var arr = [11,2,28,4,5,1];
 Console.log (Arr.sort (a,b) {return
  A-b;//return [1, 2, 4, 5, one,]
 }); 

If you want to sort by other criteria, you need to provide a comparison function that compares two values, and then returns a number that describes the relative order of the two values. The comparison function should have two parameters A and B, and the return value is as follows:
If a is less than B, a value less than 0 is returned in the sorted array before a should appear in B.
If a equals B, it returns 0.
If a is greater than B, a value greater than 0 is returned.

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.

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.