Object is the core concept of JavaScript language and also the most important data type.

What is an object? Simply put, an object is a set of key-value pairs, a kind of unordered composite data set.

var obj = {
  foo: 'Hello',
  bar: 'World'
};
Copy the code

In the code above, the curly braces define an object, which is assigned to the variable obj, so the variable obj refers to an object. The object contains two internal key-value pairs (also known as two “members”), the first of which is foo: ‘Hello’, where foo is the “key name” (the name of the member) and the string Hello is the “key value” (the value of the member). Key names and key values are separated by colons. The second key-value pair is bar: ‘World’, where bar is the key name and World is the key value. Two key-value pairs are separated by commas.

Key name

All keys of an object are strings (ES6 introduces the Symbol value as a key), so you can use quotes or not. The above code could also be written as follows.

var obj = {
  'foo': 'Hello',
  'bar': 'World'
};
Copy the code

If the key is a numeric value, it is automatically converted to a string.

Var obj = {1: 'a', 3.2: 'b', 1e2: true, 1e-2: true,.234: true, 0xFF: true}; Obj / / Object {/ / 1: "a", / / 3.2: "b", / / 100: true, / / 0.01: true, / / 0.234: true, / / 255: true // } obj['100'] // trueCopy the code

In the above code, all of the key names of the object obj, which look like numeric values, are actually automatically converted to strings.

If the key name does not meet the criteria for identifying a name (for example, the first character is a number, or contains a space or operator) and is not a number, it must be quoted; otherwise, an error will be reported.

Var obj = {1p: 'Hello World'}; Var obj = {'1p': 'Hello World', 'h w': 'Hello World', 'p+q': 'Hello World'};Copy the code

The three key names of the object above do not qualify as identifying names, so they must be quoted.

Two syntax for declaring objects

  • let obj = { ‘name’: ‘frank’, ‘age’: 18 }
  • let obj = new Object({‘name’: ‘frank’})

How do I delete an object’s attributes

  • Delete obj. XXX or delete obj[‘ XXX ‘]

Select * from obj; select * from obj; select * from obj;

  • Contains no attribute name

‘xxx’ in obj === false

  • Contains the attribute name, but the value is undefined

‘xxx’ in obj && obj.xxx === undefined

  • Note that obj.xxx === = undefined

Cannot determine whether ‘XXX’ is a property of obj

The delete command is used to delete an attribute of an object.

var obj = { p: 1 };
Object.keys(obj) // ["p"]

delete obj.p // true
obj.p // undefined
Object.keys(obj) // []
Copy the code

In the code above, the delete command removes the p property of the object obj. After deletion, reading the p property returns undefined, and the return value of the object. keys method no longer includes the property.

Note that if you delete a nonexistent property, delete does not report an error and returns true.

var obj = {};
delete obj.p // true
Copy the code

In the above code, the object obj does not have a p attribute, but the delete command returns true. Therefore, an attribute cannot be assumed to exist based on the result of the delete command.

The delete command returns false in only one case, if the property exists and cannot be deleted.

var obj = Object.defineProperty({}, 'p', {
  value: 123,
  configurable: false
});

obj.p // 123
delete obj.p // false
Copy the code

In the above code, the p property of the Object obj cannot be deleted, so the delete command returns false (see the Object chapter in the Library for an introduction to the object.defineProperty method).

Also, note that the delete command can only delete properties of the object itself, not inherited properties.

var obj = {};
delete obj.toString // true
obj.toString // function toString() { [native code] }
Copy the code

In the code above, toString is an inherited property of obj. The delete command returns true, but the property is not deleted. This example also shows that even if delete returns true, the value of this property can still be read.

Attribute exists: in operator

The in operator is used to check whether an object contains an attribute (note that it checks the key name, not the value) and returns true if it does, false otherwise. It has a string on the left, representing the property name, and an object on the right.

var obj = { p: 1 };
'p' in obj // true
'toString' in obj // true
Copy the code

One problem with the IN operator is that it does not recognize which attributes belong to the object itself and which are inherited. As in the code above, the object obj itself does not have a toString attribute, but the in operator returns true because the attribute is inherited.

In this case, you can use the object’s hasOwnProperty method to determine whether it is a property of the object itself.

var obj = {};
if ('toString' in obj) {
  console.log(obj.hasOwnProperty('toString')) // false
}
Copy the code

How do I view the properties of an object

View all of its properties

  • Object.keys(obj)
  • Object.values(obj)
  • Object.entries(obj)

View self + Common properties

  • console.dir(obj)

Or print out obj._proto_ in sequence with object.keys yourself

Determine whether an attribute is self-contained or common

  • obj.hasOwnProperty(‘toString’)

There are two ways to read the properties of an object, one using the dot operator and the other using the square bracket operator.

var obj = {
  p: 'Hello World'
};

obj.p // "Hello World"
obj['p'] // "Hello World"
Copy the code

The above code uses the dot operator and the square bracket operator respectively to read the property P.

Note that if you use the square bracket operator, the key name must be enclosed in quotes or it will be treated as a variable.

var foo = 'bar';

var obj = {
  foo: 1,
  bar: 2
};

obj.foo  // 1
obj[foo]  // 2
Copy the code

In the above code, foo is a string if the dot operator is used to refer to the foo property of obj. If the square bracket operator is used, but no quotes are used, then foo is a variable pointing to the string bar.

Expressions can also be used inside the square bracket operators.

obj['hello' + ' world']
obj[3 + 3]
Copy the code

Numeric keys can be unquoted because they are automatically converted to strings.

Var obj = {0.7: 'Hello World'}; Obj [' 0.7 '] / / "Hello World" obj [0.7] / / "Hello World"Copy the code

In the code above, the numeric key 0.7 of the object obj can be quoted or not, because it is automatically converted to a string.

Note that numeric keys cannot use dot operators (because they are treated as decimal points), only square brackets operators.

var obj = { 123: 'hello world' }; Obj [123] // "hello world"Copy the code

The first expression of the above code, which uses the dot operator on the numeric key 123, returns an error. The second expression uses the square bracket operator and the result is correct.

How do I modify or add attributes to an object

Direct assignment

- let obj = {name: - obj['name'] = 'frank' - obj[name] = 'frank' -obj ['na'+'me'] = 'frank' -let key = 'name'; obj[key] = 'frank' - let key = 'name'; Obj. Key = 'frank' // obj. Key = obj['key']Copy the code

Batch assignment

Object.assign(obj, {age: 18, gender: 'man'})
Copy the code

Modify or add a common property

Common attributes cannot be modified or added by themselves

Let obj = {}, obj2 = {} // toString obj. ToString = 'XXX' will only change obj's own property obj2. ToString is still on the prototypeCopy the code

I want to change or add attributes to the prototype

Obj. __proto__. ToString = 'XXX' / / do not recommend using __proto__ Object. The prototype. ToString = 'XXX'Copy the code

In general, don’t modify a prototype, it can cause a lot of problems

Modifying hidden attributes

_proto_ is not recommended

let obj = {name:'frank'} let obj2 = {name: 'jack'} let common = {kind: 'human'} obj.__proto__ = common (add, not replace) obj2.__proto__ = commonCopy the code

Object. Create is recommended

let obj = Object.create(common)
obj.name = 'frank'
let obj2 = Object.create(common)
obj2.name = 'jack'
Copy the code

Norms basically mean, if you want to change, change at the beginning, don’t change later

Obj. hasOwnProperty(‘name’)

  • ‘name’ in obj determines whether an attribute is in the object, but does not distinguish between its own attribute and a common attribute.
  • Obj. HasOwnProperty (‘name’) determines if the property is its own property.

Refer to the link

Netpath Javascript tutorial