AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

JS(第九课)深刻的去理解函数.(一)

2023-07-16 84
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： JS(第九课)深刻的去理解函数.(一)

进行复习案例一 对上面之前讲过的函数进行复习

// 函数的声明
function one(){
//函数调用成功后再控制台打印出下面的语句
    console.log("我是的第一个函数")
}
//函数的调用
one();
function two(name){
    console.log("我是一个带有名字的参数")
}
two("我是一个带有名字的参数")
function three(){
    console.log("我是一个没有调用的函数")
}
//声明了函数没有去调用不会执行
function five(){
    for(var i=1;i<=5;i++){
       document.write("我是一个遍历的函数"+"<br>")
    }
}
 five()  
<!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 one(){
            console.log("我是的第一个函数")
        }
        one();
        function two(name){
            console.log("我是一个带有名字的参数")
        }
        two("我是一个带有名字的参数")
        function three(){
            console.log("我是一个没有调用的函数")
        }
        function five(){
            for(var i=1;i<=5;i++){
               document.write("我是一个遍历的函数"+"<br>")
            }
        }
         five()  
    </script>
</body>
</html>

如果让你想到函数的作用时你能想到那些函数呢！我能想到了函数在下面哦

// f(x)=x

// f(x)=ax^2+bx+c

// f(x)=sinx

// f(x)=cosx

// f(x)=tanx

// f(x)=x^3

// 值声明没有去调用

// function sayhi(){

// console.log("HEllow world")

// }

// sayhi();

// f(x)=2x+3

// f(1)=2*1+3

// f(2)=2*2+3

// f(3)=2*3+3

// f(4)=2*4+3


接下来我们对函数换种方式 下面的函数功能是实现 1到100的求和

 function sum() {
     var sum = 0
     for (var i = 10; i <= 20; i++) {
         console.log(i)
         sum += i
         console.log(sum)
     }
 }
 function sum() {
     var sum = 0
     for (var i = 10; i <= 20; i++) {
         console.log(i)
         sum += i
         console.log(sum)
     }
 }

函数的返回值  return

  function sum1(x, y, z) {
      var aa = x * y * z;
      console.log("用户打印出"+aa)
      return aa;
  }
  function sum2(x, y, z) {
      var bb = x + y + z;
      alert(bb)
      console.log("用户打印出"+bb)
      return bb;
  }
  function hs(a){
      console.log(1+a);
      console.log(a-1)
      return a;
  }
  hs(123)
 function sum(n){
     console.log(n*n*Math.PI.toFixed(2))
 }
 function sumM(n){
     var num=0;
     for(i=1;i<=n;i++){
         num+=i
     }
     return num
 }
 function  symText(n){
     if(n>100000000){
         return (n/100000000).toFixed(2)+'亿'
     }else if(n>10000){
         return (n/10000).toFixed(2)+'万'
     } else{
         return n;
     }
 }

运行结果自己可以看一下

<!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>
    <!-- 函数的变量名 -->
    <!-- foo bar baz  -->
    <script>
        function sum() {
            var sum = 0
            for (var i = 10; i <= 20; i++) {
                console.log(i)
                sum += i
                console.log(sum)
            }
        }
        function sum1(x, y, z) {
            var aa = x * y * z;
            console.log("用户打印出"+aa)
            return aa;
        }
        function sum2(x, y, z) {
            var bb = x + y + z;
            alert(bb)
            console.log("用户打印出"+bb)
            return bb;
        }
        function hs(a){
            console.log(1+a);
            console.log(a-1)
            return a;
        }
        hs(123)
        function sum(n){
            console.log(n*n*Math.PI.toFixed(2))
        }
        function sumM(n){
            var num=0;
            for(i=1;i<=n;i++){
                num+=i
            }
            return num
        }
        function  symText(n){
            if(n>100000000){
                return (n/100000000).toFixed(2)+'亿'
            }else if(n>10000){
                return (n/10000).toFixed(2)+'万'
            } else{
                return n;
            }
        }
    </script>
    <input type="submit" value="求和" onclick="sum()">
</body>
</html>

思考下下面的代码执行顺序 自己思考一下？

 function chuko() {
        alert("这是程序的出口")
    }
    function a() {
        chuko();
    }
    function b() {
        a();
    }
    function c() {
        b();
    }
    function d() {
        alert("程序的入口")
        c();
    }
    // 调用的出口
    d()

全局变量和局部的变量在JS中页常看到的 那么如何去区分呢？下面的案例带你去了解

<!-- 全局变量和局部变量 -->
<script>
    var aaa = "我是全局变量";
    function names() {
        var bbb = "这是局部的变量";
        document.write(aaa + "<br>")
        document.write(bbb)
    }
    names();
    document.write(aaa + "<br>")
    // document.write(bbb)
</script>

