I am small and live in Wuhan, do two years of new media, ready to use 6 months time to switch to the front end of the industry.
Lesson Objective for today
Yesterday I learned deconstruction based on search. So today continue to learn object deconstruction, is a day for learning, come on, small and ！！！！
Basic usage
Based on using
Deconstruction can be applied to objects as well as arrays.
Object deconstruction differs from arrays in one important way. The elements of an array are arranged in order, and the value of a variable is determined by its position.
The attributes of an object have no order, and variables must have the same name as the attributes to get the correct value.
(function (log) {
const {
bar,
foo
} = {
foo: "aaa". bar: "bbb" }; log(foo); // "aaa" log(bar); // "bbb" const { baz } = { foo: "aaa". bar: "bbb" }; log(baz); // undefined }) (console.log) Copy the code
In the first example of the code above, the order of the two variables to the left of the equals sign is inconsistent with the order of the two properties with the same name to the right of the equals sign, but it has no effect on the value at all.
In the second example, the variable has no corresponding property of the same name, so it cannot get a value and finally equals undefined.
Seems to be more powerful than yesterday array deconstruction ~~~~
The variable name is inconsistent with the attribute name
If the variable name does not match the attribute name, it must be written as follows.
(function (log) {
const {
foo: baz
} = {
foo: 'aaa'. bar: 'bbb' }; log(baz); // "aaa" const obj = { first: 'hello'. last: 'world' }; const { first: f, last: l } = obj; log(f); // 'hello' log(l); // 'world' }) (console.log) Copy the code
What this actually shows is that the deconstructed assignment of an object is shorthand for the following.
(function (log) {
const {
foo: foo,
bar: bar
} = {
foo: "aaa". bar: "bbb" }; log(foo); // "aaa" log(bar); // "bbb" }) (console.log) Copy the code
In other words, the internal mechanism of deconstructive assignment of an object is to find the property of the same name and then assign it to the corresponding variable.
It is the latter, not the former, that is really assigned.
(function (log) {
const {
foo: baz
} = {
foo: "aaa". bar: "bbb" }; log(baz); // "aaa" log(foo); // ReferenceError: foo is not defined }) (console.log) Copy the code
In the code above, foo is the matching pattern and Baz is the variable.
It is the variable baz that is actually assigned, not the pattern foo.
I see
Method of deconstructing objects
Object deconstruction assignment, it is very convenient to assign the method of an existing object to a variable.
(function (log) {
const {
log: log1,
sin,
cos
} = Math; log(log1); // [Function: log] log(sin); // [Function: sin] log(cos); // [Function: cos] }) (console.log) Copy the code
This code makes it much easier to use by assigning the logarithm, sine, and cosine methods of the Math object to the corresponding variables.
See logarithm, sine, cosine feeling forget about, are returned to the university teacher ~~~~
Attribute name expression
Since arrays are special objects in nature, they can be deconstructed as object properties.
(function (log) {
const arr = [1.2.3];
const {
0: first,
[arr.length - 1]: last
} = arr; log(first); / / 1 log(last); / / 3 }) (console.log) Copy the code
The above code deconstructs the array object. [arr. Length-1] = 2; [arr. Length-1] = 3;
The square bracket notation is a property name expression.
I also learned about array deconstruction yesterday
Basic nested object deconstruction
Like arrays, deconstruction can also be used for nested structured objects.
(function (log) {
const obj = {
p: [
'Hello'. {
y: 'little' } ] }; const { p: [x, { y }] } = obj; log(x); // "Hello" log(y); // "little" }) (console.log) Copy the code
Note that p is a mode, not a variable, and therefore will not be assigned.
If p is also assigned as a variable, it can be written as follows.
(function (log) {
const obj = {
p: [
'Hello'. {
y: 'little' } ] }; const { p, p: [x, { y }] } = obj; log(x); // "Hello" log(y); // "little" log(p); // [ 'Hello', { y: 'little' } ] }) (console.log) Copy the code
So it’s important to remember that variables are assigned, patterns are not assigned.
Multiple nested object destructions
Like arrays, deconstruction can also be used for nested structured objects.
(function (log) {
const node = {
loc: {
start: {
line: 1. column: 5 } } }; const { loc, loc: { start }, loc: { start: { line } } } = node; log(line); / / 1 log(loc); // { start: { line: 1, column: 5 } } log(start); // { line: 1, column: 5 } }) (console.log) Copy the code
The above code has three deconstruction assignments, respectively for loC, start and line.
Note that in the last deconstruction assignment of the line property, only line is a variable, loc and start are modes, not variables.
Combine arrays for nested assignments
(function (log) {
const obj = {};
const arr = [];
({
foo: obj.prop, bar: arr[0] } = { foo: 123. bar: true }); log(obj); // { prop: 123 } log(arr); // [ true ] }) (console.log) Copy the code
Array and object deconstruction can also be used together
Setting defaults
The deconstruction of an object can also specify default values.
(function (log) {
const {
x1 = 3
} = {};
log(x1); / / 3
const { x2, y2 = 5 } = { x2: 1 }; log(x2); / / 1 log(y2); / / 5 const { x3: y3 = 3 } = {}; // log(x3); // ReferenceError: x3 is not defined log(y3); / / 3 const { x4: y4 = 3 } = { x: 5 }; // log(x4); // ReferenceError: x4 is not defined log(y4); / / 3 const { message: msg = 'Something went wrong' } = {}; log(msg); // "Something went wrong" }) (console.log) Copy the code
The default is valid only if the object’s attribute value is strictly equal to undefined.
(function (log) {
const {
x1 = 3
} = {
x1: undefined
}; log(x1); / / 3 const { x2 = 3 } = { x2: null }; log(x2); // null }) (console.log) Copy the code
In the code above, the attribute x is null, and since null is not exactly equal to undefined, it is a valid assignment, causing the default value 3 not to take effect.
Matters needing attention
Deconstruction not successful
If the deconstruction fails, the value of the variable is equal to undefined.
(function (log) {
const {foo} = {bar: 'baz'};
log(foo); // undefined
}) (console.log)
Copy the code
Parent attribute does not exist
An error is reported if the deconstruction pattern is a nested object and the parent property of the child object does not exist.
(function (log) {
/ / an error
const {foo: {bar}} = {baz: 'baz'};// TypeError: Cannot destructure property `bar` of 'undefined' or 'null'.
const _tmp = {baz: 'baz'};
_tmp.foo.bar // Cannot read property 'bar' of undefined }) (console.log) Copy the code
In the code above, the property foo of the object to the left of the equals sign corresponds to a child object. The bar property of this child object will report an error when deconstructed.
The reason for this is simple, because foo is undefined, like _tmp.foo.bar, and an error is reported when the child property is fetched.
Variables that have been declared
If you want to use an already declared variable to destruct an assignment, you must be very careful.
(function (log) {
// This is not the case
const x;
{x} = {x: 1};
// SyntaxError: Unexpected token =
}) (console.log) Copy the code
The above code is written incorrectly because the JavaScript engine interprets {x} as a block of code, resulting in syntax errors.
The only way to solve this problem is to not put curly braces at the beginning of the line and avoid JavaScript interpreting them as blocks of code.
(function (log) {
// The correct way to write
const x;
({x} = {x: 1});
log(x);/ / 1
}) (console.log) Copy the code
The above code puts the entire destruct assignment statement in parentheses and executes correctly.
Summary of today’s lesson
Today the mood
Today is mainly based on search to basic learning object deconstruction, this hope to learn more tomorrow ~~~~
This article is formatted using MDNICE