1. Object properties
1.1 Attribute Notation
ECMAScript 2015It is allowed to directly write variables and functions in braces as properties and methods of objects. This kind of writing is more concise.
The sample code is as follows:
let name = 'A bowl of week'
let job = 'Front-end siege lion'
// Attribute Notation Write variables directlylet obj1 = {
name,
job,
sayMe() {
(name)
}
}
// Equivalent tolet obj2 = {
name: name,
job: job,
sayMe: function() {
(name)
}
}
(obj1, obj2);
2. Calculate the attribute name
existJavaScriptIn, when we define attributes, there are two ways: brackets [] or .
// Method 1 = true; // Method 2obj['a'+'bc'] = 123;
The . operator has great limitations. For example, the attribute of first name can only be defined in brackets. The bracketing method allows us to define attributes using variables or strings that will cause syntax errors when using identifiers.
For example:
let person = {},
lastName = "last name";
person["first name"] = "Nicholas";
person[lastName] = "Zakas";
(person["first name"]); // "Nicholas"
(person[lastName]); // "Zakas"
These two methods can only be defined in brackets. In ES5, you can use string direct quantities as attributes in object direct quantities, for example:
let person = {
"first name": "Nicholas"
};
(person["first name"]); // "Nicholas"
However, when our attribute name exists in a variable or needs to be calculated, it is impossible to define the attribute using the object direct quantity.
Before ES5, if the attribute name was a variable or needed to be calculated dynamically, it could only be accessed through the method of object.[variable name].
let p = {
name : 'Li Si',
age : 20
}
let attName = 'name';
(p[attName]) //Here attName represents a variable name.// Li Si
Moreover, this way of dynamically calculating attribute names is not available in literals.
let attName = 'name';
let p = {
attName : 'Li Si', // The attName here is the attribute name, which is equivalent to the attribute whose attribute name is attName is defined at each level. age : 20
}
(p[attName]) // undefined
existECMAScript 2015In the following, enclose the attribute name with [ ], then the variables defined in advance can be referenced in the brackets.
let attName = 'name';
let p = {
[attName] : 'Li Si', // The variable attName is referenced. It is equivalent to adding an attribute with the attribute name age : 20
}
(p[attName]) // Li Si
The brackets in the object's direct quantity indicate that the attribute name needs to be calculated and its content is calculated as a string
Method
3.() method
ECMAScript 2015Compare whether two values are equal, there are only two operators: the equality operator (==) and strict equality operators (===）。
- But both operators have disadvantages
- When using the equality operator, the data type will be automatically converted
Congruent operators will cause NaN to not equal itself, and +0 equals -0.
ECMAScript 2015 proposes “Same-value equality ” (same value equal) algorithm is used to solve this problem.This is a new way to deploy this algorithm. It is used to compare whether two values are strictly equal, which is basically consistent with the behavior of the strict comparison operator (===).
The syntax structure is as follows:
(value1, value2);
Parameter description:
-
value1: The first value being compared. -
value2: The second value being compared.
Returns a boolean value.
The sample code is as follows:
(+0 === -0); //true (NaN === NaN); // false ((+0, -0)); // false ((NaN, NaN)); // true
3.() method
()Methods are used to assign values of all enumerable properties from one or more source objects to the target object. It will return the target object.
The syntax structure is as follows:
(target, ...sources)
Parameter description:
-
target: Target object -
sources: Source object
It is worth noting that if the attributes in the target object have the same key, the attributes will be overwritten by the attributes in the source object. The properties of the subsequent source object will similarly override the properties of the previous source object.
The sample code is as follows:
let sources = {
name: 'A bowl of week',
job: 'Front-end siege lion'
}
let target = {}
// Use the assign() method to allocate values of all enumerable properties from one or more source objects to the target object.(target, sources)
(target);
// Verify that it is a deep copy = 'A bowl of porridge'
(target, sources); //{ name: 'A bowl of week', job: 'Front-end siege lion' } { name: 'A bowl of porridge', job: 'Front-end siege lion' }
Keywords
We know that this keyword always points to the current object where the function is located.ECMAScript 2015Another similar keyword super has been added, pointing to the prototype object of the current object.
// Define an object to be used as a prototype objectconst proto = {
v: 'Hello'
}
// Define an objectconst obj = {
v: 'World',
printV1() {
();
},
// Use the super keyword printV2() {
();
}
}
// Modify the prototype of the obj object to prtot(obj, proto)
// How to use thisobj.printV1() // World
// How to use superobj.printV2() // Hello
It is worth noting thatsuperWhen a keyword represents a prototype object, it can only be used in the object method, and an error will be reported when used elsewhere. Currently, only the abbreviation of object methods can be used toJavaScriptThe engine confirms that the method of the object is defined.
5. Object extension operator
The extension operator of the object (...) is used to take out all traversable properties of the parameter object and copy it to the current object.
The sample code is as follows:
// The object's extension operator (...) is used to take out all traversable properties of the parameter object and copy it to the current object.let obj = {
name: 'A bowl of week',
job: 'Front-end siege lion'
}
let newObj = {
...obj
}
(newObj); // { name: 'A bowl of week', job: 'Front end siege lion' }// Verify that it is a deep copy = 'A bowl of porridge'
(obj, newObj); // { name: 'A bowl of week', job: 'Front-end siege lion' } { name: 'A bowl of porridge', job: 'Front-end siege lion' }
Since arrays are special objects, the extension operator of objects can also be used for arrays.
let arr = [1, 2, 3, 4, 5]
let obj = {
...arr
}
(obj); // { '0': 1, '1': 2, '2': 3, '3': 4, '4': 5 }
If the extension operator is not followed by an object, it will be automatically converted to an object.
(
{
...1 // Equivalent to {...Object(1)} }
); // {}
(
{
...true // Equivalent to {...Object(true)} }
); // {}
(
{
...undefined // Equivalent to {...Object(undefined)} }
); // {}
(
{
...null // Equivalent to {...Object(null)} }
); // {}
This is the end of this article about the introduction of new ECMAscript feature objects. For more related ECMAscript object introduction content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!