函数的参数你们是如何理解的呢！接下来这个案例带你了解什么是参数?下面是html结构图

 <input type="button" onclick="asd('小明','56')" value="转入了两个参数" />
 <input type="button" onclick="asd1('小胡','37','男')" value="转入三个参数" />
 <button type="button" onclick="asd2('小兵','20','女','19756743456')">转入四个参数</button>
 <button type="button" onclick="asd3('小王','67','女','18978654567','南昌市')">转入五个参数</button>
 <button type="button" onclick="sex('小红','27','女','18978654567','南昌市','360429200010090878')">转入六个参数</button>
 <button type="button" onclick="asd('成功成名','17')">成功成名</button>
 <button onclick="myFun()">无参数的构造方法</button>

/* 转入两个参数 */

function asd(name, age) {
      alert("姓名:" + name + "年龄:" + age + "岁");
      console.log("姓名:" + name + "年龄:" + age + "岁")
      // document.write("姓名:" + name + "年龄:" + age + "岁");
  }

/* 转入三个参数 */

 function asd1(name, age, sex) {
      alert("姓名:" + name + "年龄:" + age + "岁" + "性别" + sex);
      console.log("姓名:" + name + "年龄:" + age + "岁" + "性别" + sex)
      // document.write("姓名:" + name + "年龄:" + age + "岁" + "性别" + sex);
  }

/* 转入四个参数 */

  function asd2(name, age, sex, phone) {
      alert("姓名:" + name + "年龄:" + age + "岁" + "性别" + sex + "电话" + phone);
      console.log("姓名:" + name + "年龄:" + age + "岁" + "性别" + sex + "电话" + phone)
      // document.write("姓名:" + name + "年龄:" + age + "岁" + "性别" + sex + "电话" + phone);
  }

/* 转入五个参数 */

function asd3(name, age, sex, phone, address) {
      alert("姓名:" + name + "年龄:" + age + "岁" + "性别" + sex + "电话" + phone + "地址" + address);
      console.log("姓名:" + name + "年龄:" + age + "岁" + "性别" + sex + "电话" + phone + "地址" + address)
      // document.write("姓名:" + name + "年龄:" + age + "岁" + "性别" + sex + "电话" + phone + "地址" + address);
  }

/* 转入六个参数 */

  function sex(name, age, sex, phone, address, shengfengzheng) {
      alert("姓名:" + name + "年龄:" + age + "岁" + "性别" + sex + "电话" + phone + "地址" + address + "身份证号:" + shengfengzheng);
      console.log()
      document.write();
  }

// 转入的第七个参数

 function seven(name, age, sex, phone, address, shengfengzheng, A) {
      alert("姓名:" + name + "年龄:" + age + "岁" + "性别" + sex + "电话" + phone + "地址" + address + "身份证号:" + shengfengzheng + "属性" + A);
  }

// 转入的第八个参数

 function seven(name, age, sex, phone, address, shengfengzheng, A, B) {
     alert("姓名:" + name + "年龄:" + age + "岁" + "性别" + sex + "电话" + phone + "地址" + address + "身份证号:" + shengfengzheng + "属性" + A + "动作" + B);
 }

