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

This article mainly introduces the relevant knowledge of "how to master JavaScript objects". The editor shows you the operation process through actual cases. The operation method is simple, fast and practical. I hope this article "how to master JavaScript objects" can help you solve the problem.

JavaScript object

Eight data types of JavaScript, including seven primitive data types (Number, BigInt, String, Boolean, null, undefined, and symbol) and a complex type object (that is, the object type).

Compared with the original data type, object is called a complex type because the original type can only represent one kind of data, such as Number represents a number, String represents a string, etc., while object can contain all the original data types in the form of key-value pairs.

For example, we can use the symbol type to represent the object's ID, the String type to represent the object's name, the Boolean to represent the object's gender, and so on. Each type of data in an object is called an attribute of an object, and an object can theoretically have countless attributes, which are created in a pair of curly braces {.}.

Object-oriented is not only a language feature of JavaScript, but also a very important concept in all object-oriented languages, such as C++, Java, Python, and C#. If you want to learn JavaScript well, you must be proficient or even proficient in the characteristics of objects, because objects permeate all aspects of JavaScript.

Object-oriented VS process-oriented

Object-oriented is a programming idea, not a new technology. Before the birth of object-oriented, programmers organized a lot of code with the idea of process-oriented.

What is object-oriented? This question is often asked at school and in interviews. We can have a very profound understanding of the answer: everything is the object, although this is absolutely true, it is not the answer that the interview tube or the teacher wants.

Object-oriented is a kind of programming idea, a way of organizing code, which is relative to process-oriented. In the process of orientation, the programmer is God, and God commands everything. For example, we often give an example: put an elephant in the refrigerator.

In the process of facing, God needs to open the refrigerator door, then put the elephant in the refrigerator, and finally close the refrigerator door. All processes are operated by God alone.

In object-oriented, both refrigerator and elephant exist, and the refrigerator opens the door by itself, the elephant enters the refrigerator by itself, and then the refrigerator closes the door by itself. The whole process is coordinated by God, but the specific process of doing things is done by the object himself, such as how to open the refrigerator door, how to enter the refrigerator and so on.

Grammar

Defining an object does not require the use of keywords, but directly uses curly braces {.} wrap key-value pairs to create an object. The syntax is as follows:

Let child = {name:'Tom', age:8,}

The above code creates a simple object and assigns the object to the variable child. The child object has two properties (two values), one is name and the other is age.

The so-called key-value pair (key:value) is a simple mapping between name and value.

For example, name:'Tom' in the above example is a key-value pair, where name is the key and "Tom" is the corresponding value. In actual use, you can get the corresponding value through the key, just as you can get the value of the variable using the variable name.

Empty object

If there are no properties in an object, then the object is an empty object. We can get an empty object by simply assigning {} to a variable, or in another way:

Let nullObj1 = {}; / / create an object that is also empty let nullObj2 = new Object (); / / also create an empty object operation

After an object is created, it is not immutable. In the process of using the object, we can query the properties of the object or change the object at any time.

Query attribute

To query the property value of an object, you need to use a new symbol:. The syntax is the object name. Variable name.

Take a simple plum:

Let child = {name:'Tom', age:8,}; console.log (child.name); console.log (child.age)

The result of code execution is as follows:

In the above case, if we want to see the name property in the variable child, we simply use child.name.

Add attribute

After the creation of an object variable, we can also add new properties to the variable at any time as follows:

Let child = {name:'Tom', age:8,} child.height = 800X / A new attribute heightconsole.log (child.height) has been created

The result of code execution is as follows:

To add a new property to an object variable, you only need to use the. Property name, and then assign a value directly to the new property.

If we look at the contents of the variable child at this time, we can see that the height attribute is already listed in it:

The property type of an object can be arbitrary, and we can add a Boolean value to the object directly using child.isBoy=true, or we can use child.money=null to add a property with an empty value.

Change properties

It is also very easy to change the attribute value of the JavaScript object. Just assign a value to the variable directly. Take a simple plum:

Let child= {name:'Tom', age:8,} child.age=12;console.log (child)

The result of code execution is as follows:

As you can see, the age variable has changed from 8 to 12.

Delete attribut

Object deletion properties need to use a new keyword delete, using the delet object name. Property name removes the property of the object:

Let child = {name:'Tom', age:8,} delete child.age;console.log (child)

The result of code execution is as follows:

From the execution result of the code, you can see that the property age has been deleted.

Multi-word key value

The property name (key) of an object can also use multiple words separated by spaces, but you need to wrap the key name in double quotes when creating such properties.

For example:

