首页 > 其他分享 >02-JS函数基础

02-JS函数基础

时间：2024-07-03 15:08:29浏览次数：12  
标签：02 function console log JS bar message foo 函数

01 函数中的arguments

1.1 传多的参数也会存在里面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        function foo(name, age) {
            console.log(arguments[0])
            console.log(arguments[1])
            console.log(arguments[2])
        }

        foo("kobe", 12, "洛杉矶")
    </script>
</body>
</html>

1.2 遍历的方式获取参数

<!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>
    function foo(name, age){
      for (var i = 0; i < arguments.length; i++){
        console.log(arguments[i]);
      }
    }
    foo("tom", 12)
  </script>
</body>
</html>

02 作用域

2.1 无块级作用域举例

<!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>
    {
      var message = "hello world"
      console.log("代码块中访问:", message);
    }
    console.log("代码块外面访问:", message);
  </script>
</body>
</html>

结果如下

2.2 函数有自己作用域举例

<!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>
    function foo(){
      var message = "hello world"
      console.log("函数内部访问message", message);
    }
    foo()
    console.log("函数外部访问message", message);
  </script>
</body>
</html>

结果如下

03 全局变量和局部变量的理解

3.1 全局变量

<!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>
    // 在全局(script元素中)定义一个变量,这个变量可以在定义之后的任何范围访问得到,那么这个变量就是全局变量
    var message = "hello world"
    function foo(){
      console.log("foo中访问message", message);
      function bar(){
        console.log("bar中访问message", message);
      }
      bar()
    }
    foo()
  </script>
</body>
</html>

3.2 局部变量

定义在函数内部,只有在函数内部才能进行访问，称之为局部变量

<!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>
    var message = "hello world"
    function foo(){
      // 在函数内部去访问函数之外的变量,访问的变量称之为外部变量
      console.log("foo中访问message", message);
      var name = "kobe"
      function bar(){
        // name对于bar函数来说就是外部变量
        console.log("bar中访问name",name);
        // message对于bar函数来说也是外部变量
        console.log("bar中访问message", message);
      }
      bar()
    }
    foo()
  </script>
</body>
</html>

04 变量的查找顺序

05 函数的表达式

06 JS函数特点

6.1 函数赋值给一个变量

<!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>
    var foo = function() {
      return 3
    }
    console.log(foo())
  </script>
</body>
</html>

6.2 函数在变量之间来回传递

<!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>
    var foo = function() {
      return 3
    }

    var bar = foo
    console.log(bar())
  </script>
</body>
</html>

6.3 函数作为另外一个函数的参数

<!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>
    var foo1 = function(){
      console.log("foo1函数被执行了~~~~~~");
    }

    function bar(fn){
      fn()
    }

    bar(foo1)
  </script>
</body>
</html>

6.4 函数作为另外一个函数的返回值

<!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>
    function foo(name){
      function bar(){
        console.log(name);
      }
      return bar
    }

    console.log(foo("tom")());
  </script>
</body>
</html>

6.5 函数存储在一种数据结构中

<!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>
    var obj = {
      name: "tom",
      eating: function(){
        console.log("eating");
      }
    }
    obj.eating()
  </script>
</body>
</html>

07 回调函数的理解

7.1 概念理解

<!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>
    function foo(fn){
      // 通过fn去调用bar函数,这个过程就是函数的回调
      fn()
    }

    function bar(){
      console.log("bar函数执行了");
    }

    foo(bar)
  </script>
</body>
</html>

7.2 回调函数应用场景


上面的写法可以优化，如下

标签：02,function,console,log,JS,bar,message,foo,函数
From： https://www.cnblogs.com/yufc/p/18281663

