Basic usage of JS objects
JS object definition
Definition: unordered collection of data, a collection of key-value pairs. The “key” is the property name of the object; “Value” is value, the attribute value of an object.
Property name: Each key is the property name of the object.
Property value: Each value is the property value of the object.
There are two declarations of objects:
let obj = {'name' : 'tom', 'age': 18}
— ‘name’ is a string and only a string.let obj = new Object({'name': 'tom', 'age': 18})
— This is the formal way.
Matters needing attention:
- Key names are strings, not identifiers, but can contain any character.
- Quotation marks can be omitted, and then only identifiers can be written, that is, they cannot start with a number.
- Even if the quotes are omitted, the key is still a string.
Weird attribute names:
A few examples:
Let obj = {1 :'a', 3.2 :' b', 1e2: true, 1e-2: true,.234: true, 0xFF: true}; let obj = {1 :'a', 3.2 :' b', 1e2: true, 1e-2: true,.234: true, 0xFF: true}; Object. Keys (obj) = > [" 1 ", "3.2", "100", "0.01", "0.234", "255"]Copy the code
Note: Object.keys(obj) — You can get all of obj’s keys.
Use variables as attribute names
Writing:
Let p1 = 'name' let obj = {p1: 'Tom '}Copy the code
Compare the above two ways of writing:
- Attributes without [] are automatically changed to strings, attributes with [] are evaluated as variables, and values that are not strings are automatically changed to strings.
Object’s hidden properties
Understanding hidden attributes:
- No object in JS has a hidden property,
- This hidden property stores the addresses of objects whose shared properties are made up of
- The object made up of this common property is the stereotype
- So, the hidden property holds the address of the stereotype.
For example:
let obj = {'name': 'Tom','age': 18}
let obj2 = {'name': 'June','age': 20}
obj.toString === obj2.toString
<= true
Copy the code
For OBj and obj2, they have their own unique attributes, but also have a common attribute — toString, and objects composed of toString and other common attributes are prototypes. The memory diagram is as follows:
On the prototype
Every object has a prototype
- The stereotype holds the common properties of the object
- The prototype of OBj is an object
obj__proto__
It holds the address of this object- Objects with toString/constructor/the valueOf properties
The prototype of an object is also an object
- Because the prototype of an object is an object and the object has a prototype, the prototype of an object also has a prototype.
obj={}
The stereotype of is the stereotype of all objects.- This stereotype contains properties common to all objects and is the root of the object.
- The stereotype of this stereotype is NULL.
How do I delete an object’s attributes
Method 1: Use delete to delete the attribute name and value
Delete obj. XXX or delete obj[‘ XXX ‘]. Delete the name and value of the XXX attribute
Method two: Delete only the value of the attribute, but retain the name
Obj. XXX = undefined. You can delete the value of the XXX attribute, but retain the name.
Note: obj. XXX === undefined, cannot determine whether ‘XXX’ is a property of obj. Such as:
let obj{}
let obj{xxx : undefined}
<-
obj.xxx === undefined
<- true
obj2.xxx === undefined
<- true
Copy the code
Obj. XXX === = undefined to determine the property name, only the value.
How do I view the properties of an object (read properties) – see the prototype chain
View your Own Properties
Object.keys(obj)
— > Attribute name (key)Object.values(obj)
— > value (value)Object.entries(obj)
— > Attribute name and value (key+value)
Check whether the attribute name is included
By using in
'xxx' in obj === false
– > does not contain'xxx' in obj ==== true
– > containing
View self and common properties
- Print it out as a table of contents:
console.dir(obj)
- Or use them in turn
Object.keys
playobj.__proto__
, but not recommended.
Determine whether a property is self – or co-owned
Use obj.hasOwnProperty(‘toString’) to determine. Use with ‘XXX’ in obj to check if it has this property, but not sure if it is common.
Viewing individual properties
There are three methods:
- Bracketed syntax:
obj['key']
- Some grammar:
obj.key
- Pit new grammar:
Obj [key] // The value of the variable key is usually not 'key'.
Note: Newcomers should choose the parenthesis syntax first.
For example:
boj.name
Is equivalent toobj['name']
Where name is a string. Inequitable inobj[name]
In this case, the name is the variable.
let name = 'tom'
obj[name] === obj['name']
Copy the code
let list = ['name','age','gender']
let person = {
name : 'tom',age : 18, gender : 'man'
}
for(let i = 0; i<list.length; i++){
let name list[i]
console.log(person????)
}
Copy the code
Can I speak to…? Fill in the following to make all the attributes of person printed
Options:
console.log(person.name)
console.log(person[name])
The answer is: 2. Because the first option can only be a string name is printed three times to print the value of name. In the second option, name is a variable, and out of three prints, one prints name,age,gender. So choice 2. It is important to distinguish between name and ‘name’.
How do I modify or add attributes to an object (write attributes) without modifying them to the prototype chain
Direct assignment
For example:
let obj = {name:'tom'}
— Name is a stringobj.name = 'tom'
— Name is a stringobj['name'] = 'tom'
— Name is a stringThis is incorrect because name is a variable with an indeterminate value.obj[name] = 'tom'
obj['na' + 'me'] = ''tom
— Evaluates to a string ‘name’ and then assignslet key = 'name'; obj[key] = 'tom'
Declare a variable, and then assign to it— This is the wrong way to write it, becauselet key = 'name'; obj.key = 'tom'
obj.key
Is equivalent toobj['key']
Batch assignment
Use the Object. The assign (obj, {age: 18, gender: ‘man’}). You can do batch assignment.
Modify or add a common property
There is no way to modify or add a common property by itself. Such as:
Let obj ={}, obj2 ={} // total toString obj. ToString =' XXX '// will only modify obj on its own property objCopy the code
If you must modify or add common attributes, you can use two methods:
obj.__proto__.toString = 'xxx'
__proto__ is not recommendedwindow.Object.prototype.toString = 'xxx'
–Don’t modify the prototype in general, there are a lot of problems
Modify or delete stereotypes (modify hidden attributes)
- Delete the prototype:
obj__proto__ = null
- Modify the prototype:
Method 1: Not recommended — proto, because it can cause low performance
let obj = {name:'tom'}
let obj2 ={name:'jack'}
let common = {kind:'human'}
obj.__proto__ = common
obj2.__proto__ = common
Copy the code
Memory graph — Prototype chain
Method 2: Object. Create is recommended
let obj =Object.create(common)
obj.name = 'tom'
let obj2 = Object.create(common)
obj.name = 'jack'
Copy the code
Bottom line: If you want to change the stereotype, make sure you change it at the beginning and then add attributes.
'name' in obj
andobj.hasOwnProperty('name')
The difference between
The difference is that
obj.hasOwnProperty('name')
You can determine if a property is a property of itself.- through
'name' in obj
It simply looks to see if the property is present in the object to determine whether it is its own property or a shared property.