Let child= {name = 'Tom', age:8, "favorite cat:' Jerry',}

The above code creates a key-value pair with the key name "favorite cat", but when accessing property values, if you use:

Child.favorite cat = 'Bob'; / / syntax error

This approach is wrong, the engine will use favorite as a key name, and when it encounters a cat Times error.

Square brackets are required to access such key values.

Square bracket

. You can access ordinary property names, and use [] for variables such as "favorite cat", for example:

Let child= {name:'Tom', age:8, "favorite cat": 'Jerry',} console.log (child [' favorite cat'])

The result of code execution is as follows:

Square brackets are provided. We can use square brackets instead of other property access methods. To manipulate the properties of the object.

For example:

Let child = {name:'Tom', age:8,} child ['favorite cat'] =' Jerry'; / / add attribute child ['name'] =' Bob'; / / modify attribute delete child ['age']; / / number of deletions console.log (child [' name']) / / View properties

In addition to regular property operations, square brackets can also access object properties through variables:

Let child = {name:'Tom', age:8,} let prop=' name';console.log (childprop); prop='age';console.log (childprop)

The ability to access attribute values through variables provides us with a very useful way to access variables, for example, we can calculate the key name of the attribute in the program, and then access the key value through the key name.

Take a chestnut:

Let child = {prop1:0, prop2:1, prop3:2,} let prop = 'prop';for (let iTunes 1: I let propName =' name'; > let child = {[propName]: 'Tom', age:8, >} > undefined > child > {name:' Tom', age:8}

[propName] in the above example is a computational attribute, and the meaning is very simple, which is to use the value stored in the variable propName (in this case, "name") as the key name of the object.

The above code essentially works the same as the following code:

Let propName='name';let child = {age:8,} child[ propName] = 'Tom'

Complex expressions can also be used in square brackets:

Let child = {['prop' + 2 * 3]:' Tom',}

The result of code execution is as follows:

> let child = {['prop'+2*3]:' Tom',}

< undefined>

Child

< {prop6: 'Tom'}属性简写 在实际应用中，或者匿名对象中，我们常常会使用和变量同名的属性，举个例子： let name = 'Tom';let age = 8;let child = { name:name, //属性名和变量名一样，都是name age:age,}; 这种情况下，我们就可以简写对象属性，如下： let name = 'Tom';let age = 8;let child = { name, // 等同于name:name; age,} 代码的执行结果： >

Let name = 'Tom'; let age = 8; let child = {name, age,}

< undefined>

Child

< {name: 'Tom', age: 8}属性命名 和变量命名不同，我们几乎可以使用任何值作为属性的名称，包括关键字和数字： 关键字作为变量名 虽然听起来不可思议，实际上，所有的关键字都可以作为对象的属性名： let obj = { for:0, while:1, function:2, alert:3,} 代码执行结果： >

Let obj = {for:0, while:1, function:2, alert:3,}

< undefined>

Obj

< {for: 0, while: 1, function: 2, alert: 3}数字作为关键字 数字也可以作为关键字的名称，如下： let obj = { 0:'Number',//隐式转换为"0" 1:'Number',}console.log(obj['0']); 数字作为属性名称时，会被隐式转换为字符串，在访问属性时，不能使用.，必须使用方括号代替。 属性名称中的陷阱 在命名中，有一个小陷阱，我们不能使用__proto__作为属性的名称，这个属性是对象的一个特殊，后继会特别介绍。 举个例子： let obj = {};obj.__proto__ = 1;console.log(obj.__proto__);

In operator

One feature of JavaScript that needs to be noted is that it doesn't report an error even when accessing a property that doesn't exist, just returns undefined.

So how do we know if the attribute exists in the object?

The easiest way is to use an if statement:

Let obj = {}; if (obj.someProp = = undefined) {.}

This is fine in most cases, but an error occurs when the value of the property name is undefined itself:

Let obj = {prop: undefined} obj.prop = undefined? Console.log ('no'): console.log (' yes')

Code execution result:

> let obj = {prop: undefined} obj.prop = undefined? Console.log ('no'): console.log (' yes'); no

< undefined 虽然prop是存在的，但是以上案例并不能正确的返回结果。 这个时候就需要使用in let obj = { prop:undefined,};if('prop' in obj){ console.log('yes');}else{ console.log('no');} 这么做是不是优雅了许多呢？ >

Let obj = {prop:undefined,}; if ('prop' in obj) {console.log (' yes');} else {console.log ('no');}

< yes< undefined属性遍历 如果我们不知道对象中都存在什么属性，如何取得所有的属性值呢？ 这时候就需要使用for .. in ..语句了，它类似于for循环，但是更简洁。 语法 for (key in obj){ ...} 举个简单的小李子： let child = { name:'Tom', age:8, height:180,}for (let key in child){ console.log(key+':'+child[key]);} 代码执行结果如下： >

Let child = {name:'Tom', age:8, height:180,} for (let key in child) {console.log (key+':'+child [key]);}

< name:Tom< age:8< height:180< undefined属性顺序 当我们创建一个对象并遍历其中所有的属性时，属性是如何排列的呢？答案是：特别的顺序排列，并遵循以下规则： 数字属性以数字顺序排列； 其他属性按照创建顺序排列； 数字属性在其他属性之前； 举个例子： let obj = { name:'Tom', age:99, 7:'7', 1:'1', 9:'9',}for (let key in obj){ console.log(key+':'+obj[key]);} 代码执行结果： >

Let obj = {name:'Tom', age:99, 7 for (let key in obj) {console.log (key+':'+obj [key]);} < 1:1 < 7:7 < 9:9 < name:Tom < age:99, that's all for "how to master JavaScript objects". Thank you for reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

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.