// 转入的第九个参数

   function seven(name, age, sex, phone, address, shengfengzheng, A, B, C, D) {
       alert("姓名:" + name + "年龄:" + age + "岁" + "性别" + sex + "电话" + phone + "地址" + address + "身份证号:" + shengfengzheng + "属性" + A + "动作" + B + "未知" + C + "睡觉" + D);

 // 转入的第十一个参数

 function seven(name, age, sex, phone, address, shengfengzheng, A, B, C, D,E) {
     alert("姓名:" + name + "年龄:" + age + "岁" + "性别" + sex + "电话" + phone + "地址" + address + "身份证号:" + shengfengzheng + "属性" + A + "动作" + B + "未知" + C + "睡觉" + D+"标号"+E);
 }

参数的总结:myFun() 红色挂号中有几个参数在函数的调用中的函数中的()中要有几个参数值

function myFun(a,b,c,d,e,f,g,h,i,j,k,l...) {}

myFun(a,b,c,d,e,f,g,h,i,j,k,l...) 绿色标记的所有位置都是一对一的关系 不能错位


文章标签：
JavaScript
关键词：
JavaScript函数
JavaScript深刻函数
t75yjb52rsccc
目录
相关文章
廖小凡
|
2月前
|
JavaScript 前端开发 Java
[JS]同事：这次就算了，下班回去赶紧补补内置函数，再犯肯定被主管骂
本文介绍了JavaScript中常用的函数和方法，包括通用函数、Global对象函数以及数组相关函数。详细列出了每个函数的参数、返回值及使用说明，并提供了示例代码。文章强调了函数的学习应结合源码和实践，适合JavaScript初学者和进阶开发者参考。
廖小凡
49 2
[JS]同事：这次就算了，下班回去赶紧补补内置函数，再犯肯定被主管骂
大树营养快线
|
2月前
|
前端开发 JavaScript 开发者
除了 Generator 函数，还有哪些 JavaScript 异步编程解决方案？
【10月更文挑战第30天】开发者可以根据具体的项目情况选择合适的方式来处理异步操作，以实现高效、可读和易于维护的代码。
大树营养快线
49 2
游客44yag4ft7nckq
|
3月前
|
JavaScript 前端开发
JavaScript 函数语法
JavaScript 函数是使用 `function` 关键词定义的代码块，可在调用时执行特定任务。函数可以无参或带参，参数用于传递值并在函数内部使用。函数调用可在事件触发时进行，如用户点击按钮。JavaScript 对大小写敏感，函数名和关键词必须严格匹配。示例中展示了如何通过不同参数调用函数以生成不同的输出。
游客44yag4ft7nckq
35 1
德国都芳最好
|
3月前
|
存储 JavaScript 前端开发
JS函数提升 变量提升
【10月更文挑战第6天】函数提升和变量提升是 JavaScript 语言的重要特性，但它们也可能带来一些困惑和潜在的问题。通过深入理解和掌握它们的原理和表现，开发者可以更好地编写和维护 JavaScript 代码，避免因不了解这些机制而导致的错误和不一致。同时，不断提高对执行上下文等相关概念的认识，将有助于提升对 JavaScript 语言的整体理解和运用能力。
德国都芳最好
28 1
神明木佑
|
3月前
|
JavaScript 前端开发
js教程——函数
js教程——函数
神明木佑
62 4
神明木佑
|
3月前
|
存储 JavaScript 前端开发
js中函数、方法、对象的区别
js中函数、方法、对象的区别
神明木佑
38 2
小强在此
|
3月前
|
JavaScript 前端开发 Java
【javaScript数组，函数】的基础知识点
【javaScript数组，函数】的基础知识点
小强在此
38 5
cqtianxin1
|
3月前
|
JavaScript 前端开发
Node.js 函数
10月更文挑战第5天
cqtianxin1
30 3
Li370234940
|
3月前
|
前端开发 JavaScript
探索JavaScript函数基础
探索JavaScript函数基础
Li370234940
27 3
邹荣乐
|
3月前
|
存储 JavaScript 前端开发
JavaScript数据类型全解：编写通用函数，精准判断各种数据类型
JavaScript数据类型全解：编写通用函数，精准判断各种数据类型
邹荣乐
75 0

热门文章

最新文章

  • 1
    Midscene.js：AI 驱动的 UI 自动化测试框架，支持自然语言交互，生成可视化报告
  • 2
    一个好看的小时钟html+js+css源码
  • 3
    如何使用Selenium处理JavaScript动态加载的内容？
  • 4
    带方向感知功能的js图片遮罩层插件
  • 5
    折腾之王：JavaScript之父Brave浏览器与BAT的诞生
  • 6
    Next.js 实战 (七)：浅谈 Layout 布局的嵌套设计模式
  • 7
    页面滚动触发css3动画js插件
  • 8
    npm、cnpm 和 pnpm 是三种常用的 Node.js 包管理工具
  • 9
    捕获键盘输入和输入组合键的js库hotkeys
  • 10
    Node.js导入MongoDB具体操作指南
  • 1
    阿里云云效操作报错合集之遇到Node.js的内存溢出问题，该怎么办
    161
  • 2
    阿里云云效操作报错合集之Node.js构建报错，该如何排查问题
    146
  • 3
    Nest.js 实战 (三)：使用 Swagger 优雅地生成 API 文档
    172
  • 4
    Next.js静态出口生成策略深度解析
    110
  • 5
    Node.js搭建REST API实战：从基础到部署
    99
  • 6
    前端如何学习Node.js及Node.js的主要用途
    112
  • 7
    Vue.js组件通信策略详解
    68
  • 8
    网络爬虫开发：JavaScript与Python特性的小差异
    72
  • 9
    Nest.js 实战 (二)：如何使用 Prisma 和连接 PostgreSQL 数据库
    266
  • 10
    JavaScript 使用axios库发送 post请求给后端， 给定base64格式的字符串数据和一些其他参数， 使用表单方式提交， 并使用onUploadProgress显示进度
    532

    • 相关课程

    更多
  • JavaScript入门与实战
  • JavaScript 自学手册文档教程
  • Vue.js 入门与实战
  • Vue.js完全自学手册图文教程
  • 前端开发CSS基础
  • jQuery开发教程

    • 相关电子书

    更多
  • JavaScript面向对象的程序设计
  • Delivering Javascript to World
  • 编程语言如何演化-以JS的private为例

    • 相关实验场景

    更多
  • 前端开发基础3：CSS3常见显示属性
  • Html5和Webpack2：Webpack5打包JS和样式表
  • 前端开发基础6：Node.js和LESS预编译工具
    • 下一篇
    阿里云开通OSS存储服务详细流程