相关文章

  • VMware vSphere Tanzu部署_02_ESXI系统安装
    ESX系统安装设置虚拟闪存占用为8G安装ESXI7.0时，默认会占用128G的VMFSL虚拟闪存大小，侵占磁盘空间。可以在安装过程中按shift+字母o键，添加使用参数：autoPartitionOSDataSize=8192安装系统配置网络......
  • 读取.net core配置文件appsetting.json内容
    appsetting.json内容//省略部分代码...//代码生成相关"CodeCreatorInfo":{"xmlPath":"11111",//xml路径(绝对路径)"jsRootPaht":"2222",//js文件夹路径"Controllers":"333",//特殊Controller列表，逗号隔开......
  • 2024.07 别急记录
    1.CEOI2023-Balance考虑\(S=2\)。令\((a_{i,j},j+T)\)连一条无向边，若\(a_{i,j}\)度数为奇数则连\((a_{i,j},S+T+1)\)，在这张图上跑出一个欧拉回路，则对边进行定向后每个题目入度与出度相同，去掉点\(S+T+1\)后入度与出度差\(1\)，刚好符合题目要求。于是若欧拉回路中\(j+T......
  • 题目 3293: 蓝桥杯2024年第十五届决赛真题-数位翻转
    https://www.dotcpp.com/oj/problem3293.html 题目描述小明创造了一个函数f(x)用来翻转x的二进制的数位（无前导0）。比如f(11)=13，因为11=(1011)2，将其左右翻转后，变为13=(1101)2；再比如f(3)=3，f(0)=0，f(2)=f(4)=f(8)=1等等。小明随机出了一个长度为......
  • 【2024版】最新HW参考 | HVV行动之蓝军经验总结（非常详细）零基础入门到精通，收藏这一篇就
    ‍正文：HW行动，攻击方的专业性越来越高，ATT&CK攻击手段覆盖率也越来越高，这对于防守方提出了更高的要求，HW行动对甲方是一个双刃剑，既极大地推动了公司的信息安全重视度和投入力量，但同时对甲方人员的素质要求有了很大提升，被攻破，轻则批评通报，重则岗位不保；大的金融、央企可能不担心......
  • [漏洞复现]Geoserver表达式注入致远程代码执行漏洞（CVE-2024-36401）
    觉得该文章有帮助的，麻烦师傅们可以搜索下微信公众号：良月安全。点个关注，感谢师傅们的支持。看到长亭昨晚发送的漏洞风险提示，我这边快马加鞭看看能不能赶上热度，payload就放在星球了，欢迎各位师傅来白嫖，看上眼的话可以留下试试。漏洞描述GeoServer是一个开源服务器，用于共享、处......
  • 2024 年人工智能和数据科学的五个主要趋势
    引言2023年，人工智能和数据科学登上了新闻头条。生成性人工智能的兴起无疑是这一显著提升曝光度的驱动力。那么，在2024年，该领域将如何继续占据头条，并且这些趋势又将如何影响企业的发展呢？在过去几个月，我们对数据和技术领域的高层管理人员进行了三次调查。两次调查对象是麻省理工学......
  • strlen/strcpy/strncpy/strcat/strcmp/memset/memcmp不完成实现（部分函数跑过测试集）
    #include<klib.h>#include<klib-macros.h>#include<stdint.h>#if!defined(__ISA_NATIVE__)||defined(__NATIVE_USE_KLIB__)size_tstrlen(constchar*s){//panic("Notimplemented");assert(s!=NULL);size_tl=0;......
  • DVT：华为提出动态级联Vision Transformer，性能杠杠的 | NeurIPS 2021
    论文主要处理VisionTransformer中的性能问题，采用推理速度不同的级联模型进行速度优化，搭配层级间的特征复用和自注意力关系复用来提升准确率。从实验结果来看，性能提升不错来源：晓飞的算法工程笔记公众号论文:NotAllImagesareWorth16x16Words:DynamicTransformersfor......
  • 2024年的NBA合同年
    在合同签字的那一刻，不同的人终于奔赴不同的旅程。BronyJames定义了湖人的Nepolism，同时也占据了一个本该进入NBA孩子的一个命运的位置。闹得最热闹的当属克莱汤普森klayThompson，2023年勇士开了1.2亿四年，可是克莱需要2.1四年的顶薪，谈判拉锯各种报价越谈越少，Klay场上的表现也越......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99