ES6 syntax: Deconstruct assignment

This article mainly explains the related content of ‘deconstructing assignment’, starting from two aspects: 1. What is structure assignment; 2. Deconstruct the classification of assignments.

As shown in the figure:

1. What is ES6 deconstruction assignment

1.The definition in the ES6 Standards book is that it allows you to take values from arrays and objects in a certain pattern and then assign values to variables, which is called deconstruction.2.Left a structure, right a structure, and then left and right according to a certain corresponding relationship for assignment.Copy the code

2. Deconstruct the classification of assignments

1.Destruct assignment of arrays ⭐️2.Object destructuring assignment ⭐️3.String destruct assignment4.Boolean deconstruction assignment5.Numerical deconstruction assignment6.Function argument destruct assignmentCopy the code

3. Variable assignment

/** * 1; /** * 1; This is a 'matching pattern ', and as long as the pattern on both sides of the equal sign is the same, the variable on the left is assigned the corresponding value */
{
  let num1, num2, num3;
  [num1, num2] = [1.2]
  console.log('ES6 array assignment: '.'num1 = ', num1, 'num2 = ', num2);
  // Print the result:
  Num1 = 1 num2 = 2
}

/** * 1-2
{
  let num1 = 1, num2 = 2, num3;
  console.log('ES5 assignment: '.'num1 = ', num1, 'num2 = ', num2);
  // Print the result:
  Num1 = 1 num2 = 2
}

Copy the code

4. Array structure assignment

/** * 2. Array structure assignment * 1. Syntax * 1.... Num3 its demerit ends up being [3, 4, 5, 6], * 2.... Num3 which can intercept the array [3, 4, 5, 6]? This is an important feature of deconstructing assignment. * /
{
  let num1, num2, num3;
  [num1, num2, ...num3] = [1.2.3.4.5.6]
  console.log('ES6 array destruct assignment match... Grammar: '.'num1 = ', num1, 'num2 = ', num2, 'num3 = ', num3);
  // Print the result:
  // ES6 array destruct assignment with... Syntax: num1 = 1 num2 = 2 num3 = (4) [3, 4, 5, 6]
}

Copy the code

5. Object deconstruction assignment:

{
  let str1, str2;
  ({str1, str2} = {str1: 1.str2: 2}) // Note: () is related to ES6 parsing. ES6 defaults to treating {} as a block of code, rather than parsing it into a deconstructed assignment.
  console.log('Destruct assignment of ES6 objects:'.'str1 = ', str1, 'str2 = ', str2);
  // Print the result:
  Str1 = 1 str2 = 2
}

Copy the code

5.1 Deconstructive Assignment of Objects — Implement variable assignment

{
  let obj1 = {str1: 111.str2: 2222};
  let {str1, str2} = obj1;
  console.log('ES6 object structure assignment -- Implementation variable assignment: '.'str1 = ', str1, 'str2 = ', str2);
  // Print the result:
  Str1 = 111 str2 = 2222
}

Copy the code

5.2 Object Deconstruction assignment – The server returns data processing in JSON format

// ask us to remove the 'major' and 'minor' headings.
{
  let resData = {
    title: 'Headline - 111111'.cont: [{title: 'Sub-heading - SSSSS'.desc: 'Description'}}]// Specify a received variable 'receTitle' 'receTitleSmal' for title < big/small title >
  let {title: receTitle, cont: [{title: receTitleSmal}]} = resData
  console.log('Fetch specified content:'.'Title - receTitle =', receTitle, '; Subtitle - receTitleSmal = ', receTitleSmal);
  // Print the result:
  -recetitle = -111111; Subtitle - receTitleSmal = subtitle - SSSSS
}

Copy the code

6. Deconstruct assignments to set defaults

6.1 Default Values: Structural assignment allows you to specify default values

{
  let num1, num2, num3;
  [num1, num2, num3 = 3] = [1.2]
  console.log('ES6 array structure assignment -- Default: '.'num1 = ', num1, 'num2 = ', num2, 'num3 = ', num3);
  // Print the result:
  ES6 array structure assignment -- Default: num1 = 1 num2 = 2 num3 = 3
}

Copy the code

6.2 Default value: When the default value is not set

{
  let num1, num2, num3;
  [num1, num2, num3] = [1.2]
  console.log('ES6 array structure assignment -- Default: '.'num1 = ', num1, 'num2 = ', num2, 'num3 = ', num3);
  // Print the result:
  S6 array structure assignment -- Default: num1 = 1 num2 = 2 num3 = undefined
}

Copy the code

6.3 Default: ES6 internally uses the strict equality operator ‘===’ to determine whether a position has a value. So, if an array member is not strictly equal to undefiend, the default values are not valid.

{
  let num1, num2, num3;
  [num1, num2, num3 = 3] = [1.2.null]
  console.log('ES6 array structure assignment -- Default: '.'num1 = ', num1, 'num2 = ', num2, 'num3 = ', num3);
  // Print the result:
  - Default: num1 = 1 num2 = 2 num3 = null
}

Copy the code

6.4 Default value: Setting the default value of an object

{
  let {str1 = 1, str2 = 2} = {str1: 'Will the default value be overridden by the set value?'}
  console.log('Object default setting:'.'str1 = ', str1, 'str2 = ', str2);
  // Print the result:
  Str1 = whether the default value overrides the setting str2 = 2
}

Copy the code

7. Deconstruct the usage scenarios for assignments

Destruct the use of assignment scenarios: previously in ES5 difficult to implement code, through'Destruct assignment'It can be easily implemented.1.Exchange of variables2.Receiving background data processing mode3.Choose the data we need4.Weeding out useless dataCopy the code

7.1 Deconstructing the usage scenarios of assignment — exchange of variables

/ / ES6 writing
{
  let num1 = 1, num2 = 2;
  [num1, num2] = [num2, num1]
  console.log('ES6 structure assignment - Exchange of variables: '.'num1 = ', num1, 'num2 = ', num2);
  // Print the result:
  // ES6 structure assignment - variable exchange: num1 = 2 num2 = 1
}

// use an intermediate variable to store data.
{
  let num1 = 1, num2 = 2, mid;
  mid = num1
  num1 = num2
  num2 = mid
  console.log('ES5 - Exchange of variables: '.'num1 = ', num1, 'num2 = ', num2);
  // Print the result:
  // ES5 - num1 = 2 num2 = 1
}

Copy the code

7.2 Deconstructing the Usage scenario of Assignment – Receiving background data processing mode

/ / ES6 implementation
{
  function fn1() {
    return [1.2]}let num1, num2;
  [num1, num2] = fn1()
  console.log('ES6 implements receiving data processing: '.'num1 = ', num1, 'num2 = ', num2);
  // Print the result:
  Num1 = 1 num2 = 2
}

/ / ES5 implementation
{
  function fn1() {
    return [1.2]}let num1, num2, res;
  res = fn1()
  num1 = res[0]
  num2 = res[1]
  console.log('ES5 implements receiving data processing mode: '.'num1 = ', num1, 'num2 = ', num2);
  // Print the result:
  Num1 = 1 num2 = 2
}

Copy the code

7.3 Deconstructing the Usage scenarios of Assignment – When multiple values are returned, I can selectively accept the variables I need (what I want, the rest is redundant)

/ / ES6 implementation
{
  function fn1() {
    return [1.2.3.4.5.6]}let num1, num2, num3;
  [num1,,,num2] = fn1()
  console.log('ES6: '.'num1 = ', num1, 'num2 = ', num2);
  // Print the result:
  // ES6: num1 = 1 num2 = 4
}

Copy the code

7.4 Deconstruct the usage scenario of assignment – we do not know what the length of the array returned by the function is, we only care about the first one, the rest of the array is returned to the ok (need to use the array to iterate, do not need to put there without multi-pipe)

/ / ES6 implementation
{
  function fn1() {
    return [1.2.3.4.5.6]}let num1, num2, num3;
  [num1, ...num2] = fn1()
  console.log('ES6: '.'num1 = ', num1, 'num2 = ', num2);
  // Print the result:
  // ES6: num1 = 1 num2 = (5) [2, 3, 4, 5, 6]
}

Copy the code

The results of each sample code are shown below:

If it is helpful to you, you can click on the attention you like; The article will continue to be refined.
Any front-end knowledge you’d like to know? You can leave a message in the comments section, will follow up to share the relevant content.
It is not easy to sort out knowledge points. Every time, we sort out knowledge points in the quiet of night when we are busy at work. Whether knowledge points are big or small, we will share them after verification to prevent our published articles from misleading everyone. If you have any questions, please don’t hesitate to comment, I will change in time.