How to realize the function of deconstruction assignment in ES6

This article mainly explains "how to deconstruct the assignment function of ES6". Interested friends may wish to have a look at it. The method introduced in this paper is simple, fast and practical. Now let the editor take you to learn "how to deconstruct the assignment function of ES6"!

(1) swap the value of a variable

[X, y] = [y, x]

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

(2) return multiple values from the function

The function can return only one value, and if you want to return multiple values, you can only return them in an array or object. With deconstruction assignments, it is very convenient to take out these values.

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

(3) the definition of function parameters.

Deconstructing assignments can easily correspond a set of parameters to variable names.

/ the parameter is an ordered set of values function f ([x, y, z]) {.} f ([1, 2, 3]); / / the parameter is an unordered set of values function f ({x, y, z}) {.} f ({z: 3, y: 2, x: 1})

(4) extract JSON data

Deconstructing assignments is particularly useful for extracting data from JSON objects.

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

The above code can quickly extract the value of JSON data.

(5) default values of function parameters

JQuery.ajax = function (url, {async = true, beforeSend = function () {}, cache = true, complete = function () {}, crossDomain = false, global = true, / /. More config}) {/ /. Do stuff}

If you specify the default value of the parameter, you avoid rewriting it inside the function body.

Var foo = config.foo | | 'default foo'

A sentence like this.

(6) traversing the Map structure

Any object that deploys the Iterator interface can use for... Of loop traversal. The Map structure natively supports the Iterator interface, and it is very convenient to obtain the key name and key value with the deconstruction and assignment of variables.

Var map = new Map (); map.set ('first',' hello'); map.set ('second',' world'); for (let [key, value] of map) {console.log (key + "is" + value);} / / first is hello// second is world

If you only want to get the key name, or if you just want to get the key value, you can write it as follows.

/ / get the key name for (let [key] of map) {/ /.} / / get the key value for (let [, value] of map) {/ /.}

(7) the method of specifying the input module

When you load a module, you often need to specify which methods to input. Deconstructing the assignment makes the input statement very clear.

Const {SourceMapConsumer, SourceNode} = require ("source-map"); at this point, I believe you have a better understanding of "how to deconstruct the assignment function of ES6", so you might as well do it! Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!