Home  >  Article  >  Web Front-end  >  Detailed explanation of destructuring assignment examples for ES6 learning

Detailed explanation of destructuring assignment examples for ES6 learning

零下一度
零下一度Original
2017-06-26 14:51:131646browse

1. The definition of destructuring assignment

A simple understanding is that the left and right sides of the assignment = sign have the same structure to perform one-to-one assignment statements

2. Classification of destructuring assignment

Array destructuring assignment Object destructuring assignment String destructuring assignment Boolean value destructuring assignment Function parameter destructuring assignment Numerical destructuring assignment ( Just focus on understanding the first two)

3. Explain each category separately

 1. Array Destructuring assignment (the code is shown below, and necessary comments are added for easy understanding)

{
  let a,b,rest;
  [a,b]=[1,2];
  console.log(a,b);//输出1,2 直接将1和2解构到a和b}

 You can also set default values ​​for variables. For example, c in the following code defaults to 3 If deconstruction, for example [a,b,c]=[1,2], c is not deconstructed, then c is undefined

{
  let a,b,c,rest;
  [a,b,c=3]=[1,2];
  console.log(a,b);}

 Usage scenario 1

  ①、Variable exchange  

{
  let a=1;
  let b=2;
  [a,b]=[b,a];
  console.log(a,b);
}

       

①                   

## Get the result and then retrieve it through the index)   

{  function f(){return [1,2]
  }
  let a,b;
  [a,b]=f();
  console.log(a,b);
}

  ③. Only take out some required values ​​​​of the returned result

{  function f(){return [1,2,3,4,5]
  }
  let a,b,c;
  [a,,,b]=f();
  console.log(a,b); // 输出1 4
}

  ④.No Care about the content length of the array

{  function f(){return [1,2,3,4,5]
  }
  let a,b,c;
  [a,...b]=f();
  console.log(a,b);//输出1,[2,3,4,5]
}
 
2. Object destructuring assignment

{
  let o={p:42,q:true};
  let {p,q}=o;
  console.log(p,q);
}
 
Object destructuring assignment setting default Value

{
  let {a=10,b=5}={a:3};
  console.log(a,b);//输出3 5
}
  
Destructuring assignment of slightly complex objects

  

###
{
  let metaData={
    title:'abc',
    test:[{
      title:'test',
      desc:'description'}]
  }
  let {title:esTitle,test:[{title:cnTitle}]}=metaData;
  console.log(esTitle,cnTitle);//abc test (相当于esTitle和cnTitle分别对应metaData里面的abc和test)
}
###### ###

The above is the detailed content of Detailed explanation of destructuring assignment examples for ES6 learning. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn