Es6 Detailed explanation

One 、 summary

1. ECMAScript It's a kind of Ecma The international community has adopted ECMA-262 Standardized scripting language , It is widely used on the world wide web , It's often called JavaScript, It can be understood as JavaScript A standard of .
2. rapid growth ：es2.0 To es6.0

Two 、Es6 The grammar of

1. let and const command

 <script> // The traditional way of defining variables and constants   Unified use var //ES6 How to define : // Defining variables  let name1 = "xqh"; // Define constants  const PI2 = Math.PI; console.log(name1) console.log(PI2); </script>

• let/const/var The difference between

1. let and const solve ：
   • var It will lead to the problem of variable penetration
   • var It will lead to the problem of constant modification

 <script> for(var i= 0;i<5;i++){
       console.log(i); } console.log(i); // The result is traversal  0 1 2 3 4 5, Cause variable penetration  Live reload enabled. // Change to let, Solve the problem of variable penetration  0 1 2 3 4 const PI = Math.PI; PI=100; console.log(PI); // use var Will print out 100, Violation of constant immutability . Change to const, Is immutable  // In actual development and production , If it's a small program ,uniapp Or some scaffolding , You can use it boldly let and const // But if it is web In development , I suggest you still use var, Because it is not supported in some lower versions of browsers let and const </script>
    

2. Template string

 <script> // The string will involve the dynamic part  var person={
       name:"xqh", address:"jiangxi", link:"http://www.baidu.com" } // Traditional stitching , use + And quotation marks  let address = " I am a "+person.name+", I live in "+person.address+", Website is "+person.link; console.log(address); // use es6 Syntax splicing  let address1 = ` I am a ${
        person.name}, I live in ${
        person.address}, Website is ${
        person.link}`; console.log(address1); </script>

3. The default parameters of the function are the same as the arrow function

1. Function default parameters

<script> // Function default parameters  function sum(a=200,b=100){
      // Default parameters  return a+b; } var result = sum(200);// Only one is passed to a,b If there is a default parameter, use the default parameter  console.log(result);//300 </script>

2. Arrow function

  <script> // Arrow function - a key （ In future project development ： Like an applet ,uniapp, Some scaffolds are widely used ） var sum = function(a,b){
       return a+b; }; // improvement   Get rid of function, Add an arrow after the bracket , If the logic code has only return You can directly omit , If there is only one parameter, brackets can also be omitted  var sum = (a,b)=>a+b; var result = sum(2,3); console.log(result); // Example  var arr = [1,2,3,4,5,6]; var newarr = arr.map(function(obj){
       return obj*2; }); console.log(newarr) // simplify  var newarr1 = arr.map(obj=> obj*2); </script>

4. Object initialization shorthand

• If in an object key and value The same name can be defined as a

<script> let info={
       title:" Jiangxi Agricultural University ", link:"www.baidu.com", go:function(){
       console.log(" I ride a little blue car to class "); } }; //es6 Abbreviation  // Because the object is key:value There is  //1： If key Consistent with the name of the variable , You can define it only once  //2： If value It's a function , You can put `:function` Get rid of , only （） that will do  var title=" Jiangxi Agricultural University "; var link = "www.baidu.com"; let info2 = {
       title, link, go(){
       console.log(" I ride a little blue car to class "); } }; console.log(info2); console.log(info2.link); console.log(info2.title); console.log(info2.go); </script>
    

5. Object to deconstruct

1. Object to deconstruct —es6 Provide some quick ways to get object properties and behavior

  <script> // The object is to key:value There is , There are two ways to get object properties and methods  //1. adopt . 2 adopt [] var title=" Jiangxi Agricultural University "; var link = "www.baidu.com"; let info2 = {
       title, link, go(){
       console.log(" I ride a little blue car to class "); } }; // adopt . The way  console.log(info2); console.log(info2.link); console.log(info2.title); info2.go; // adopt [] The way  console.log(info2["title"]); console.log(info2["link"]); info2["go"](); //es6 Object structure -- In fact, it is a form of quickly obtaining properties and methods  var {
      title,link} = info2; // To restore it is  var title = info2.title var link = info2.link </script>

6. Object propagation operators

1. Object propagation operators

 <script> // Object propagation operators  var person={
       name:" Study together ", address:" guangdong ", link:"www.kuangshen.com", phone:123456, go(){
       console.log(" Start work "); } }; // Deconstruct  var {
      name,address,...person2}=person;//name/address Deconstructed . The rest will be person2 in , This is the propagation operator  console.log(person2);// Print out person2 There is only link、phone、go（）, because name、address Has been deconstructed  console.log(name); console.log(address); </script>

2. Simple application cases

  <script> //java--- backstage  // data format  ：var userPage={pages:10,users:[{},{}],pageNo:1,pageSize:100,totle:100}; // Asynchronous requests  $.post("/user/search",function(res){
       //res={pages:10,users:[{},{}],pageNo:1,pageSize:100,totle:100}; var userPage = {
      pages:10,users:[{
      },{
      }],pageNo:1,pageSize:100,totle:100}; var {
      users,...userPage2}=userPage;// So we can take pages,pageNo,pageSize,totle Take it all out , and users Take it out alone  </script>
    

7. Array map and reduce Methods use

1. Array map

 <script> // Right arr Array each element *2 var arr =[1,2,3,4,5,6,7]; // The traditional way  let newarr=[]; for(let i =0;i<arr.length;i++){
       newarr.push(arr[i]*2); } console.log(newarr); //map It's easy to implement .map: Self contained loop , And the processed value will be backfilled to the corresponding position  var newarr2 = arr.map(function(ele){
       return ele*2 }) // simplify ：var newarr2 = arr.map(ele=>ele*2); console.log(newarr2); //map Processing object data  var users=[{
      age:10,name:" Primary school "},{
      age:12,name:" Xiao Hu "},{
      age:15,name:" Little fat "}]; // Now we need to increase everyone's age  var newusers=users.map(ele=>{
       ele.age = ele.age+1; return ele; }); console.log(newusers); </script>

2. reduce() Use

  <script> //reduce Quickly sum the elements in the array  var arr=[1,2,3,4,5,6,7,8,9,10]; var result=arr.reduce(function(a,b){
       return a+b; }); // simplify  var resule=arr.reduce((a,b)=>a+b); console.log(result); </script>

3、 ... and 、 Summary

1. es6 Grammar can be applied to nodejs in , No mistake.
2. Output with terminal