Home>

From array to object

var myarr=["red", "blue", "yellow", "purple"];
myarr;//["red", "blue", "yellow", "purple"]
myarr [0];//"red"
myarr [3];//"purple"

Everyone is familiar with arrays,We can understand that a key corresponds to a value, and this key is in an array.Already defaulted (as in the above code,Its keys are 0, 1, 2, and 3 (values ​​are 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 we can learn:

1.The name of the object is hero.

2. Unlike array, the symbol "{" replaces "["

3. Object attributes (such as breed and occupation) are separated by symbols ","

4.The syntax of key and value is key:value

It should also be noted that regardless of whether the attribute (that is, the key) is placed in double quotesSingle quotes, or no quotes,Their results are the same,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 way is not to put attributes in quotes.Unless the name of the property is a special symbol,Such as numbers, or with spaces and so on.

This article is very simple,To be careful of,Defines the symbol [] of the array, and defines the symbol of the object as {}

Element, attribute, methodWhen learning arrays,We can say that the array contains elements,When it comes to objects,We can change that

var animal={
   name:"dog",   run:function () {
    alert ("running");
  }
}

name is the property, and run itself is a function,In this object,We call it a method.

Accessing Object PropertiesThere are two ways to access the properties of an object.

Use an array like:animal ["name"]

Dot access:animal.name

The first access method is suitable for any situation.But if the attribute is an invalid name,As mentioned in the previous section, the property name "1name" or "my name" is wrong to access in a case.Pay attention to this.

Let's look at an example of object access.

var book={
  name:"javascript fundation",  published:jixie.
  author:{
    firstname:"nicholas",    lastname:"xia"
  }
};

1. Get the firstname attribute of the author object

book.author.firstname //nicholas

2. Get the lastname property of the author object, we try to use another wording

book ["author"] ["lastname"] //xia

We can also use mixed access methods

book.author ["lastname"] or book ["author"]. lastname are all valid,Be flexible

In the case where the attribute is dynamic,Array access methods are generally used.

var key="lastname"
book.author [key];//xia

Invoking methods of an object

var hero={
breed:"turtle",occupation:"ninja",say:function () {
return "i am" + hero.occupation;
}
}
hero.say ();

The method of accessing the object is simple,Just a little,But you can also use arrays,Looks weird

As hero ["say"] ();

This is not recommended.Try to use dots when accessing objects.

Modifying properties and methodsBecause javascript is a dynamic language,So you can modify the properties and methods of the object at any time.See the following example

var hero=();

hero is an empty object.

typeof hero.breed;//undefined

The hero object has no breed attribute

Now you can add properties and methods

hero.breed="turtle";
hero.name="leonardo";
hero.sayname=function () {return hero.name;};

Calling method

hero.sayname ();//leonardo

Delete attribute

delete hero.name;//true
hero.sayname ();//Method failed

this

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

The meaning of this is the meaning of this object,Complex issues regarding this will be discussed later.

Constructor functionsAnother way to create objects is to use a constructor,See examples directly

function hero () {
 this.name="refaelo";
}
var hero=new hero ();
hero.name;//refaelo

The advantage of this method is that you can pass parameters when creating an object

function hero (name) {
  this.name=name;
  this.whoareyou=function () {
    return this.name;
  }
}
var hi=new hero ("nicholas");
hi.whoareyou ();//nicholas

When paying attention,Don't lose the new operator. . .

Global objectWe talked about global variables in the last few sections,As already said, we should try to avoid using global variables,When we have learned objects,We are looking at what is going on with global variables.In fact, a global variable is a property of the global object.If the host environment is a web browser, the global variable is window.

If we define var a=1;

We can understand it this way:

A global variable a,

As a property of window a. We can call window.a or window ["a"]

Look at the parseint ("123 m") of the predefined function;we can write as window.parseint ("123 m");

constructor propertyAfter the object is created,A hidden property has been 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 was created from,And only care about creating a new object similar to h2, use the following writing

var h3=h2.constructor ("nicholas");
h3.name;//nicholas

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

var o=();
o.constructor;//object ()
typeof o.constructor;//"functions"

In fact, the new object () is hidden, and a deeper level of application will be explained in later tutorials.

instanceof operatorUse instanceof to determine whether the object was created by the specified constructor.

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

It should be noted that after the instanceof is a reference, not a function, such as the wrong way of writing h instanceof hero ();//wrong

Function return objectYou can use the constructor to create an object.You can also create objects by returning them through ordinary functions

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

Create objects with this method

var o=factory ("one");
o.name

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

function c () {
 this.a=1;
 return {b:2};
}
var c2=new c ();
typeof c2.a //undefined
c2.b;//2

It shows that instead of returning this, the object {b:2} is returned. . Pay attention to this

Pass objectIf you pass an object to a function,Then a reference is passed.If you change this reference,This will change the original object.

Here is an example of object assignment

var original={name:"nicholas"};
var copy=original;
copy.name;//"nicholas";
copy.name="jason";
original.name;//"jason";

Modifying the attribute name of copy is equivalent to modifying the original attribute name

Objects are passed into functions,The same is true.

function modify (o) {
  o.name="jason"
}
var original={name:"nicholas"};
modify (original);
original.name;//jason

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

var fido={breed:"dog"};
var benji={breed:"dog"};
benji === fido;//false;
benji == fido;//false;

None of the above code is the same reference,So both are false

  • Previous Jsp programming method to get files and directories under the current directory and windows drive letter
  • Next Learn JavaScript closures with me