1. Use of arrow functions

<script> let name=[" xiao Ming "," xiao green "," xiao bai "]; Let name_normal=name.map(function(item){return item+=" "; }); Let name_arrow=name.map((item)=>{return item+=" class "}); // let name_arrow=name.map(item=> item+=" student "); // Console. log(name_normal); console.log('\n'); console.log(name_arrow); </script>Copy the code

2. Arrow functions cannot be created with new.

Normal.prototype. Name =" hahaha "; function Normal(){} const normal=new Normal(); console.log(normal.name); / / output structure attribute / / const Arrow () = = > {}, / / const Arrow = new Arrow (); // The structure cannot be created correctlyCopy the code

3. This point

<! DOCTYPE HTML > < HTML lang="en"> <head> <meta charset="UTF-8"> <title> Arrow function </title> <link rel="stylesheet" Href = "https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" > < script SRC = "https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js" > < / script > < script SRC = "https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js" > < / script > < style > * {margin: 0; padding: 0; } body{ position: relative; Background: RGB (255242231); } .div2{ width: 500px; height: 500px; Background: RGB (116,73,212); position: fixed; text-align: center; top: 50%; left: 50%; transform: translate(-50%,-50%); border-radius: 15px; } button{ margin:50px; } p{ font-size: 20px; width: 300px; margin: 30px auto; border-radius: 15px; Background: RGB (253110139); } </style> </head> <body> <div class="div2"> <button class="normalButton BTN btn-info btn-lg"> </button> <p Class ="normalP"></p> <button class="arrowButton BTN btn-danger btn-lg"> </p> </p> </body> <script> const normalButton=document.querySelector(".normalButton"); const arrowButton=document.querySelector(".arrowButton"); const normalP=document.querySelector(".normalP"); const arrowP=document.querySelector(".arrowP"); Let normalFunction=function(){normalp.innerhtml =" normalFunction "+this; }; Let arrowFunction=()=>{arrowp.innerhtml =" arrowFunction "+this; }; normalButton.addEventListener("click",normalFunction,false); arrowButton.addEventListener("click",arrowFunction,false); </script> </html>Copy the code

The this value of normal functions is dynamic

The value of the arrow function is this pointing either to the global or to the ordinary function at the next level