Examples of object manipulation in JavaScript

From array to object

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

Arrays are familiar, we can understand for a Key corresponds to a Value, and this Key in array, has been the default (such as the above code, its key are respectively 0,1,2,3 value red, blue, yellow, purple).
One object is then interpreted as an array for custom Key. Look at the following code

var hero ={ 
 breed: 'Turtle', 
 occupation:'Ninja' 
}; 

We can learn from the above code:
1. The name of the object is hero.
2. Unlike arrays, the symbol '{' is used instead of '['
3. Object attributes (such as breed and occupation) are separated by symbols ','
4. The syntax for Key and Value is KEY:VALUE
Also note that regardless of whether the attributes (i.e. key) are in double quotes, single quotes, or no quotes, their results are one, and the following code is one

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 a number, or has Spaces, etc.

Note that the symbol [] for the array is defined, and the symbol for the object is {}.

Element, attribute, method
When we talk about arrays, we can say that arrays contain elements, but when we talk about objects, we can change that

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

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

Access the properties of the object
There are two ways to access an object's properties.
Use an array as: animal['name']
Access by dots: animal.name
The first access method is suitable for any situation. However, if the attribute name is not valid, the '1name' or 'my name' attribute name mentioned in the previous section is not accessible by dots. One thing to notice about 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 attribute of author object, we try to use another method

book['author']['lastname'] //xia

We can also use hybrid access methods
book ['lastname'] or book['author']. These methods are effective and should be used flexibly

In the case where the property is dynamic, it is common to use an array of methods to access the object.

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

Call a method on an object

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

The method to access the object is very simple, a little bit, but you can also use the way of array, it looks weird
Such as hero [' say '] ();
This is not recommended. Try to use dots when accessing objects.

Modify properties and methods
Because Javascript is a dynamic language, you can modify the properties and methods of an object at any time. Look at the following example

var hero={}; 

hero is an empty object.

var hero ={ 
 breed: 'Turtle', 
 occupation:'Ninja' 
}; 

0

Indicates that the hero object does not have attributes of breed
Now you can add properties and methods

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

A method is called

 hero.sayName();//Leonardo

Delete the properties

var hero ={ 
 breed: 'Turtle', 
 occupation:'Ninja' 
}; 

3

This

var hero ={ 
 breed: 'Turtle', 
 occupation:'Ninja' 
}; 

4

this means this object, and the complexities of this will be discussed later.

Constructor (Constructor Functions)
Another way to create an object is to use constructors, and look directly at the example

var hero ={ 
 breed: 'Turtle', 
 occupation:'Ninja' 
}; 

5

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

var hero ={ 
 breed: 'Turtle', 
 occupation:'Ninja' 
}; 

6

Be careful not to drop the new operator...
Global object
In the last couple of videos, we talked about global variables, we talked about avoiding global variables as much as possible, and when we learned about objects, we looked at what happens to global variables, which are essentially a property of a global object. If the host environment is web browser, the global variable is window.
If we define var a = 1;
We can understand it this way:
1 global variable a,
As an attribute of window, a. We can call window.a or window['a']
Also look at parseInt('123 m') for the predefined functions; We could write window.parseInt('123 m');

constructor properties
After the object is created, a hidden property, constructor, is created in the background.

h2.constructor;//Hero(name)

Because the properties of constructor are references to functions. If you don't care what the h2 object is created from, and you only care about creating a new object that is similar to h2, write it this way

var h3 = h2.constructor('Nicholas'); 
h3.name ;//Nicholas 

Let's see what this means

var hero ={ 
 breed: 'Turtle', 
 occupation:'Ninja' 
}; 

9

new Object(), which will be used in the next few tutorials.

instanceof operator
Use instanceof to determine if an 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 is important to note that instanceof is followed by a reference and not a function: h instanceof Hero(); / / error

Function returns an object
You can create an object using a constructor, or you can create an object using a normal function that returns an object

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

Use this method to create the object

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

Let's take a look at a less common example of a constructor returning an object

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

Instead of returning this, the object {b:2} is returned. That's something to be aware of

Transfer object
If you pass an object to a function, you pass a reference. If you change the reference, you change the original object.
The following 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 attribute name is the same as modifying the original attribute name
The same goes for objects passing arguments to functions.

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

Comparison of objects
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 references the same 1, so it is false