JavaScript 箭头函数

箭头函数的形式：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      //普通函数
      let sum = function () {};

      //箭头函数
      let sum2 = () => {};

      //当参数只有一个值的时候，可以省略小括号

      let num3 = (a) => {
        return a * a;
      };

      //当函数体只有一行代码，可以省略大括号
      //如果把大括号省略的话，会自动的返回结果，不要写return

      let fun = (a) => a * a;
      console.log(fun(6));
    </script>
  </body>
</html>

箭头函数的使用：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      //箭头函数的使用  定时器
      //1.方式①
      window.setInterval(function () {}, 1000);
      //2.方式②
      window.setInterval(() => console.log(1), 1000);
      //3.方式③
      window.setInterval(() => {
        console.log(1);
      }, 1000);

      //箭头函数的使用注意点:

      //1. 箭头函数不存在先解析后调用，所以必须先定义再调用

      fun(); //这是错误的;
      let fun = (a) => console.log(1);

      //2. 箭头函数不存在arguments;
      let funs = () => {
        console.log(arguments);
      };
      funs(1, 2);

      //3.箭头函数中不存在this，箭头中的只指向上级作用域的this;
    </script>
  </body>
</html>

 

posted @ 2022-10-28 13:10  しゅおく  阅读(28)  评论(0)    收藏  举报