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:

  1. let obj = {'name' : 'tom', 'age': 18}— ‘name’ is a string and only a string.
  2. let obj = new Object({'name': 'tom', 'age': 18})— This is the formal way.

Matters needing attention:

  1. Key names are strings, not identifiers, but can contain any character.
  2. Quotation marks can be omitted, and then only identifiers can be written, that is, they cannot start with a number.
  3. 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:

  1. 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:

  1. No object in JS has a hidden property,
  2. This hidden property stores the addresses of objects whose shared properties are made up of
  3. The object made up of this common property is the stereotype
  4. 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

  1. The stereotype holds the common properties of the object
  2. The prototype of OBj is an object
  3. obj__proto__It holds the address of this object
  4. Objects with toString/constructor/the valueOf properties

The prototype of an object is also an object

  1. Because the prototype of an object is an object and the object has a prototype, the prototype of an object also has a prototype.
  2. obj={}The stereotype of is the stereotype of all objects.
  3. This stereotype contains properties common to all objects and is the root of the object.
  4. 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

  1. Object.keys(obj)— > Attribute name (key)
  2. Object.values(obj)— > value (value)
  3. Object.entries(obj)— > Attribute name and value (key+value)

Check whether the attribute name is included

By using in

  1. 'xxx' in obj === false– > does not contain
  2. 'xxx' in obj ==== true– > containing

View self and common properties

  1. Print it out as a table of contents:console.dir(obj)
  2. Or use them in turnObject.keysplayobj.__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:

  1. Bracketed syntax:obj['key']
  2. Some grammar:obj.key
  3. 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:

  1. boj.nameIs 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:

  1. console.log(person.name)
  2. 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:

  1. let obj = {name:'tom'}— Name is a string
  2. obj.name = 'tom'— Name is a string
  3. obj['name'] = 'tom'— Name is a string
  4. obj[name] = 'tom'This is incorrect because name is a variable with an indeterminate value.
  5. obj['na' + 'me'] = ''tom— Evaluates to a string ‘name’ and then assigns
  6. let key = 'name'; obj[key] = 'tom'Declare a variable, and then assign to it
  7. let key = 'name'; obj.key = 'tom'— This is the wrong way to write it, becauseobj.keyIs 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:

  1. obj.__proto__.toString = 'xxx'__proto__ is not recommended
  2. window.Object.prototype.toString = 'xxx'–Don’t modify the prototype in general, there are a lot of problems

Modify or delete stereotypes (modify hidden attributes)

  1. Delete the prototype:obj__proto__ = null
  2. 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 objandobj.hasOwnProperty('name')The difference between

The difference is that

  1. obj.hasOwnProperty('name')You can determine if a property is a property of itself.
  2. through'name' in objIt simply looks to see if the property is present in the object to determine whether it is its own property or a shared property.