Shulou(Shulou.com)05/31 Report--

In this article Xiaobian for you to introduce in detail the "JavaScript object characteristics and practical application of methods", the content is detailed, the steps are clear, the details are handled properly, I hope this "JavaScript object characteristics and practical application methods" article can help you solve your doubts, the following follow the editor's ideas slowly in-depth, together to learn new knowledge.

The simple data types of JavaScript are numbers, strings, true/false, null, and undefined, and all other values are objects. These objects are collections of variable key-value pairs.

An object is a container for properties, and each property has a name and value. The name of an attribute can be any string that contains an empty string, and the property value is any value except the undefined value.

The object is untyped, and it has no type restrictions on the name and value of the property. So objects are suitable for pooling and managing data. Objects can contain other objects, so they can be easily represented as tree or graphical data structures.

Using a prototype chain, you can have one object inherit the properties of another object. Reasonable use of this feature can reduce the memory and time consumed to initialize objects.

1 object literal quantity

An object literal is a zero or more name-value pair enclosed in a pair of curly braces that can appear anywhere an expression is allowed:

Var empty_object = {}; var stooge = {"first-name": "deniro", "last-name": "Li"}

The name of the property can be any string that contains an empty string. If the attribute name is a valid JavaScript identifier, you can leave it unquoted. Commas are used to separate multiple name-value pairs.

The property value can be any expression (including the literal quantity of another object), that is, the object is escapable:

Var flight = {airline: "Oceanic", number: 815, departure: {IATA: "SYD", time: "2017-08-02 19:00", city: "Sydney"}, arrival: {IATA: "LAX", time: "2017-08-03 21:37", city: "Los Angeles"}

2 search

You can use the [] syntax to get the value of the object. You can also use a string expression if it is a string literal and it is a legal JavaScript identifier. Grammar. Priority is given to use. Grammar, because it is more compact and more readable:

Console.log (stooge ["first-name"]); / / "deniro" console.log (flight.departure.IATA); / / "SYD" (preferred. Representation)

If the value of the property to be retrieved does not exist, undefined is returned:

Console.log (stooge ["middle-name"]); console.log (flight.status); console.log (stooge ["FIRST-NAME"])

| | operator can be used to fill the default value:

Console.log (stooge ["middle-name"] | | "(none)"); / / (none) console.log (flight.status | | "unknown"); / / unknown

Taking a value from the property of undefined throws a TypeError exception, which we can use & & to avoid:

Console.log (flight.equipment); / / undefined//console.log (flight.equipment.model); / / throw TypeErrorconsole.log (flight.equipment & & flight.equipment.model); / / undefined

3 Update

You can update the value of an object through an assignment statement. If the property name already exists in the object, the value of the property is replaced:

Stooge ["first-name"] = "lily"; console.log (stooge ["first-name"]); / / "lily"

If the object does not have this property before, the new property is extended to the object:

Stooge ["middle-name"] = "Song"; console.log (stooge ["middle-name"]); / / "Song" stooge.nickname = "Deniro"; console.log (stooge.nickname); / / "Deniro" flight.equipment = {model: "Boeiing 787"}; console.log (flight.equipment.model); / / "Boeiing 787" flight.status = "overdue"; console.log (flight.status); / / "overdue"

4 citation

Objects are passed by reference, so they are never copied:

Var x = stooge;x.nickname = "Lucy"; console.log (stooge.nickname); / / "Lucy"; x and stooge point to the same reference var a = {}, b = {}, c = {}; / a, b, c refer to a different empty object a = b = c = {}; / a, b, c refer to the same empty object

5 prototype

Each object is connected to a prototype object and then inherits the properties of the prototype object. All objects created by the literal amount of objects are connected to Object.prototype, which is a standard object.

When you create a new object, you can specify an object as its prototype. We added a create method for Object, which creates and returns a new object that uses the original object as the prototype object:

If (typeof Object.beget! = = "function") {Object.create = function (o) {var F = function () {}; F.prototype = o; return new F ();}} var another_stooge = Object.create (stooge)

When you update an object, the prototype object is not updated:

Another_stooge ["first-name"] = "Jack"; console.log (another_stooge ["first-name"]); / / "Jack" console.log (stooge ["first-name"]); / / "lily"

Prototype objects are used only when retrieving. If a property is not retrieved in the object, JavaScript will try to get the property value from the prototype object, and if it still does not find it, JavaScript will backtrack up the prototype chain to Object. If none exists, undefined is returned.

Prototype relationship is a dynamic relationship. If we add a property to the prototype chain, the property is immediately visible to all objects created based on the prototype:

Stooge.profession = "actor"; console.log (another_stooge.profession); / / "actor"

6 reflection

The typeof operator helps determine the type of attribute:

Console.log (typeof flight.number); / / numberconsole.log (typeof flight.status); / / stringconsole.log (typeof flight.arrival); / / objectconsole.log (typeof flight.manifest); / / undefined

Note that any attribute in the prototype chain produces a value:

Console.log (typeof flight.toString); / / functionconsole.log (typeof flight.constructor); / / function

There are two ways to remove these attributes:

1. Check and discard properties whose values are functions.

two。 Using the hasOwnProperty method, if the object has unique properties, it returns true:

Console.log (flight.hasOwnProperty ("number")); / / trueconsole.log (flight.hasOwnProperty ("constructor")); / / false

7 enumeration

The for in statement iterates through all the property names in an object, so filter out the properties you don't want:

Var name;for (name in another_stooge) {if (typeof another_ [name]! = 'function') {/ / filter out the function [xss_clean] ln (name +':'+ another_ stooge [name] + ";);}}

The order in which attribute names appear is uncertain. If you want the attributes to appear in a specific order, create an array containing the names of the specific attributes:

Var properties.length; properties = ["first-name", "middle-name", "last-name", 'profession']; / / define the desired attribute and attribute order for (I = 0; I < property I + = 1) {[xss_clean] ln (property [I] + ":" + another_ stores [property [I] + ";");}

8 Delete

The delete operator removes the properties of the object, but it does not involve any objects in the prototype chain.

Deleting the properties of an object may cause properties from the prototype chain to be rendered:

Another_stooge.nickname = "Jack"; console.log (another_stooge.nickname); / / Jackdelete another_stooge.nickname;console.log (another_stooge.nickname); / / Lucy

9 reduce the pollution of global variables

Global variables weaken the flexibility of the program, so avoid using them.

Create only one unique global variable:

Var MYAPP = {}

This variable becomes the container for our application:

MYAPP.stooge = {"first-name": "deniro", "last-name": "Li"}; MYAPP.flight = {airline: "Oceanic", number: 815, departure: {IATA: "SYD", time: "2017-08-02 19:00", city: "Sydney"}, arrival: {IATA: "LAX", time: "2017-08-03 21:37", city: "Los Angeles"} After reading this, the article "JavaScript object characteristics and practical application methods" has been introduced. If you want to master the knowledge points of this article, you still need to practice and use it yourself to understand it. If you want to know more about related articles, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.