Community Learn Tools Library Leisure
search
English
Home > List of blog posts > ES6箭头函数的常用场景与类应用场景及作用
Blogger Information
Blog 56
fans 1
comment 0
visits 62258
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
ES6箭头函数的常用场景与类应用场景及作用
零龙
Original
1192 people have browsed it

ES6 箭头函数

  • 箭头函数提供了一种更加简洁的函数书写方式

  • 基本用法及ES6类的申明

  2. <!DOCTYPE html>
  3. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>箭头函数</title>
  8.     <script typet="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
  9. </head>
  10. <style>
  12. .like{ font-size:35px;  color:#ccc; cursor:pointer;}
  13. .cs{ font-size:35px;color:#f00;cursor:pointer;}
  14. span{font-size: 12px; line-height: 50%;}
  15. </style>
  16. <span class="like" id="dian">&#10084;</span>
  18. <span id="zang"></span>
  19. <body>
  21.     <script>
  22.         // 1.无参数的箭头函数
  23.         let a1 = () => {};
  24.         console.dir(a1());   
  26.         // 2.传参数的箭头函数
  27.         let a2 = (itme)  => console.log(`->a2(${itme})`);
  28.         a2(25);    
  30.         //3.多个参数
  31.         let a3 = (...items) => console.log(`->a3(${items})`);
  32.         a3(1,2,3,4);
  34.         //4,箭头函数的应用
  36.         let a4 = (a,b) => console.log(a + b);
  37.         a4(5,8);
  38.         //箭头函数的累加
  39.         let a5 = (...args) => args.reduce((prev,next) => prev + next,0);
  40.         //reduce函数相加后的总和
  41.         console.log(a5(9,33,44,12,5,66,44,33));
  42.         // 箭头函数的遍历
  43.         let a6 = (...items) => items.map((item)=>console.log(item));
  44.         a6("曹操","刘备","董卓");
  46.         let a7 = (d,l,m) => console.log(d+l+m);
  47.         a7(5,5,3);
  48.         a7(...[8,4,6])
  50.         let a8 = (w,...items) => console.log(w,items);
  51.         a8(5,6,7,8);
  52.         a8(...[5,6,7],8);
  53.         //5.属性的简化
  54.         let a9 = (id,name,email) => ({id,name,email});
  55.         user = a9(1,"曹操","cc@qq.com");
  56.         console.log(user);
  57.         //6.方法的简化
  58.         let a10 = {
  59.             sName : "三国演义",
  60.             getSg()
  61.             {
  62.                return this.sName;
  63.             },
  64.         };
  65.         console.log(a10);
  66.         //7.闭包应用场景
  67.         let a11 =() =>
  68.         {
  69.             let username = "曹操";
  70.             let get = () =>username;
  71.             return get;
  72.         }
  73.        let a12 = a11();      
  74.        console.log(a12());
  75.        //子函数调用父函数的变量值
  77.        //8.创建多个全局可用的API
  78.        let set,inc,dec,print
  79.        let manager = (n) =>
  80.        {
  81.            let num = n;
  82.            //定义一个变量接收数值
  83.            set = (val) => {num = val};
  84.            //存储num
  85.            inc = () => { num++; return num;} 
  87.            dec = () =>  { num--; return num;} 
  90.            print = () => { return num;} ;
  92.        };
  93.          manager(10);
  95.               document.getElementById("zang").innerHTML = print();
  96.        $(function () {            
  97.             $("#dian").click(function () {
  99.               if(document.getElementById("dian").className==='like')
  100.               {
  101.                 document.getElementById("dian").className = 'cs';
  102.                 document.getElementById("zang").innerHTML = inc();
  103.               }
  104.               else
  105.               {
  106.                 document.getElementById("dian").className = 'like';
  107.                 document.getElementById("zang").innerHTML = dec();
  108.               }
  111.             });
  112.         });
  113.         //9.ES6 类的申明
  114.         class UserName 
  115.         {
  116.             constructor(name)
  117.             {
  118.                 this.name = name;
  119.             }
  120.             setname()
  121.             {
  122.                 return this.name;
  123.             }
  124.         }
  125.         username = new UserName("刘备");
  126.         console.log(username.setname());
  127.     </script>
  128. </body>
  129. </html>

示例图：

Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：箭头函数其实并不是什么新发现, python中早以有之, 所以抽空多学几门编程语言没有错的, 不少语言之间的语法中相互借鉴的
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post