Shulou(Shulou.com)06/01 Report--

This article shares with you the content of a sample analysis of JavaScript deconstructing assignments. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

Concept

ES6 provides a more concise assignment mode to extract values from arrays and objects, which is called deconstruction

Example:

[a, b] = [50,100]; console.log (a); / / expected output: 50console.log (b); / / expected output: 100 [a, b,... rest] = [10,20,30,40,50]; console.log (rest); / / expected output: [30,40,50] array deconstruction

Array deconstruction is very simple and concise, using the array literal quantity on the left side of the assignment expression, and each variable name in the array literal quantity is mapped to the same index item of the destructed array.

What does this mean? as in the following example, the items in the left array get the values of the corresponding indexes of the right destructed array.

Let [a, b, c] = [1,2,3]; / a = 1max / b = 2max / c = 3 declare assignment respectively

You can deconstruct assignments separately through variable declarations.

Example: declare variables and assign values respectively

/ / declare the variables let a, brambank / and then assign values [a, b] = [1,2]; console.log (a); / / 1console.log (b); / / 2 deconstructing default values

If the deconstructed value is undefined, you can set the default value:

Let a, bbank / set default value [a = 5, b = 7] = [1]; console.log (a); / / 1console.log (b); / / 7

In the above example, we set default values for both an and b

In this case, if the value of an or b is undefined, it will assign the default value of the setting to the corresponding variable (5 assigned to a 7 to b)

Swap variable value

In the past, we exchanged two variables using the

/ / Exchange abc = a * a = b * b = c

Or XOR.

However, in deconstruction assignment, we can exchange the values of two variables in a deconstruction expression.

Let a = 1 posilet b = 3 the values of [a, b] = [b, a]; console.log (a); / / 3console.log (b); / / 1 the array returned by the deconstructor

We can directly deconstruct a function that returns an array.

Function c () {return [10,20];} let a, b; [a, b] = c (); console.log (a); / / 10console.log (b); / / 20

In the above example, the return value of * * c () * * [10Magne20] can be deconstructed in a separate line of code.

Ignore the return value (or skip an item)

You can selectively skip some unwanted return values.

Function c () {return [1,2,3];} let [a, b] = c (); console.log (a); / / 1console.log (b); / / 3 assign the remaining value of the array to a variable

When you use array deconstruction, you can assign the rest of the assignment array to a variable

Let [a,... b] = [1,2,3]; console.log (a); / / 1console.log (b); / / [2,3]

In this way, b will also become an array, and the items in the array are all the remaining items.

Note:

Be careful here that you can't write any more commas at the end. If you add a comma, you will report an error.

Let [a,... b,] = [1,2,3]; / / SyntaxError: rest element may not have a trailing comma nested array deconstruction

Like objects, arrays can be nested and deconstructed

Example:

Const color = ['# FF00FF', [255,0,255], 'rgb (255,0,255)']; / / Use nested destructuring to assign red, green and blue// uses nested deconstruction to assign values red, green, blueconst [hex, [red, green, blue]] = color;console.log (hex, red, green, blue); / / # FF00FF 255 0255 string deconstruction

In array deconstruction, if the target of the deconstruction is a traverable object, it can be deconstructed and assigned, and the traversal object is the data that implements the Iterator interface.

Let [a, b, c, d, e] = 'hello';/*a =' hagb = 'etherec =' console.log (y); / / 22console.log (z); / / object deconstructs the basic object deconstructing the basic object let x = {y: 22, z: true}; let {y Magazine z} = x; / / let {yburet ycoz} = x; the acronym console.log (y); / / 22console.log (z); / / assign to the new variable name

You can change the name of a variable when using object deconstruction

Let o = {p: 22, Q: true}; let {p: foo, Q: bar} = oscape console.log (foo); / / 22console.log (bar); / / true

As in the code var {p: foo} = o, get the property name p of the object o, and then assign a value to a variable named foo

Deconstructing default

If the object value extracted by deconstruction is undefined, we can set the default value

Let {a = 10, b = 5} = {a: 3}; console.log (a); / / 3console.log (b); / / 5 provide default values while assigning values to new object names

As mentioned earlier, we assign a value to the new object name. Here we can provide a default value for the new object name. If it is not deconstructed, the default value will be used automatically.

Let {a: aa = 10, b: bb = 5} = {a: 3}; console.log (aa); / / 3console.log (bb); / / 5 deconstruct using both arrays and objects

Arrays and objects can be used together in a structure

Const props = [{id: 1, name: 'Fizz'}, {id: 2, name:' Buzz'}, {id: 3, name: 'FizzBuzz'},]; const [, {name}] = props;console.log (name); / / "FizzBuzz" incomplete deconstruction let obj = {p: [{y:' world'}]}; let {p: [{y}, x]} = obj / / do not deconstruct let / x = undefined// y = 'world' assign the remaining values to an object let {a, b,... rest} = {a: 10, b: 20, c: 30, d: 40}; / a = 10App / b = 20max / rest = {c: 30, d: 40} nested object deconstruction (negligible deconstruction) let obj = {p: [' hello', {y: 'world'}]} Let {p: [x, {y}]} = obj;// x = 'hello'// y =' world'let obj = {p: ['hello', {y:' world'}]}; let {p: [x, {}]} = obj;// ignores obj;// / x = 'hello' caution be careful to deconstruct with declared variables

Error demonstration:

Let x; {x} = {x: 1}

The JavaScript engine will interpret {x} as a code block, resulting in syntax errors. We should avoid writing curly braces at the beginning of the line and avoid JavaScript interpreting it as a code block.

Write it correctly:

Let x; ({x} = {x: 1})

Correctly write the whole deconstruction assignment statement in a parenthesis, and it can be executed correctly.

Deconstruction assignment of function parameters

The parameters of a function can also be assigned using deconstruction

Function add ([x, y]) {return x + y;} add ([1,2])

In the above code, the parameters of the function add appear to be an array, but when passing parameters, the array parameters are deconstructed into variables x and y, which is the same as passing x and y directly inside the function.

The purpose of deconstruction

There are many uses for deconstructing assignment.

The value of the exchange variable let x = 1 × let y = 2; [x, y] = [y, x]

The above code exchanges the values of x and y, which is not only concise but also easy to read, with clear semantics

Returns multiple values from a function

The function can only return one value. If we want to return more than one value, we can only return these values in an array or an object. When we have deconstruction assignments, taking these values out of the object or array is like a probe.

/ return an array function example () {return [1,2,3];} let [a, b, c] = example (); / / return an object function example () {return {foo: 1, bar: 2};} let {foo, bar} = example (); extract JSON data

Deconstructing assignments are especially useful for extracting data from JSON objects

Example:

Let jsonData = {id: 42, status: "OK", data: [867, 5309]}; let {id, status, data: number} = jsonData;console.log (id, status, number); / / 42, "OK", [867, 5309]

Using the above code, we can quickly extract the values from the JSON data

Thank you for reading! This is the end of the article on "sample Analysis of JavaScript deconstruction assignment". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it for more people to see!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.