This is the third day of my participation in the August More text Challenge. For details, see the August More Text Challenge

preface

Last time we looked at basic datatypes, today we’ll look at the basics of reference datatypes, Object objects, and start exploring ordinary objects as examples.

define

To understand objects, let’s use ordinary objects:

Common objects have the following characteristics:

  • It’s wrapped in curly braces
  • There are zero to multiple groups of attribute names and attribute values (key-value pairs) separated by commas
  • Key cannot be a reference datatype; value can be any datatype

What are attributes? What is it used for?

An attribute is used to describe the current object feature/characteristic, the attribute name is the current feature, and the attribute value is the description of the feature (professional syntax: the attribute name is a key, the attribute value is a value, and a set of attribute names and attribute values is a set of key-value pairs).

I don’t know you, have seen the above description of “attribute name” and attribute value, do you understand? If you don’t understand, here’s an example:

Imagine we’re making a strategy war game where you have a bunch of soldiers attacking the enemy. A soldier, like such an object, let’s look at the properties of a soldier, as shown below:Above the class, the attack power, the health value, is the attribute, the attribute also is so.

let person = {
    name: Dream Chaser.age: 18
};
// Person is an object. Name and age are properties of person
Copy the code

Operations on properties

It’s just adding, deleting, checking, and changing key-value pairs, or CURD for short.

To obtain

Grammar:

  • The property names of the object are in string format
  • Object [property]
person.name // => The dot operator
person['name'] 
In general, attribute names of objects are string names (attribute values are not fixed, any format can be used).
Copy the code

To add/change

In the JS object, the property name of an object is not allowed to repeat (take advantage of this, you can achieve array deduplicate), is unique. If repeat words, may report wrong, may not report wrong!!

  • Add: Adding properties that do not exist on the original object
  • Modify: To modify an existing property of an object
var obj = { name: Dream Chaser.age: 18 };
obj.name = 'experts'; // => The name attribute exists in the original object, and this attribute belongs to the "modify" attribute value
obj.sex = 'male'; // => < span style = "max-width: 100%; clear: both
obj[age] // This will not work. You can try it out. We'll talk about it later
obj['age'] = 28;
Copy the code

delete

Note: Delete is the keyword

Delete completely: This property no longer exists in the object

delete obj['age'];
obj.age // undefined
Copy the code

Incomplete (false) removal: Does not remove the property, but simply leaves the current property’s value null

obj['sex'] = null;
// the sex attribute in obj still exists, but its value is set to null
Copy the code

If the current object has the property name, the value (even null) can be obtained, but if it does not have the property, the result is undefined

obj.age // The obj object has no age attribute
obj.sex // The obj object has a sex attribute, but is assigned null, and returns null
Copy the code

Property name description of the object

Property names in an object may not only be string names, but may also be “array like” numbers.

When we store a property name that is not a string or a number, the browser converts the value to a string (toString method) and stores it

var obj = {
    name: Dream Chaser.0: 100
};

obj[0] / / = > 100
obj['0'] / / = > 100
0 => Uncaught SyntaxError: Unexpected number
// SyntaxError => SyntaxError

// The stored property is named true
obj[true] = false;
// Output obj in the console
Copy the code

How do we verify that the stored property is not a string or a number? We can print obj in the console, let’s see.

By running the object.keys (obj) method, you can see that the property names of obj are strings

I don’t know if you remember, but at the beginning of the article, it said that a key cannot be a reference data type. How do we understand this?

Here’s an example:

var obj = {
    name: Dream Chaser
};

obj[{}] = 500;
console.log(obj[{xxx:'xxx'}]); // Output the result?
console.log(obj[{}] === obj[{xxx:'xxx'}]); // Output the result?
Copy the code

The result, as shown here:whyobj[{}] === obj[{xxx:'xxx'}]Is true?

If you understand the handling of the above object’s property names, it makes sense.

The object is converted to a string ‘[object object]’, which is stored as a property name.

obj[{}] = 500;
Obj ['[object object]'] = 500 obj['[object object]'] = 500 obj['[object object]'] = 500
obj[{xxx:'xxx'}];
// => Convert the object to the string '[object object]', and then retrieve the 500, so it is useless to store the object
Copy the code

Arrays are objects

  • The attribute name is a number. The number starts from zero and increases successively. Each number represents the current position of the item => We call this numeric attribute name index.
  • By default, there is a length property that stores the length of the array, and when you call the array method, the length is automatically updated
var obj = {
    a : 12
}
var ary = [12.23]; // => < span style = "box-sizing: border-box; color: RGB (74, 74, 74);

// By observing the result, we find that the array object's "property name" is a number (we put the number property name as the index of the current object).
// Get the property value, just like getting an object.
ary[0] / / 12
ary['0'] / / 12
ary. 0 // => Uncaught SyntaxError: Unexpected number
ary.length / / = > 2
ary['length'] / / = > 2
Copy the code

How do we understand the relationship between arrays and objects?

An array is a subdivision of an object. An object contains an array. An array can have what an object has, but an array has a special form. Array property names are numbers, array is a special kind of object, object has, it has, object doesn’t have, it has. For example, arrays have a push method, but objects don’t.

A little bit of detail about the object

So if you look at the code below, what is the output?

var obj = {
  name: Dream Chaser.age: 18
};
var name = 'experts';

console.log(obj.name);
console.log(obj['name']);
console.log(obj[name]);
Copy the code

The result, as shown here:If you don’t get it right, you don’t understand the difference between ‘name’ and ‘name’

// The difference between name and name
// => 'name' is a string value that represents itself
// => Name (pronouns/container) is a variable, not a string value, it represents the stored value itself

obj.name // => Obtain the value of the name attribute
obj['name'] // => Obtain the value of the name attribute
obj[name] => obj[' obj '] => there is no attribute, the attribute value is undefined
Copy the code

In general, it is

  • obj['key']Gets the value of the attribute named key
  • obj.keyGets the value of the attribute named key
  • obj[key]Get the key, this oneThe value stored in the variable, as the attribute value corresponding to the attribute name