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