Detailed explanation of destructuring assignment syntax in Javascript

Preface

The "destructuring assignment syntax" first introduced in ES6 allows values ​​from arrays and objects to be inserted into different variables. Although it may look difficult, it is actually very easy to learn and use.

Destructuring assignment syntax is a JS expression. ES6 allows you to extract values ​​from arrays and objects and assign values ​​to variables according to a certain pattern, which is called destructuring. Through destructuring assignment, properties/values ​​can be taken out of objects/arrays and assigned to other variables.

Before the emergence of ES6 destructuring assignment, when we needed to assign a value to a variable, we could only specify the value directly.

for example:

let a = 1;
let b = 2;
let c = 3;
let d = 4;
let e = 5;

Array destructuring is very simple. All you have to do is declare a variable for each value in the array. You can define fewer variables, instead of indices in the array (i.e. if you only want to process the first few values), skip some indices or even use the REST pattern to put all remaining values ​​in a new array.

const nums = [ 3, 6, 9, 12, 15 ];
const [
 k, // k = 3
 l, // l = 6
 , // Skip a value (12)
 ...n // n = [12, 15]
] = nums;

Object Destructuring

Object destructuring is very similar to array destructuring, the main difference is that you can reference each key in the object by name, thus creating a variable with the same name. You can also deconstruct the keys into new variable names, deconstruct only the required keys, and then use the rest mode to deconstruct the remaining keys into a new object.

const obj = { a: 1, b: 2, c: 3, d: 4 };
const {
 a, // a = 1
 c: d, // d = 3
 ...rest // rest = { b: 2, d: 4 }
} = obj;

Nested Destructuring

Nested objects and arrays can be destructured using the same rules. The difference is that you can destructure a nested key or value directly into a variable without having to store the parent object in the variable itself.

const nested = { a: { b: 1, c: 2 }, d: [1, 2]};
const {
 a: {
  b: f, // f = 1
  ...g // g = { c: 2 }
 },
 ...h // h = { d: [1, 2]}
} = nested;

Advanced Deconstruction

Since arrays behave like objects, you can use destructuring assignment syntax to get a specific value from an array by using the index as the key in the object destructuring assignment. This method can also be used to obtain other attributes of the array (such as the length of the array). Finally, you can also define default values ​​for variables in the destructuring process if the destructuring value is undefined.

const arr = [ 5, 'b', 4, 'd', 'e', ​​'f', 2 ];
const {
 6: x, // x = 2
 0: y, // y = 5
 2: z, // z = 4
 length: count, // count = 7
 name = 'array', // name = 'array' (not present in arr)
 ...restData // restData = { '1': 'b', '3': 'd', '4': 'e', ​​'5': 'f' }
} = arr;

Summarize

This is the end of this article about deconstruction assignment syntax in Javascript. For more relevant JS deconstruction assignment syntax content, please search 123WORDPRESS.COM’s previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!