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