This is the 14th day of my participation in the August More Text Challenge

The preface

When it comes to deconstructing assignment, the first thing that comes to mind is definitely Object, but the most commonly used data structure in JS is not only Object but also Array Array. Destruct assignment is a new syntax in ES6 that allows us to split arrays or objects into a series of variables, making it easier to use variables in some cases.

An array of deconstruction

Let’s look at an example of an array deconstructing into a variable

Set name = arr[0] // set sex = arr[1] // Set sex = arr[1] sex] = arr; alert(name); // coolFish alert(sex); / / maleCopy the code

The array structure can also be used with functions such as splice

Let [name, sex] = "coolFish male ".splice(") // result = coolFish sex = "male"Copy the code

If we want to simplify an array, for example I don’t want the second element, then we can skip it with a void

Let [name,, sex] = ["coolFish", "24 ", "male "]; alert( sex ); / / maleCopy the code

Assign to anything on the left, not just to variables

let people = {}; [people.name, people.age] = "coolFish male ".split(' '); alert(user.name); // coolFishCopy the code

Loop with the.entries method of the object

let user = { name: "coolFish", age: 25 }; For (let [key, value] of object.entries (user)) {alert(' ${key}:${value} '); // Loop through key-value pairs for (let [key, value] of object.entries (user)) {alert(' ${key}:${value} '); //1: name:coolFish //2: age:30 }Copy the code

You can also swap variables, remember the interview question, how do YOU swap a and B, and the easiest way to do that is the following

let a = 1
let b = 2
[a, b] = [b, a]
Copy the code

The remaining elements of the array

If we just want to get the first few elements and collect the rest, we can use… Add one more parameter to accept the remaining parameters

let [name1, name2, ...extra] = ["coolFish", "coolFish", "teacherGuo","smilken"]; alert(name1); // coolFish alert(name2); // coolFish // Notice that 'rest' is of type array alert(rest[0]); // teacherGuo alert(rest[1]); // smilken alert(rest.length); / / 2Copy the code

The default value

If the number of variables in an assignment statement is greater than the number of actual elements in the array, the assignment will not fail. Variables that are not assigned a value are considered undefined

let [name, sex] = [];
​
alert(name); // undefined
alert(sex); // undefined
Copy the code

If we want a “default” value for an unassigned variable, we can provide it using =

// Default value let [name = "coolFish", sex = "male "] = ["teacherGuo"]; alert(name); TeacherGuo (value from array) alert(sex); // Male (default is used)Copy the code

Object structure

We tend to use more object structure than array deconstruction

Let coolFish = {age: "25", sex: 'male ', height: 178}; let {age, sex, height} = coolFish; alert(age); // 25 alert(sex); / / male alert (height); / / 178Copy the code

The coolfish. title, coolfish. width, and coolfish. height attributes are assigned to the corresponding variables. The order of the variables doesn’t matter. This code also works:

Let coolFish = {age: "25", sex: 'male ', height: 178}; let {height,age, sex, } = coolFish; alert(age); // 25 alert(sex); / / male alert (height); / / 178Copy the code

If we want to deconstruct a property and assign it to a variable with another name, such as coolfish.height to H, we can specify it with a colon

Let coolFish = {age: "25", sex: 'male ', height: 178}; Let {height: H,age:A, sex,} = coolFish; // height -> H // age -> A // sex -> male; // 178 alert(A); // 25 alert(sex) // MaleCopy the code

To prevent the deconstruction of missing attributes from going wrong

let coolFish = { age: "25" }; let {width = 100, height = 200, age} = options; alert(age); // 25 alert(width); // 100 alert(height); / / 200Copy the code

If we want a property to be deconstructed and assigned to a variable of another name, and set the default value, we can use the colon and equal sign together

let coolFish = { age: "25" }; let {width : W = 100, height : H = 200, age} = options; alert(age); // 25 alert(W); // 100 alert(H); / / 200Copy the code