1 Object Introduction

Object is the most basic, common, and powerful data type in JavaScript, and is the basis of object-oriented programming.Of the six basic data types in JavaScript, Object is the only complex data type and the only variable data type.An Object is an unordered list of basic data types stored in name-value pairs.

2 Object Creation

There are many ways to create Object s. This article only introduces simple literal value creation and construction mode.

2.1 Literal Value

The simplest way to create an Object.

var apple = {
    name:"Apple",
    color:"gules",
    origin:["Qixia","Linyi"],
    showDesc:function () {
        console.log(this.name+"yes"+this.color+"Of");
    }
};

2.2 Construction Mode

For simple data storage in applications, the way literal values are created is very simple and effective.But for complex applications, such as when we need to build 10 fruits, each fruit has a name, color, origin, and so on. If you use the above method, you need to create objects repeatedly.We use construction patterns and introduce fruit objects to solve these problems.

function Fruit(theName,theColor,theOrigin) {
    this.name = theName;
    this.color = theColor;
    this.origin = theOrigin;
    this.showDesc = function () {
        console.log(this.name+"yes"+this.color+"Of");
    }
}

Using this method, you can easily create a variety of fruits, and if you need to change the way the fruit is described (showDesc), you only need to make one change.You can also add your own methods and properties.

var mango = new Fruit("Mango","yellow",["Lingshui","Nanning"]);
//Output mango is yellow
mango.showDesc();

3 Access properties

The first item in an Object object is called an attribute (a function is called a method), and generally the attribute value can be obtained by dotting (.) or bracketing ([]) with the attribute name.Attribute names can be either strings or numbers, but it is generally best not to use numbers as attribute names. If numbers are used as attribute names, attributes can only be accessed in middle brackets.

var ageGroup = {15:"children",60:"The elderly"};
//Output Children
console.log(ageGroup["15"]);
//Throw SyntaxError 
console.log(ageGroup.15);

3.1 dot (.)

var people = {name:"iFat3",sex:"male"};
//Output iFat3
console.log(people.name);

3.2 brackets ([])

var people = {name:"iFat3",sex:"male"};
//Output iFat3
console.log(people["name"]);

4 Determine whether the attribute exists or not

var people = {name:"iFat3",sex:"male"};
//Output true
console.log("name" in people);
//Output false
console.log("age" in people);
//Output true, inherited
console.log("toString" in people);

5 Own Attribute Decision

var people = {name:"iFat3",sex:"male"};
//Output true
console.log(people.hasOwnProperty("name"));
//Output false, inherited property not own property
console.log(people.hasOwnProperty("toString"));

6 Access and enumerate properties

var people = {name:"iFat3",sex:"male"};
//Output name sex
for(var item in people) {
    console.log(item);
}

7 Delete Attributes

You can only delete your own attributes, not inherited attributes.

var people = {name:"iFat3",sex:"male"};
delete people.sex;
//Output undefined
console.log(people.sex);
delete people.toString();
//Output [object Object object]
console.log(people.toString());

8 Serialization and Deserialization

Use the JSON.stringify function to serialize objects and the JSON.parse function to deserialize objects.

var people = {name:"iFat3",sex:"male"};
var peopleStr = JSON.stringify(people);
//Output string
console.log(typeof peopleStr);
//Output {"name":"iFat3","sex": "man"}
console.log(peopleStr);
var people2 = JSON.parse(peopleStr);
//Output object
console.log(typeof people2);
//Output iFat3
console.log(people2.name);

The prototype properties of JavaScript are not described in this article, and the Prototype section is covered in more detail.

Introduction to JavaScript data types