Examples of JavaScript-related knowledge about object manipulation-basic knowledge

Source: Internet
Author: User

From array to object

var myarr = [' Red ', ' blue ', ' yellow ', ' purple ']; 
myarr;//["Red", "blue", "yellow", "purple"] 
myarr[0];//"Red" 
myarr[3];//"Purple" 


Array everyone is familiar with it, we can understand that a key corresponds to a value, and this key in the array, has been default (such as the above code, its key is 0,1,2,3 value is red,blue,yellow,purple).
Then an object can be understood as an array of custom keys. Look at the following code

var hero ={ 
 breed: ' Turtle ', 
 Occupation: ' Ninja ' 


The above code lets you know:
1. The name of the object is called Hero.
2. And arrays differ by using the symbol ' {' instead of ' ['
3. Objects ' properties (such as breed and occupation) are delimited by symbols ', '
The syntax of 4.Key and VALUE is Key:value
It is also necessary to note that regardless of whether the attribute (that is, key) is placed in double quotes, single quotes, or no quotes, their results are the same, and the following code is the same

var obj={a:1,b:2}; 
var obj={' A ': 1, ' B ': 2}; 
var obj={"A": 1, "B": 2}; 

The recommended notation is to not put attributes in quotes. Unless the name of the attribute is a special symbol, such as a number, or with a space, and so on.

This article is very simple, to note that the definition of the array of symbols [], and the definition of the object's symbol {}

elements, attributes, methods
when we learn an array, we can say that the array contains elements, and when it comes to objects, we can change the argument.

var animal={ 
   name: ' Dog ', 
   run:function () { 
    alert ("Running"); 
  } 
 

Name is the property, and run itself is a function, and in this object we call the method.

Accessing the properties of an object
There are two ways to access the properties of an object.
In the form of an array such as: animal[' name '
Access by point: Animal.name
The first method of access is appropriate for any situation. However, if the attribute is an invalid name, it is an error to access it in a dot, as described in the previous section as a property named ' 1name ' or ' My name '. This point should be noted.

The following is a specific example of an object access

var book = { 
  name: ' Javascript fundation ', 
  Published:jixie. 
  author:{ 
    FirstName: ' Nicholas ', 
    LastName: ' Xia ' 
  } 
; 


1. Get the FirstName property of the Author object

Book.author.firstname//nicholas


2. To get the LastName property of the Author object, we try to use a different notation

book[' author ' [' LastName ']//xia

We can also use a mixed access method
book.author[' LastName '] or book[' author '].lastname These methods are effective and flexible to use

In the case where the attribute is dynamic, the method of accessing the object by an array is generally used.

var key = ' LastName ' 
Book.author[key];//xia 

Method of calling Object

var hero = { 
breed: ' Turtle ', 
Occupation: ' Ninja ', 
say:function () {return 
' I am ' + hero.occupation;
   } 
} 
Hero.say (); 


The way to access an object is simple, a little bit, but it can be done in an array, and it looks weird.
such as hero[' say '] ();
Do not recommend this type of writing, access to objects as far as possible to use a point of the way.

Modifying properties and methods
because JavaScript is a dynamic language, you can modify the properties and methods of an object at any time. See the following example

var hero={}; 

Hero is an empty object.

typeof hero.breed;//undefined 

Shows that the Hero object has no breed properties
Next you can add properties and methods.

Hero.breed = ' turtle '; 
Hero.name = ' Leonardo '; 
Hero.sayname = function () {return hero.name;}; 

Call method

 Hero.sayname ();//leonardo

Delete attribute

Delete hero.name;//true 
hero.sayname ();//Method failure 

This

var hero = { 
  name: ' Rafaelo ', 
  sayname:function () {return 
   this.name   
 } 
} Hero.sayname ();//rafaelo 

This is the meaning of this object, and the complex question about this is discussed later.

Constructors (constructor functions)
another way to create an object is by using a constructor, see the example directly

function Hero () { 
 this.name = ' Refaelo '; 
} 
var hero = new Hero ();
Hero.name;//refaelo

The advantage of this approach is that you can pass in parameters when you create an object

function Hero (name) { 
  this.name = name; 
  This.whoareyou = function () {return 
    this.name; 
  } 
} 
 
var hi = new Hero (' Nicholas '); 
Hi.whoareyou ();//nicholas 

To be aware of, do not drop the new operator ...
Global Objects
in the last few verses we have said global variables, we have said that we should try to avoid the use of global variables, when we learned the object, we are looking at the global variable what is going on, in fact, the global variable is a global object a property. If the host environment is a Web browser, the global variable is window.
If we define var a = 1;
We can understand this:
A global variable A,
As a property of window a. We can call WINDOW.A or window[' a '.
Then look at the parseint (' 123 m ') of the predefined function; we can write it as Window.parseint (' 123 m ');

Constructor Property
after the object is established, a hidden attribute is created in the background, constructor.

H2.constructor;//hero (name)

Because the constructor property is a reference to a function. If you don't care what the H2 object is created by, and only care about creating a new object and the H2 similarity, use the following notation

var h3 = H2.constructor (' Nicholas '); 

Let's take a look at the meaning of the following wording

var o = {}; 
O.constructor;//object () 
typeof o.constructor;//"Functions" 

is actually hiding the new Object (), a deeper level of application after several tutorials in the description.

instanceof operator
use instanceof to determine whether an object was created by a specified constructor.

function Hero () { 
} 
var h = new Hero (); 
var o = {}; 
H instanceof hero;//true 
h instanceof object;//false 


Note that the instanceof is followed by a reference that is not a function such as the wrong wording H instanceof Hero ();//Error

function returns an object
you can use constructors to create objects, or you can return objects from normal functions to create objects

function Factory (name) {return 
  { 
   name:name 
 }; 
} 

Create an object in this way

var o = Factory (' one '); 
O.name


Let's take a look at an example of a relatively rare constructor return object

function C () { 
 THIS.A = 1; 
 return {b:2}; 
} 
 
var C2 = new C (); 
typeof c2.a//undefined 
c2.b;//2 

Indicates that the object {B:2} is returned instead of returning this. This should be noted.

Passing objects
If you pass an object into a function, a reference is passed. If you change the reference, you will change the original object.
Here is an example of an object assignment

var original = {name: ' Nicholas '}; 
var copy =original; 
copy.name;//' Nicholas '; 
Copy.name = ' Jason '; 
original.name;//' Jason '; 


Modifying the Copy property name is equivalent to modifying the original property name
object to the function, the same is true.

function Modify (o) { 
  o.name = ' Jason ' 
} 
var original={name: ' Nicholas '}; 
Modify (original); 
Original.name;//jason 


Comparison of objects
A comparison of two objects if true, then they are references to the same object.

var fido ={breed: ' Dog '}; 
var Benji ={breed: ' Dog '}; 
 
Benji===fido; False 


The above code is not the same reference, so all false

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.