Hướng dẫn dùng asained JavaScript
The destructuring assignment syntax is a JavaScript expression that makes it possible to unpack values from arrays, or properties from objects, into distinct variables. DescriptionThe object and array literal expressions provide an easy way to create ad hoc packages of data.
The destructuring assignment uses similar syntax, but on the left-hand side of the assignment to define what values to unpack from the sourced variable.
Similarly, you can destructure objects on the left-hand side of the assignment.
This capability is similar to features present in languages such as Perl and Python. Binding and assignmentFor both object and array destructuring, there are two kinds of destructuring patterns: binding pattern and assignment pattern, with slightly different syntaxes. In binding patterns, the pattern starts with a declaration keyword (
All variables share the same declaration, so if you want some variables to be re-assignable but others to be read-only, you may have to destructure twice — once with
In assignment patterns, the
pattern does not start with a keyword. Each destructured property is assigned to a target of assignment — which may either be declared beforehand with
Note: The parentheses
If your coding style does not include trailing semicolons, the Note that the equivalent binding pattern of the code above is not valid syntax:
Default valueEach destructured property can have a default value. The default value is used when the property is not present, or has value
The default value can be any expression. It will only be evaluated when necessary.
Rest propertyYou can end a destructuring pattern with a rest property
The rest property must be the last in the pattern, and must not have a trailing comma.
Destructuring patterns with other syntaxesIn many syntaxes where the language binds a variable for you, you can use a destructuring pattern as well. These include:
For features specific to array or object destructuring, please refer to the individual examples below. ExamplesArray destructuringBasic variable assignment
Destructuring with more elements than the sourceIn an array destructuring from an array of length N specified on the right-hand side of the assignment, if the number of variables specified on the left-hand side of the assignment is greater than N, only the first N variables are assigned values. The values of the remaining variables will be undefined.
Swapping variablesTwo variables values can be swapped in one destructuring expression. Without destructuring assignment, swapping two values requires a temporary variable (or, in some low-level languages, the XOR-swap trick).
Parsing an array returned from a functionIt's always been possible to return an array from a function. Destructuring can make working with an array return value more concise. In this example,
Ignoring some returned valuesYou can ignore return values that you're not interested in:
You can also ignore all returned values: Using a binding pattern as the rest propertyThe rest property of array destructuring assignment can be another array or object binding pattern. This allows you to simultaneously unpack the properties and indices of arrays.
These binding patterns can even be nested, as long as each rest property is the last in the list.
On the other hand, object destructuring can only have an identifier as the rest property.
Unpacking values from a regular expression matchWhen the regular expression
Using array destructuring on any iterableArray destructuring calls the iterable protocol of the right-hand side. Therefore, any iterable, not necessarily arrays, can be destructured.
Non-iterables cannot be destructured as arrays.
Iterables are only iterated until all bindings are assigned.
The rest binding is eagerly evaluated and creates a new array, instead of using the old iterable.
Object destructuringBasic assignment
Assigning to new variable namesA property can be unpacked from an object and assigned to a variable with a different name than the object property.
Here, for
example, Assigning to new variable names and providing default valuesA property can be both
Unpacking properties from objects passed as a function parameterObjects passed into function parameters can also be unpacked into variables, which may then be accessed within the function body. As for object assignment, the destructuring syntax allows for the new variable to have the same name or a different name than the original property, and to assign default values for the case when the original object does not define the property. Consider this object, which contains information about a user.
Here we show how to unpack a property of the passed object into a variable with the same name. The parameter value
You can define the name of the unpacked variable. Here we
unpack the property named
Nested objects can also be unpacked. The example below shows the property
Setting a function parameter's default valueDefault values can be specified using Below we show a function where the default size is
In the function signature for You could have also written the function without that default. However, if you leave out that default value, the function will look for at least one argument to be supplied when invoked,
whereas in its current form, you can call For more information, see Default parameters > Destructured parameter with default value assignment. Nested object and array destructuring
For of iteration and destructuring
Computed object property names and destructuringComputed property names, like on object literals, can be used with destructuring.
Invalid JavaScript identifier as a property nameDestructuring can be used with property names that are not valid JavaScript identifiers by providing an alternative identifier that is valid.
Combined Array and Object DestructuringArray and Object
destructuring can be combined. Say you want the third element in the array
The prototype chain is looked up when the object is deconstructedWhen deconstructing an object, if a property is not accessed in itself, it will continue to look up along the prototype chain.
Specifications
Browser compatibilityBCD tables only load in the browser See also |